CSS: segmented-control ​

.instui-segmented-control — 単一選択のコンパクト表示またはフィルター用オプションの行。

選択されたセグメントは異なるアクティブアイテムのシャドウを使用します; 既存の --instui-elevation-* 複合とは一致しません。オーバーフローボタンはアップストリームの elevation3 コンポーネントトークンを使用します。

TIP

JS 拡張 — このコンポーネントの CSS は単独でレンダリングおよび動作します。対話的な振る舞いを追加するには @pantoken/interactions と組み合わせてください。詳細は下の修飾子表を参照してください。

アクセシビリティ ​

ラベル付きのfieldsetと、チェック済みのデフォルトを持つ共通のラジオ名を1つ使用してください。ネイティブラジオは チェック状態をアナウンスします; オーバーフローボタンにはスクロール方向を説明するラベルが必要です。

使用法 ​

css
@import "@pantoken/plugin-custom-components/custom-components.css";

例 ​

html
<fieldset class="instui-segmented-control" aria-label="Course view">
  <div class="viewport">
    <button class="overflow-start" aria-label="Scroll to previous views" hidden></button>
    <div class="track">
      <label class="-icon-settings"><input type="radio" name="view" checked>設定</label>
      <label class="-icon-sliders-vertical"><input type="radio" name="view">オプション</label>
      <label class="-icon-wrench"><input type="radio" name="view">設定</label>
      <label class="-icon-sliders-horizontal"><input type="radio" name="view">ユーティリティ</label>
      <label class="-icon-monitor-cog"><input type="radio" name="view">環境設定</label>
      <label class="-icon-settings-2"><input type="radio" name="view">機能フラグ</label>
    </div>
    <button class="overflow-end" aria-label="Scroll to next views" hidden></button>
  </div>
</fieldset>

構造 ​

text
fieldset.instui-segmented-control
  .viewport
    button.overflow-start (0..1)
    .track
      segmented-control.segment (component, 1..n)
    button.overflow-end (0..1)
flowchart TD n0["fieldset.instui-segmented-control"]:::cssdoc-root n1(".viewport"):::cssdoc-part n2("button.overflow-start"):::cssdoc-part n3(".track"):::cssdoc-part n4(["segmented-control.segment"]):::cssdoc-component n5("button.overflow-end"):::cssdoc-part n1 -.->|0..1| n2 n3 -->|1..n| n4 n1 --> n3 n1 -.->|0..1| n5 n0 --> n1 click n4 "/api/css/segmented-control.segment.md" classDef cssdoc-root stroke-width:1px; classDef cssdoc-part stroke-width:1px; classDef cssdoc-slot stroke-width:1px; classDef cssdoc-component stroke-width:1px;

修飾子 ​

修飾子説明
.-size-lg大きなセグメント。
.-size-mdMedium segments (default).
.-size-sm小さなセグメント。

パーツ ​

パート説明
.overflow-end次の非表示セグメントまでスクロールします。
.overflow-start前の非表示セグメントまでスクロールします。
.track選択可能なセグメントを含むスクロール可能な行。
.viewportセグメント行をクリップし、オーバーフローコントロールをアンカーします。

疑似要素 ​

疑似要素説明
::before—

状態 ​

状態説明
:disabled—

使用トークン ​

Token型値
--instui-border-width-sm<length>0.0625rem
--instui-color-background-interactive-action-primary-base<color>LightDarklight-dark(#1D354F, #EEF4FD)
--instui-color-drop-shadow-shadow-color1<color>LightDarklight-dark(rgba(35,68,101,0.15), rgba(0,0,0,0.3))
--instui-color-drop-shadow-shadow-color2<color>LightDarklight-dark(rgba(35,68,101,0.1), rgba(0,0,0,0.15))
--instui-color-stroke-interactive-action-primary-base<color>LightDarklight-dark(#1D354F, #EEF4FD)
--instui-color-text-interactive-action-primary-base<color>LightDarklight-dark(#ffffff, #1D354F)
--instui-component-base-button-border-radius<length>0.75rem
--instui-component-base-button-medium-height<length>2.5rem
--instui-component-segmented-control-font-family[ <font-family-name> | <generic-font-family> ]#Atkinson Hyperlegible Next, "Helvetica Neue", Helvetica, Arial, sans-serif
--instui-component-segmented-control-font-size-lg<length>1.125rem
--instui-component-segmented-control-font-size-md<length>1rem
--instui-component-segmented-control-font-size-sm<length>0.875rem
--instui-component-segmented-control-font-weight<integer>500
--instui-component-segmented-control-height-lg<length>3rem
--instui-component-segmented-control-height-md<length>2.5rem
--instui-component-segmented-control-height-sm<length>2rem
--instui-component-segmented-control-item-gap-lg<length>0.75rem
--instui-component-segmented-control-item-gap-md<length>0.5rem
--instui-component-segmented-control-item-gap-sm<length>0.25rem
--instui-component-segmented-control-item-padding-horizontal-lg<length>1.25rem
--instui-component-segmented-control-item-padding-horizontal-md<length>1rem
--instui-component-segmented-control-item-padding-horizontal-sm<length>0.75rem
--instui-component-segmented-control-line-height<percentage>125%
--instui-component-segmented-control-track-background-color<color>LightDarklight-dark(#44709f33, #86a8d54d)
--instui-component-segmented-control-track-background-disabled-color<color>LightDarklight-dark(#DFE1E3, #334450)
--instui-component-segmented-control-track-border-radius<length>1rem
--instui-component-segmented-control-track-gap<length>0.125rem
--instui-component-segmented-control-track-padding<length>0.25rem
--instui-drop-shadow-blur-elevation3-dropshadow1<length>10px
--instui-drop-shadow-blur-elevation3-dropshadow2<length>3px
--instui-drop-shadow-spread-elevation3-dropshadow1<length>4px
--instui-drop-shadow-spread-elevation3-dropshadow2<length>0px
--instui-drop-shadow-y-elevation3-dropshadow1<length>6px
--instui-drop-shadow-y-elevation3-dropshadow2<length>2px
--instui-icon-chevron-left<image>url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m15%2018-6-6%206-6%22%2F%3E%3C%2Fsvg%3E')
--instui-icon-chevron-right<image>url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m9%2018%206-6-6-6%22%2F%3E%3C%2Fsvg%3E')
--pantoken-segmented-end-reserve——
--pantoken-segmented-font-size<length>1rem
--pantoken-segmented-overflow-shadow<color>0 2px 3px 0px light-dark(rgba(35,68,101,0.15), rgba(0,0,0,0.3)), 0 6px 10px 4px light-dark(rgba(35,68,101,0.1), rgba(0,0,0,0.15))
--pantoken-segmented-start-reserve——

サブコンポーネント ​