🔥 Meet Our New Project: t0ggles - Your Ultimate Project Management Tool!

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-roundRounded segmented
segmented-round-iosRounded segmented in iOS theme
segmented-round-mdRounded segmented in MD theme
segmented-raisedRaised segmented
segmented-raised-iosRaised segmented in iOS theme
segmented-raised-mdRaised segmented in MD theme
segmented-strongStrong segmented
segmented-strong-iosStrong segmented in iOS theme
segmented-strong-mdStrong 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="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>