Buttons

优质

小牛编辑

135浏览

2023-12-01

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:

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

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

激活状态(Active State)

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

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

圆形按钮(Round Buttons)

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

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

大尺寸的按钮(Big Buttons)

在按钮上加上 button-big class

<a href="#" class="button button-big">Big Button </a>
<a href="#" class="button button-big button-round">Big Round Button </a>
<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 的元素即可

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

Color Buttons

You can use 10 default color themes to colorize buttons

<a href="#" class="button button-submit">Submit</a>
<a href="#" class="button button-cancel button-round">Round Cancel</a>
<a href="#" class="button button-big button-submit">Big Submit</a>
<a href="#" class="button button-big button-cancel">Big Cancel</a>

列表按钮(List Block Buttons)

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

<div class="content-block-title">List block buttons</div>
<div class="list-block">
  <ul>
    <li>
      <a href="#" class="item-link list-button">List Button 1</a>
    </li>
    <li>
      <a href="#" class="item-link list-button">List Button 2</a>
    </li>
    <li>
      <a href="#" class="item-link list-button">List Button 3</a>
    </li>
  </ul>
</div>
<div class="content-block-title">Inset list block buttons</div>
<div class="list-block inset">
  <ul>
    <li>
      <a href="#" class="item-link list-button">List Button 1</a>
    </li>
    <li>
      <a href="#" class="item-link list-button">List Button 2</a>
    </li>
    <li>
      <a href="#" class="item-link list-button">List Button 3</a>
    </li>
  </ul>
</div>

使用栅格(Using Grid)

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

<div class="row">
  <div class="col-50">
    <a href="#" class="button button-big button-red">Cancel</a>
  </div>
  <div class="col-50">
    <a href="#" class="button button-big button-green">Submit</a>
  </div>
</div>

Material Theme Buttons

Usual/Flat Buttons

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

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

Buttons Row

Just wrap buttons with element with buttons-row class:

<p class="buttons-row">
  <a href="#" class="button">Button</a>
  <a href="#" class="button">Button</a>
</p>

Raised Buttons

Add button-raised class to button:

<p class="buttons-row">
  <a href="#" class="button button-raised">Button</a>
  <a href="#" class="button button-raised">Button</a>
  <a href="#" class="button button-raised">Button</a>
</p>

Raised Fill Buttons

Add button-fill class to button:

<p class="buttons-row">
  <a href="#" class="button button-fill button-raised">Button</a>
  <a href="#" class="button button-fill button-raised">Button</a>
  <a href="#" class="button button-fill button-raised">Button</a>
</p>

Color Buttons

You can use 20 default Material color themes to colorize buttons

<p class="buttons-row">
  <a href="#" class="button color-red">Red</a>
  <a href="#" class="button color-green">Green</a>
  <a href="#" class="button color-blue">Blue</a>
</p>
<p class="buttons-row">
  <a href="#" class="button color-orange">Orange</a>
  <a href="#" class="button color-pink">Pink</a>
  <a href="#" class="button color-purple">Purple</a>
</p>
<p class="buttons-row">
  <a href="#" class="button color-cyan">Cyan</a>
  <a href="#" class="button color-teal">Teal</a>
  <a href="#" class="button color-indigo">Indigo</a>
</p>

Color Fill Buttons

<p class="buttons-row">
  <a href="#" class="button button-fill color-red">Red</a>
  <a href="#" class="button button-fill color-green">Green</a>
  <a href="#" class="button button-fill color-blue">Blue</a>
</p>
<p class="buttons-row">
  <a href="#" class="button button-fill color-orange">Orange</a>
  <a href="#" class="button button-fill color-pink">Pink</a>
  <a href="#" class="button button-fill color-purple">Purple</a>
</p>
<p class="buttons-row">
  <a href="#" class="button button-fill color-cyan">Cyan</a>
  <a href="#" class="button button-fill color-teal">Teal</a>
  <a href="#" class="button button-fill color-indigo">Indigo</a>
</p>

Color Raised Fill Buttons

<p class="buttons-row">
  <a href="#" class="button button-raised button-fill color-red">Red</a>
  <a href="#" class="button button-raised button-fill color-green">Green</a>
  <a href="#" class="button button-raised button-fill color-blue">Blue</a>
</p>
<p class="buttons-row">
  <a href="#" class="button button-raised button-fill color-orange">Orange</a>
  <a href="#" class="button button-raised button-fill color-pink">Pink</a>
  <a href="#" class="button button-raised button-fill color-purple">Purple</a>
</p>
<p class="buttons-row">
  <a href="#" class="button button-raised button-fill color-cyan">Cyan</a>
  <a href="#" class="button button-raised button-fill color-teal">Teal</a>
  <a href="#" class="button button-raised button-fill color-indigo">Indigo</a>
</p>

Color Ripple Buttons

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

<p class="buttons-row">
  <a href="#" class="button ripple-blue">Button</a>
  <a href="#" class="button color-green ripple-pink">Button</a>
  <a href="#" class="button color-teal ripple-amber">Button</a>
</p>
<p class="buttons-row">
  <a href="#" class="button button-raised button-fill color-orange ripple-green">Button</a>
  <a href="#" class="button button-raised button-fill color-pink ripple-blue">Button</a>
  <a href="#" class="button button-raised button-fill color-purple ripple-yellow">Button</a>
</p>

Big Buttons

Add button-big class to button

<p class="buttons-row">
  <a href="#" class="button button-big color-green">Button</a>
  <a href="#" class="button button-big color-red">Button</a>
</p>
<p class="buttons-row">
  <a href="#" class="button button-big button-fill button-raised color-pink">Button</a>
  <a href="#" class="button button-big button-fill button-raised color-teal">Button</a>
</p>

List Block Buttons

<div class="card">
  <div class="list-block">
    <ul>
      <li>
        <a href="#" class="list-button item-link">List Button 1</a>
      </li>
      <li>
        <a href="#" class="list-button item-link">List Button 2</a>
      </li>
      <li>
        <a href="#" class="list-button item-link">List Button 2</a>
      </li>
    </ul>
  </div>
</div>