탐색
컴포넌트

버튼과 입력

모든 컨트롤에 같은 재질과 상태 순서를 적용합니다.

Buttons

Default, primary and quiet; hover lifts, pressing sinks

hover
pressed
focus
data-size="sm"
The static hover and pressed specimens use data-state; real buttons use native :hover, :active and :focus-visible.

Choices and fields

Selected segments rise inside a sunken track; fields float back to the sheet on focus

트레이 머리글의 상호 배타적 선택

트레이 머리글의 세그먼트 컨트롤이 견본의 실제 유틸리티를 바꿉니다.

Cross-axis alignment

01
02
03
  • Subject
  • Taller comparison
  • Context
Selection changes the actual alignment utility on the flex parent. Scroll the preview horizontally when space is limited.

관련 문서 보기

방향 키는 보기를 옮기고 Home과 End는 처음·마지막으로, Tab은 선택한 패널로 이동합니다.

Overview

A short explanation stays beside the example.

뷰포트 조건

프리셋은 실제 iframe 안에서 sm 중단점을 넘으며 버튼 패딩은 해당 뷰포트를 따릅니다.

Responsive button padding

사용 위치: 구문 튜토리얼.

사용법과 인터페이스

컨트롤은 각각 하나의 루트 class를 가진 네이티브 요소입니다. 변형과 크기는 데이터 속성으로, 상태는 네이티브 의사 클래스와 ARIA로 나타냅니다.

<button type="button" class="ui-button">Save</button><button type="button" class="ui-button" data-variant="primary">Publish</button><button type="button" class="ui-button" data-variant="quiet" data-size="sm">Replay</button><button type="button" class="ui-button" data-shape="icon" aria-label="Add">…</button><div class="ui-segmented" role="group" aria-label="View">  <button type="button" aria-pressed="true">Preview</button>  <button type="button" aria-pressed="false">Code</button></div><label class="ui-field">Name<input class="ui-input"><span class="ui-field-hint">…</span></label><select class="ui-select">…</select><input class="ui-range" type="range" style="--value: 40%"><label class="ui-check"><input type="checkbox">Show captions</label><label class="ui-check"><input type="checkbox" role="switch" class="ui-switch">Sync</label>

DemoControls는 레이블이 있는 그룹을 감쌉니다. variant="segmented"는 aria-pressed 버튼으로 상호 배타적 선택을 제공하는 ui-segmented를 렌더링하며, 일반 기본형은 혼합 컨트롤을 한 줄에 배치합니다. Demo controls로 트레이 머리글에 두고 시연하는 레이아웃 안에는 두지 마세요.

<Demo title="Cross-axis alignment" controls={  <DemoControls label="Cross-axis alignment" variant="segmented">    <button type="button" aria-pressed={alignment === 'items-flex-start'}>Start</button>    <button type="button" aria-pressed={alignment === 'items-center'}>Center</button>  </DemoControls>}>…</Demo>

#관련 문서 보기

각 선택이 관련 패널을 표시한다면 문서 셸의 Segments를 사용하세요. 모든 패널은 HTML에 남으며 JavaScript가 없거나 인쇄할 때는 모든 보기가 레이블과 함께 표시됩니다.

<Segments label="Document view example">{[  { name: 'Overview', content: <p>A short explanation stays beside the example.</p> },  { name: 'Details', content: <p>Supporting details remain available.</p> }]}</Segments>

ui-range의 채우기는 --value를 따릅니다. 입력값을 범위에 대한 백분율로 변환해 설정하세요.