贊助者成為贊助者

按鈕

Framework7 附帶許多可立即使用的按鈕。您只需將適當的類別新增至您的連結或提交/按鈕輸入即可

按鈕配置

按鈕配置相當簡單。只要將 button 類別新增至連結或提交/按鈕輸入即可

<!-- link as button -->
<a class="button">Button</a>

<!-- <button> as button -->
<button class="button">Button</button>

<!-- <input type="submit"> as button -->
<input type="submit" class="button" value="Button" />

按鈕修改器類別

Framework7 中有各種不同的按鈕。不同的按鈕樣式可透過額外的修改器類別及其組合來達成

button-fill填滿樣式的按鈕
button-fill-ios按鈕僅在 iOS 主題中具有填滿樣式
button-fill-md按鈕僅在 MD 主題中具有填滿樣式
button-tonal色調樣式的按鈕
button-tonal-ios按鈕僅在 iOS 主題中具有色調樣式
button-tonal-md按鈕僅在 MD 主題中具有色調樣式
button-round圓形按鈕
button-round-ios按鈕僅在 iOS 主題中為圓形
button-round-md按鈕僅在 MD 主題中為圓形
button-small小型按鈕
button-small-ios按鈕僅在 iOS 主題中為小型
button-small-md按鈕僅在 MD 主題中為小型
button-large大型按鈕
button-large-ios按鈕僅在 iOS 主題中為大型
button-large-md按鈕僅在 MD 主題中為大型
button-raised凸起按鈕
button-raised-ios僅在 iOS 主題中的凸起按鈕
button-raised-md僅在 MD 主題中的凸起按鈕
button-outline外框按鈕
button-outline-ios僅在 iOS 主題中的外框按鈕
button-outline-md僅在 MD 主題中的外框按鈕
button-active已啟用/已選取的按鈕狀態。用於分段式按鈕內
button-preloader應新增至具有預載器的按鈕，以製作載入按鈕
button-loading控制按鈕狀態以顯示/隱藏預載器和隱藏/顯示按鈕文字（切換按鈕至載入狀態）。button-preloader 也應新增至按鈕
color-[color]彩色按鈕，其中 [color] 是其中一個 預設顏色

當然，我們可以混合這些類別

<!-- rounded button -->
<a class="button button-round">Button</a>

<!-- rounded and filled button -->
<a class="button button-round button-fill">Button</a>

<!-- raised, round, fill, large button -->
<a class="button button-raised button-round button-fill button-large">Button</a>

<!-- small red button -->
<a class="button button-small color-red">Button</a>

預載器按鈕

可以建立動態預載器按鈕。此類按鈕必須在內部有預載器，以及用 <span> 標籤包覆的按鈕文字，以及額外的 button-preloader 類別

<button class="button button-preloader">
  <span class="preloader"></span>
  <span>Load</span>
</button>

若要顯示預載器，我們需要新增額外的 button-loading 類別（它會顯示內部預載器並隱藏按鈕文字）

<button class="button button-preloader button-loading">
  <span class="preloader"></span>
  <span>Load</span>
</button>

CSS 變數

以下是相關 CSS 變數（CSS 自訂屬性）清單。

請注意，註解的變數在預設情況下未指定，其值是它們在此情況下的備用值。

