Skip to main content

Segmented

MSK Segmented Control은 적은 수의 옵션 중 하나를 선택하는 primitive입니다. 보기 모드, 정렬 방식, 간단한 필터 전환에 사용합니다.

Preview​

선택: 본문+노트

Data API​

<div data-msk-segmented data-value="body">
  <button type="button" data-msk-segment-value="body">본문</button>
  <button type="button" data-msk-segment-value="notes">노트</button>
</div>

JavaScript API​

window.MSK.ui.segmented.setValue(segmented, 'notes');

Events​

segmented.addEventListener('msk:segmented-change', (event) => {
  console.log(event.detail.value);
});

Segmented는 aria-pressed, roving tabindex, Arrow/Home/End 키를 지원합니다.