スポンサースポンサーになる

ボタン

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-iosiOSテーマでのみ塗りつぶしスタイルになります。
button-fill-mdMDテーマでのみ塗りつぶしスタイルになります。
button-tonalトーンスタイルのボタン
button-tonal-iosiOSテーマでのみトーンスタイルになります。
button-tonal-mdMDテーマでのみトーンスタイルになります。
button-round丸みを帯びたボタン
button-round-iosiOSテーマでのみ丸みを帯びます。
button-round-mdMDテーマでのみ丸みを帯びます。
button-small小さいボタン
button-small-iosiOSテーマでのみ小さくなります。
button-small-mdMDテーマでのみ小さくなります。
button-large大きいボタン
button-large-iosiOSテーマでのみ大きくなります。
button-large-mdMDテーマでのみ大きくなります。
button-raised立体的なボタン
button-raised-iosiOSテーマでのみ立体的なボタンになります。
button-raised-mdMDテーマでのみ立体的なボタンになります。
button-outlineアウトラインボタン
button-outline-iosiOSテーマでのみアウトラインボタンになります。
button-outline-mdMDテーマでのみアウトラインボタンになります。
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>
このドキュメントを改善する
このページで