:root {
  --f7-button-font-size: 14px;
  --f7-button-min-width: 32px;
  --f7-button-bg-color: transparent;
  --f7-button-border-width: 0px;
  /*
  --f7-button-text-color: var(--f7-theme-color);
  --f7-button-pressed-text-color: var(--f7-button-text-color, var(--f7-theme-color));
  --f7-button-border-color: var(--f7-theme-color);
  --f7-button-fill-bg-color: var(--f7-theme-color);
  --f7-button-padding-vertical: 0px;
  */
  --f7-button-raised-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  --f7-button-raised-pressed-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16),
    0 3px 6px rgba(0, 0, 0, 0.23);
  --f7-segmented-raised-divider-color: rgba(0, 0, 0, 0.1);
  --f7-segmented-strong-padding: 2px;
  --f7-segmented-strong-between-buttons: 4px;
  --f7-segmented-strong-button-font-weight: 500;
  --f7-segmented-strong-button-active-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.25);
  --f7-segmented-strong-button-text-color: #000;
  --f7-segmented-strong-button-hover-bg-color: rgba(0, 0, 0, 0.04);
  --f7-segmented-strong-button-active-text-color: #000;
  --f7-segmented-strong-button-active-bg-color: #fff;
}
:root .dark,
:root.dark {
  --f7-segmented-strong-button-hover-bg-color: rgba(255, 255, 255, 0.02);
  --f7-segmented-strong-button-active-bg-color: rgba(255, 255, 255, 0.14);
  --f7-segmented-strong-button-text-color: #fff;
  --f7-segmented-strong-button-active-text-color: #fff;
}
.ios {
  --f7-button-fill-text-color: #fff;
  --f7-button-text-transform: uppercase;
  --f7-button-height: 28px;
  --f7-button-padding-horizontal: 10px;
  --f7-button-border-radius: 4px;
  --f7-button-font-weight: 600;
  --f7-button-letter-spacing: 0;
  /*
  --f7-button-outline-border-color: var(--f7-theme-color);
  */
  --f7-button-outline-border-width: 2px;
  /*
  --f7-button-pressed-bg-color: rgba(var(--f7-theme-color-rgb), .15);
  --f7-button-fill-pressed-bg-color: var(--f7-theme-color-tint);
  */
  --f7-button-large-text-transform: uppercase;
  --f7-button-large-height: 44px;
  --f7-button-large-font-size: 17px;
  --f7-button-large-font-weight: 500;
  --f7-button-small-outline-border-width: 2px;
  --f7-button-small-text-transform: uppercase;
  --f7-button-small-height: 26px;
  --f7-button-small-font-size: 13px;
  --f7-button-small-font-weight: 600;
  --f7-segmented-strong-button-text-transform: none;
  --f7-segmented-strong-button-active-font-weight: 600;
  --f7-button-tonal-bg-color: rgba(var(--f7-theme-color-rgb), 0.15);
  --f7-button-tonal-pressed-bg-color: rgba(var(--f7-theme-color-rgb), 0.25);
  --f7-button-tonal-text-color: var(--f7-theme-color);
  --f7-segmented-strong-bg-color: rgba(0, 0, 0, 0.07);
  --f7-segmented-strong-button-pressed-bg-color: rgba(0, 0, 0, 0.07);
}
.ios .dark,
.ios.dark {
  --f7-segmented-strong-bg-color: rgba(255, 255, 255, 0.1);
  --f7-segmented-strong-button-pressed-bg-color: rgba(255, 255, 255, 0.04);
}
.md {
  /*
  --f7-button-pressed-bg-color: transparent;
  */
  --f7-button-text-transform: none;
  --f7-button-height: 40px;
  --f7-button-padding-horizontal: 16px;
  --f7-button-border-radius: 8px;
  --f7-button-font-weight: 500;
  --f7-button-letter-spacing: normal;
  --f7-button-outline-border-width: 1px;
  --f7-button-large-text-transform: none;
  --f7-button-large-height: 48px;
  --f7-button-large-font-size: 14px;
  --f7-button-large-font-weight: 500;
  --f7-button-small-text-transform: none;
  --f7-button-small-outline-border-width: 1px;
  --f7-button-small-height: 32px;
  --f7-button-small-font-size: 14px;
  --f7-button-small-font-weight: 500;
  --f7-segmented-strong-button-text-transform: none;
  --f7-segmented-strong-button-active-font-weight: 500;
  --f7-segmented-strong-button-pressed-bg-color: transparent;
}
.md,
.md .dark,
.md [class*='color-'] {
  --f7-button-fill-pressed-bg-color: transparent;
  --f7-button-fill-text-color: var(--f7-md-on-primary);
  --f7-button-outline-border-color: var(--f7-md-outline);
  --f7-segmented-strong-bg-color: var(--f7-md-surface-variant);
  --f7-button-tonal-bg-color: var(--f7-md-secondary-container);
  --f7-button-tonal-pressed-bg-color: transparent;
  --f7-button-tonal-text-color: var(--f7-md-on-secondary-container);
}

範例

