移动端安卓和IOS开发框架Framework7教程-Buttons 按钮

Framework7 comes with a bunch of ready to use buttons. All you need is to just add appropriate classes to your links or submit/button inputs:

iOS Theme Buttons

Usual Buttons

Just add button class to any link or button input:

1. <p><a href="#" class="button">Usual Button 1</a></p>
2. <p><a href="#" class="button">Usual Button 2</a></p>
3. <p><a href="#" class="button">Usual Button 3</a></p>

复制

实例预览

注意，因为在Framework7中，每个按钮默认是 "display: block" 的，所以会占据父元素 100% 的宽度

激活状态(Active State)

只需要给按钮加上 active class即可

1. <a href="#" class="button active">Active Button</a>

复制

圆形按钮(Round Buttons)

按钮上增加一个 button-round 即可:

1. <p><a href="#" class="button button-round">Round Button 1</a></p>
2. <p><a href="#" class="button button-round">Round Button 2</a></p>
3. <p><a href="#" class="button button-round active">Round Button Active</a></p>

复制

大尺寸的按钮(Big Buttons)

在按钮上加上 button-big class

1. <a href="#" class="button button-big">Big Button </a>
2. <a href="#" class="button button-big button-round">Big Round Button </a>
3. <a href="#" class="button button-big button-round active">Big Round Active Button </a>

复制

Buttons Row / Segmented Control

在"buttons-row"中每个button的宽度是相同的

只需要给 button 外面加上一个 有 buttons-row class 的元素即可

1. <a href="#" class="button button-fill">Fill Button </a>
2. <a href="#" class="button button-round button-fill">Round Fill Button</a>
3. <a href="#" class="button button-big button-fill">Big Fill Button </a>

复制

Color Buttons

You can use 10 default color themes to colorize buttons

1. <a href="#" class="button button-submit">Submit</a>
2. <a href="#" class="button button-cancel button-round">Round Cancel</a>
3. <a href="#" class="button button-big button-submit">Big Submit</a>
4. <a href="#" class="button button-big button-cancel">Big Cancel</a>

复制

列表按钮(List Block Buttons)

我们可以在 列表 中使用按钮

1. <div class="content-block-title">List block buttons</div>
2. <div class="list-block">
3.   <ul>
4.     <li>
5.       <a href="#" class="item-link list-button">List Button 1</a>
6.     </li>
7.     <li>
8.       <a href="#" class="item-link list-button">List Button 2</a>
9.     </li>
10.     <li>
11.       <a href="#" class="item-link list-button">List Button 3</a>
12.     </li>
13.   </ul>
14. </div>
15. <div class="content-block-title">Inset list block buttons</div>
16. <div class="list-block inset">
17.   <ul>
18.     <li>
19.       <a href="#" class="item-link list-button">List Button 1</a>
20.     </li>
21.     <li>
22.       <a href="#" class="item-link list-button">List Button 2</a>
23.     </li>
24.     <li>
25.       <a href="#" class="item-link list-button">List Button 3</a>
26.     </li>
27.   </ul>
28. </div>

复制

使用栅格(Using Grid)

当然，你可以把按钮放在任何你想放的位置。比如放在 栅格 中:

1. <div class="row">
2.   <div class="col-50">
3.     <a href="#" class="button button-big button-red">Cancel</a>
4.   </div>
5.   <div class="col-50">
6.     <a href="#" class="button button-big button-green">Submit</a>
7.   </div>
8. </div>

复制

安卓Material Theme Buttons

Usual/Flat Buttons

实例预览

As in iOS Theme just add button class to any link or button input:

1. <p><a href="#" class="button">Button</a></p>
2. <p><a href="#" class="button">Button</a></p>

复制

Buttons Row

Just wrap buttons with element with buttons-row class:

1. <p class="buttons-row">
2.   <a href="#" class="button">Button</a>
3.   <a href="#" class="button">Button</a>
4. </p>

复制

Raised Buttons

Add button-raised class to button:

1. <p class="buttons-row">
2.   <a href="#" class="button button-raised">Button</a>
3.   <a href="#" class="button button-raised">Button</a>
4.   <a href="#" class="button button-raised">Button</a>
5. </p>

复制

Raised Fill Buttons

Add button-fill class to button:

