赞助商成为赞助商

按钮

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-[颜色]彩色按钮，其中 [颜色] 是默认颜色之一。

当然，我们可以混合使用这些类。

<!-- 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>
改进此文档
本页内容