buttons.html
<template>
  <div class="page">
    <div class="navbar">
      <div class="navbar-bg"></div>
      <div class="navbar-inner sliding">
        <div class="title">Buttons</div>
      </div>
    </div>

    <div class="page-content">
      <div class="block-title">Usual Buttons</div>
      <div class="block block-strong block-outline-ios">
        <div class="grid grid-cols-3 grid-gap">
          <button class="button">Button</button>
          <button class="button">Button</button>
          <button class="button button-round">Round</button>
        </div>
      </div>
      <div class="block-title">Tonal Buttons</div>
      <div class="block block-strong block-outline-ios">
        <div class="grid grid-cols-3 grid-gap">
          <button class="button button-tonal">Button</button>
          <button class="button button-tonal">Button</button>
          <button class="button button-tonal button-round">Round</button>
        </div>
      </div>
      <div class="block-title">Fill Buttons</div>
      <div class="block block-strong block-outline-ios">
        <div class="grid grid-cols-3 grid-gap">
          <button class="button button-fill">Button</button>
          <button class="button button-fill">Button</button>
          <button class="button button-fill button-round">Round</button>
        </div>
      </div>
      <div class="block-title">Outline Buttons</div>
      <div class="block block-strong block-outline-ios">
        <div class="grid grid-cols-3 grid-gap">
          <button class="button button-outline">Button</button>
          <button class="button button-outline">Button</button>
          <button class="button button-outline button-round">Round</button>
        </div>
      </div>
      <div class="block-title">Raised Buttons</div>
      <div class="block block-strong block-outline-ios">
        <p class="grid grid-cols-3 grid-gap">
          <button class="button button-raised">Button</button>
          <button class="button button-raised button-fill">Fill</button>
          <button class="button button-outline button-raised">Outline</button>
        </p>
        <p class="grid grid-cols-3 grid-gap">
          <button class="button button-raised button-round">Round</button>
          <button class="button button-raised button-fill button-round">Fill</button>
          <button class="button button-outline button-round button-raised">Outline</button>
        </p>
      </div>

      <div class="block-title">Large Buttons</div>
      <div class="block block-strong block-outline-ios">
        <p class="grid grid-cols-2 grid-gap">
          <button class="button button-large">Button</button>
          <button class="button button-large button-fill">Fill</button>
        </p>
        <p class="grid grid-cols-2 grid-gap">
          <button class="button button-large button-raised">Raised</button>
          <button class="button button-large button-raised button-fill">Raised Fill</button>
        </p>
        <p class="grid grid-cols-2 grid-gap">
          <button class="button button-large button-round">Round</button>
          <button class="button button-large button-round button-fill">Round Fill</button>
        </p>
      </div>

      <div class="block-title">Small Buttons</div>
      <div class="block block-strong block-outline-ios">
        <p class="grid grid-cols-3 grid-gap">
          <button class="button button-small">Button</button>
          <button class="button button-small button-outline">Outline</button>
          <button class="button button-small button-fill">Fill</button>
        </p>
        <p class="grid grid-cols-3 grid-gap">
          <button class="button button-small button-round">Button</button>
          <button class="button button-small button-round button-outline">Outline</button>
          <button class="button button-small button-round button-fill">Fill</button>
        </p>
      </div>
      <div class="block-title">Color Buttons</div>
      <div class="block block-strong block-outline-ios">
        <p class="grid grid-cols-3 grid-gap">
          <button class="button color-red">Red</button>
          <button class="button color-green">Green</button>
          <button class="button color-blue">Blue</button>
        </p>
      </div>

      <div class="block-title">Preloader Buttons</div>
      <div class="block block-strong block-outline-ios">
        <p class="grid grid-cols-2 grid-gap">
          <span>
            <button class="button button-large button-preloader ${isLoading1 ? 'button-loading' : ''}" @click=${load1}>
              <span class="preloader"></span>
              <span>Load</span>
            </button>
          </span>
          <span>
            <button class="button button-large button-fill button-preloader ${isLoading2 ? 'button-loading' : ''}"
              @click=${load2}>
              <span class="preloader"></span>
              <span>Load</span>
            </button>
          </span>
        </p>
      </div>

      <div class="block-title">Color Fill Buttons</div>
      <div class="block block-strong block-outline-ios">
        <p class="grid grid-cols-3 grid-gap">
          <button class="button button-fill color-red">Red</button>
          <button class="button button-fill color-green">Green</button>
          <button class="button button-fill color-blue">Blue</button>
        </p>
        <p class="grid grid-cols-3 grid-gap">
          <button class="button button-fill color-pink">Pink</button>
          <button class="button button-fill color-yellow">Yellow</button>
          <button class="button button-fill color-orange">Orange</button>
        </p>
        <p class="grid grid-cols-3 grid-gap">
          <button class="button button-fill color-black">Black</button>
          <button class="button button-fill color-white">White</button>
        </p>
      </div>
    </div>
  </div>
</template>
<script>
  export default (props, { $update }) => {
    let isLoading1 = false;
    let isLoading2 = false;

    const load1 = () => {
      if (isLoading1) return;
      isLoading1 = true;
      $update();
      setTimeout(() => {
        isLoading1 = false;
        $update();
      }, 4000);
    };
    const load2 = () => {
      if (isLoading2) return;
      isLoading2 = true;
      $update();
      setTimeout(() => {
        isLoading2 = false;
        $update();
      }, 4000);
    };

    return $render;
  }
</script>
改善此文件
在此頁面上