Segmented
Segmented Control
A segmented control is a linear set of two or more segments (buttons), each of which functions as a mutually exclusive button. Within the control, all buttons are equal in width. Segmented controls are often used to display different views (switch tabs).
Segmented Layout
Segmented control layout is pretty simple, just a <div>
with a segmented
class around buttons:
<div class="segmented">
<a class="button button-active">Tab 1</a>
<a class="button">Tab 2</a>
</div>
Segmented "strong" requires additional element to correctly indicate active state:
<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 Modifier Classes
As well as buttons, segmented also supports few additional classes for styling:
segmented-round | Rounded segmented |
segmented-round-ios | Rounded segmented in iOS theme |
segmented-round-md | Rounded segmented in MD theme |
segmented-raised | Raised segmented |
segmented-raised-ios | Raised segmented in iOS theme |
segmented-raised-md | Raised segmented in MD theme |
segmented-strong | Strong segmented |
segmented-strong-ios | Strong segmented in iOS theme |
segmented-strong-md | Strong segmented in MD theme |
CSS Variables
Below is the list of related CSS variables (CSS custom properties).
Note that commented variables are not specified by default and their values is what they fallback to in this case.
: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);
}
Examples
segmented.html
<template>
<div class="page">
<div class="navbar">
<div class="navbar-bg"></div>
<div class="navbar-inner sliding">
<div class="left">
<a class="link back">
<i class="icon icon-back"></i>
<span class="if-not-md">返回</span>
</a>
</div>
<div class="title">分段tab</div>
</div>
</div>
<div class="page-content">
<div class="block block-strong block-outline-ios">
<p class="segmented">
<button class="button">卡项列表</button>
<button class="button">卡项统计</button>
<button class="button button-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 class="button">产品列表</button>
<button class="button button-active">产品添加</button>
</p>
<p class="segmented">
<button class="button button-outline">贵宾</button>
<button class="button button-outline">贵宾列表</button>
<button class="button button-outline button-active">贵宾添加</button>
</p>
<p class="segmented segmented-raised segmented-round">
<button class="button button-round">美容师</button>
<button class="button button-round">美容师列表</button>
<button class="button button-round button-active">美容师添加</button>
</p>
<p class="segmented segmented-round">
<button class="button button-round button-outline">配料师</button>
<button class="button button-round button-outline">配料表</button>
<button class="button button-round button-outline button-active">配料统计</button>
</p>
</div>
</div>
</div>
</template>
<script>
export default (props, { $update }) => {
let activeStrongButton = 0;
const setStrongButton = (index) => {
activeStrongButton = index;
$update();
}
return $render;
}
</script>