分段

分段控制

分段控制是一个由两个或更多段（按钮）组成的线性集合，每个段都作为一个互斥按钮工作。在控制中，所有按钮宽度相等。分段控制通常用于显示不同的视图（切换标签）。

分段布局

分段控制布局相当简单，只是一个<div>包围按钮的segmented类：

<div class="segmented">
  <a class="button button-active">Tab 1</a>
  <a class="button">Tab 2</a>
</div>

分段“强”需要额外的元素来正确指示活动状态：

<div class="segmented segmented-strong">
  <a class="button button-active">Tab 1</a>
  <a class="button">Tab 2</a>
  <!-- addition element required in segmented strong -->
  <span class="segmented-highlight"></span>
</div>

分段修饰符类

除了按钮外，分段还支持一些额外的类用于样式化：

segmented-round圆角分段
segmented-round-iosiOS主题圆角分段
segmented-round-mdMD主题圆角分段
segmented-raised抬起分段
segmented-raised-iosiOS主题抬起分段
segmented-raised-mdMD主题抬起分段
segmented-strong强分段
segmented-strong-iosiOS主题强分段
segmented-strong-mdMD主题强分段

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);
}

示例

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

    <div class="page-content">
      <div class="block block-strong block-outline-ios">
        <p class="segmented">
          <button class="button">Button</button>
          <button class="button">Button</button>
          <button class="button button-active">Active</button>
        </p>
        <p class="segmented segmented-strong">
          <button class="button ${activeStrongButton===0 ? 'button-active' : '' }" @click=${()=>
            setStrongButton(0)}>Button</button>
          <button class="button ${activeStrongButton===1 ? 'button-active' : '' }" @click=${()=>
            setStrongButton(1)}>Button</button>
          <button class="button ${activeStrongButton===2 ? 'button-active' : '' }" @click=${()=>
            setStrongButton(2)}>Button</button>
          <span class="segmented-highlight"></span>
        </p>
        <p class="segmented segmented-raised">
          <button class="button">Button</button>
          <button class="button">Button</button>
          <button class="button button-active">Active</button>
        </p>
        <p class="segmented">
          <button class="button button-outline">Outline</button>
          <button class="button button-outline">Outline</button>
          <button class="button button-outline button-active">Active</button>
        </p>
        <p class="segmented segmented-raised segmented-round">
          <button class="button button-round">Button</button>
          <button class="button button-round">Button</button>
          <button class="button button-round button-active">Active</button>
        </p>
        <p class="segmented segmented-round">
          <button class="button button-round button-outline">Outline</button>
          <button class="button button-round button-outline">Outline</button>
          <button class="button button-round button-outline button-active">Active</button>
        </p>
      </div>
    </div>
  </div>
</template>
<script>
  export default (props, { $update }) => {
    let activeStrongButton = 0;
    const setStrongButton = (index) => {
      activeStrongButton = index;
      $update();
    }
    return $render;
  }
</script>
改进此文档
在本页上