1. <p class="buttons-row">
2.   <a href="#" class="button button-fill button-raised">Button</a>
3.   <a href="#" class="button button-fill button-raised">Button</a>
4.   <a href="#" class="button button-fill button-raised">Button</a>
5. </p>

复制

Color Buttons

You can use 20 default Material color themes to colorize buttons

1. <p class="buttons-row">
2.   <a href="#" class="button color-red">Red</a>
3.   <a href="#" class="button color-green">Green</a>
4.   <a href="#" class="button color-blue">Blue</a>
5. </p>
6. <p class="buttons-row">
7.   <a href="#" class="button color-orange">Orange</a>
8.   <a href="#" class="button color-pink">Pink</a>
9.   <a href="#" class="button color-purple">Purple</a>
10. </p>
11. <p class="buttons-row">
12.   <a href="#" class="button color-cyan">Cyan</a>
13.   <a href="#" class="button color-teal">Teal</a>
14.   <a href="#" class="button color-indigo">Indigo</a>
15. </p>

复制

Color Fill Buttons

1. <p class="buttons-row">
2.   <a href="#" class="button button-fill color-red">Red</a>
3.   <a href="#" class="button button-fill color-green">Green</a>
4.   <a href="#" class="button button-fill color-blue">Blue</a>
5. </p>
6. <p class="buttons-row">
7.   <a href="#" class="button button-fill color-orange">Orange</a>
8.   <a href="#" class="button button-fill color-pink">Pink</a>
9.   <a href="#" class="button button-fill color-purple">Purple</a>
10. </p>
11. <p class="buttons-row">
12.   <a href="#" class="button button-fill color-cyan">Cyan</a>
13.   <a href="#" class="button button-fill color-teal">Teal</a>
14.   <a href="#" class="button button-fill color-indigo">Indigo</a>
15. </p>

复制

Color Raised Fill Buttons

1. <p class="buttons-row">
2.   <a href="#" class="button button-raised button-fill color-red">Red</a>
3.   <a href="#" class="button button-raised button-fill color-green">Green</a>
4.   <a href="#" class="button button-raised button-fill color-blue">Blue</a>
5. </p>
6. <p class="buttons-row">
7.   <a href="#" class="button button-raised button-fill color-orange">Orange</a>
8.   <a href="#" class="button button-raised button-fill color-pink">Pink</a>
9.   <a href="#" class="button button-raised button-fill color-purple">Purple</a>
10. </p>
11. <p class="buttons-row">
12.   <a href="#" class="button button-raised button-fill color-cyan">Cyan</a>
13.   <a href="#" class="button button-raised button-fill color-teal">Teal</a>
14.   <a href="#" class="button button-raised button-fill color-indigo">Indigo</a>
15. </p>

复制

Color Ripple Buttons

To add ripple of different color, just add ripple-[color] class to button

1. <p class="buttons-row">
2.   <a href="#" class="button ripple-blue">Button</a>
3.   <a href="#" class="button color-green ripple-pink">Button</a>
4.   <a href="#" class="button color-teal ripple-amber">Button</a>
5. </p>
6. <p class="buttons-row">
7.   <a href="#" class="button button-raised button-fill color-orange ripple-green">Button</a>
8.   <a href="#" class="button button-raised button-fill color-pink ripple-blue">Button</a>
9.   <a href="#" class="button button-raised button-fill color-purple ripple-yellow">Button</a>
10. </p>

复制

Big Buttons

Add button-big class to button

1. <p class="buttons-row">
2.   <a href="#" class="button button-big color-green">Button</a>
3.   <a href="#" class="button button-big color-red">Button</a>
4. </p>
5. <p class="buttons-row">
6.   <a href="#" class="button button-big button-fill button-raised color-pink">Button</a>
7.   <a href="#" class="button button-big button-fill button-raised color-teal">Button</a>
8. </p>

复制

List Block Buttons

1. <div class="card">
2.   <div class="list-block">
3.     <ul>
4.       <li>
5.         <a href="#" class="list-button item-link">List Button 1</a>
6.       </li>
7.       <li>
8.         <a href="#" class="list-button item-link">List Button 2</a>
9.       </li>
10.       <li>
11.         <a href="#" class="list-button item-link">List Button 2</a>
12.       </li>
13.     </ul>
14.   </div>
15. </div>