Button Group

함께 사용하는 버튼을 붙여서 하나의 동작 묶음으로 보여줍니다.

<sy-button-group>설치 안내 기본 사용법

Live preview

컴포넌트를 조작하면 여기에 결과가 표시됩니다.

스타일크기

세로 배치

코드 보기

HTML

<sy-button-group variant="default" size="medium">
  <sy-button>이전</sy-button>
  <sy-button>현재</sy-button>
  <sy-button>다음</sy-button>
</sy-button-group>

사용 가이드

이전·다음이나 정렬 도구처럼 연관된 동작을 하나로 묶을 때 사용하세요. 단일 선택 값을 저장해야 한다면 Radio의 버튼형이 알맞습니다.

그룹 공통 설정: size와 variant는 자식 Button에 전달됩니다. vertical로 세로 방향을 선택할 수 있습니다.
개별 버튼 설정: disabled와 tooltip은 각 Button에 지정하세요.

예제

가로로 묶기

같은 작업 흐름의 동작을 한 줄로 배치합니다.

코드 보기

HTML

<sy-button-group variant="primary">
  <sy-button>이전</sy-button>
  <sy-button>다음</sy-button>
</sy-button-group>

세로로 묶기

좁고 긴 도구 영역에서는 vertical로 세로 묶음을 만듭니다.

코드 보기

HTML

<sy-button-group vertical>
  <sy-button>확대</sy-button>
  <sy-button>원래 크기</sy-button>
  <sy-button>축소</sy-button>
</sy-button-group>

크기

자식 버튼의 크기를 그룹 한 곳에서 관리합니다.

코드 보기

HTML

<div style="display:grid;gap:16px;width:100%">
  <sy-button-group size="small">
    <sy-button>small</sy-button>
    <sy-button>다음</sy-button>
  </sy-button-group>
  <sy-button-group size="medium">
    <sy-button>medium</sy-button>
    <sy-button>다음</sy-button>
  </sy-button-group>
  <sy-button-group size="large">
    <sy-button>large</sy-button>
    <sy-button>다음</sy-button>
  </sy-button-group>
</div>

개별 동작 제한

사용할 수 없는 동작에만 disabled를 지정할 수 있습니다.

코드 보기

HTML

<sy-button-group>
  <sy-button>실행 취소</sy-button>
  <sy-button disabled>다시 실행</sy-button>
</sy-button-group>

기능별 예제

4개 주제에서 필요한 기능을 선택하세요. 속성 설정, 메서드 호출, 이벤트 결과와 슬롯 구성을 실행 화면과 코드로 확인할 수 있습니다.

기능 찾기

사용 예제 · Overview

선택한 예제를 직접 조작해 보세요. 여러 구성이 있는 주제는 세부 예제를 바꿀 수 있습니다.

코드 보기

HTML

예제를 불러오고 있습니다.

속성 · Size

설정에 따라 표시와 동작이 어떻게 달라지는지 확인하세요.

코드 보기

HTML

예제를 불러오고 있습니다.

속성 · Variant

설정에 따라 표시와 동작이 어떻게 달라지는지 확인하세요.

코드 보기

HTML

예제를 불러오고 있습니다.

속성 · Vertical

설정에 따라 표시와 동작이 어떻게 달라지는지 확인하세요.

코드 보기

HTML

예제를 불러오고 있습니다.

API reference

이름에 마우스를 올리거나 키보드로 선택하면 적용 코드를 확인할 수 있습니다. 터치 화면에서는 이름을 누르세요.

`<sy-button-group>`

Properties

Type	Default	Description
`boolean`	`false`	세로 방향으로 배치합니다.
`'default' \| 'primary' \| 'secondary' \| 'borderless'`	`'default'`	컴포넌트의 표시 스타일입니다.
`'small' \| 'medium' \| 'large'`	`'medium'`	컴포넌트의 크기입니다.

Slots

Slot	Description
	컴포넌트의 본문 또는 자식 항목입니다.