Skip to main content

Сегментований елемент керування

Навігація

Сегментований елемент керування

Сегментований елемент керування — це лінійний набір із двох або більше сегментів (кнопок), кожен із яких функціонує як взаємовиключна кнопка. Усередині елемента керування всі кнопки мають однакову ширину. Сегментовані елементи керування часто використовуються для відображення різних переглядів (перемикання вкладок).

Макет сегментованого елемента керування

Макет сегментованого елемента керування досить простий, лише <div>з класом segmented навколо кнопок:
<div class="segmented">
  <a class="button button-active">Вкладка 1</a>
  <a class="button">Вкладка 2</a>
</div>
Сегментовані елементи керування "strong" вимагає додаткового елемента для правильного відображення активного стану: 
<div class="segmented segmented-strong">
  <a class="button button-active">Tab 1</a>
  <a class="button">Tab 2</a>
  <!-- додатковий елемент необхідний для відображення strong -->
  <span class="segmented-highlight"></span>
</div>

Класи модифікаторів сегментованих елементів керування

Так само як і кнопки, сегментовані елементи керування підтримують кілька додаткових класів стилізації:

Змінні CSS

Нижче наведено список пов’язаних змінних CSS (спеціальні властивості CSS).
Зауважте, що коментовані змінні не вказано за замовчуванням, і в цьому випадку вони повертаються до їхніх значень. 
:root {
  --t4-button-font-size: 14px;
  --t4-button-min-width: 32px;
  --t4-button-bg-color: transparent;
  --t4-button-border-width: 0px;
  /*
  --t4-button-text-color: var(--t4-theme-color);
  --t4-button-pressed-text-color: var(--t4-button-text-color, var(--t4-theme-color));
  --t4-button-border-color: var(--t4-theme-color);
  --t4-button-fill-bg-color: var(--t4-theme-color);
  --t4-button-padding-vertical: 0px;
  */
  --t4-button-raised-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  --t4-button-raised-pressed-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16),
    0 3px 6px rgba(0, 0, 0, 0.23);
  --t4-segmented-raised-divider-color: rgba(0, 0, 0, 0.1);
  --t4-segmented-strong-padding: 2px;
  --t4-segmented-strong-between-buttons: 4px;
  --t4-segmented-strong-button-font-weight: 500;
  --t4-segmented-strong-button-active-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.25);
  --t4-segmented-strong-button-text-color: #000;
  --t4-segmented-strong-button-hover-bg-color: rgba(0, 0, 0, 0.04);
  --t4-segmented-strong-button-active-text-color: #000;
  --t4-segmented-strong-button-active-bg-color: #fff;
}
:root .dark,
:root.dark {
  --t4-segmented-strong-button-hover-bg-color: rgba(255, 255, 255, 0.02);
  --t4-segmented-strong-button-active-bg-color: rgba(255, 255, 255, 0.14);
  --t4-segmented-strong-button-text-color: #fff;
  --t4-segmented-strong-button-active-text-color: #fff;
}
.ios {
  --t4-button-fill-text-color: #fff;
  --t4-button-text-transform: uppercase;
  --t4-button-height: 28px;
  --t4-button-padding-horizontal: 10px;
  --t4-button-border-radius: 4px;
  --t4-button-font-weight: 600;
  --t4-button-letter-spacing: 0;
  /*
  --t4-button-outline-border-color: var(--t4-theme-color);
  */
  --t4-button-outline-border-width: 2px;
  /*
  --t4-button-pressed-bg-color: rgba(var(--t4-theme-color-rgb), .15);
  --t4-button-fill-pressed-bg-color: var(--t4-theme-color-tint);
  */
  --t4-button-large-text-transform: uppercase;
  --t4-button-large-height: 44px;
  --t4-button-large-font-size: 17px;
  --t4-button-large-font-weight: 500;
  --t4-button-small-outline-border-width: 2px;
  --t4-button-small-text-transform: uppercase;
  --t4-button-small-height: 26px;
  --t4-button-small-font-size: 13px;
  --t4-button-small-font-weight: 600;
  --t4-segmented-strong-button-text-transform: none;
  --t4-segmented-strong-button-active-font-weight: 600;
  --t4-button-tonal-bg-color: rgba(var(--t4-theme-color-rgb), 0.15);
  --t4-button-tonal-pressed-bg-color: rgba(var(--t4-theme-color-rgb), 0.25);
  --t4-button-tonal-text-color: var(--t4-theme-color);
  --t4-segmented-strong-bg-color: rgba(0, 0, 0, 0.07);
  --t4-segmented-strong-button-pressed-bg-color: rgba(0, 0, 0, 0.07);
}
.ios .dark,
.ios.dark {
  --t4-segmented-strong-bg-color: rgba(255, 255, 255, 0.1);
  --t4-segmented-strong-button-pressed-bg-color: rgba(255, 255, 255, 0.04);
}
.md {
  /*
  --t4-button-pressed-bg-color: transparent;
  */
  --t4-button-text-transform: none;
  --t4-button-height: 40px;
  --t4-button-padding-horizontal: 16px;
  --t4-button-border-radius: 8px;
  --t4-button-font-weight: 500;
  --t4-button-letter-spacing: normal;
  --t4-button-outline-border-width: 1px;
  --t4-button-large-text-transform: none;
  --t4-button-large-height: 48px;
  --t4-button-large-font-size: 14px;
  --t4-button-large-font-weight: 500;
  --t4-button-small-text-transform: none;
  --t4-button-small-outline-border-width: 1px;
  --t4-button-small-height: 32px;
  --t4-button-small-font-size: 14px;
  --t4-button-small-font-weight: 500;
  --t4-segmented-strong-button-text-transform: none;
  --t4-segmented-strong-button-active-font-weight: 500;
  --t4-segmented-strong-button-pressed-bg-color: transparent;
}
.md,
.md .dark,
.md [class*='color-'] {
  --t4-button-fill-pressed-bg-color: transparent;
  --t4-button-fill-text-color: var(--t4-md-on-primary);
  --t4-button-outline-border-color: var(--t4-md-outline);
  --t4-segmented-strong-bg-color: var(--t4-md-surface-variant);
  --t4-button-tonal-bg-color: var(--t4-md-secondary-container);
  --t4-button-tonal-pressed-bg-color: transparent;
  --t4-button-tonal-text-color: var(--t4-md-on-secondary-container);
}

Приклади 

<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>