SegmentedButton세그먼트 버튼

세그먼트 버튼 컴포넌트는 버튼 그룹을 캡슐화하여 옵션 제공, 보기 전환, 요소 정렬 등에 사용됩니다.

사용법

컴포넌트 가져오기:

import 'mdui/components/segmented-button-group.js';
import 'mdui/components/segmented-button.js';

컴포넌트의 TypeScript 타입 가져오기:

import type { SegmentedButtonGroup } from 'mdui/components/segmented-button-group.js';
import type { SegmentedButton } from 'mdui/components/segmented-button.js';

사용 예시:

Day

Week

Month

<mdui-segmented-button-group>
  <mdui-segmented-button>Day</mdui-segmented-button>
  <mdui-segmented-button>Week</mdui-segmented-button>
  <mdui-segmented-button>Month</mdui-segmented-button>
</mdui-segmented-button-group>

예시

전체 너비 표시

<mdui-segmented-button-group> 요소에 full-width 속성을 추가하면 컴포넌트가 전체 너비를 차지합니다.

Day

Week

Month

<mdui-segmented-button-group full-width>
  <mdui-segmented-button>Day</mdui-segmented-button>
  <mdui-segmented-button>Week</mdui-segmented-button>
  <mdui-segmented-button>Month</mdui-segmented-button>
</mdui-segmented-button-group>

소스

단일 선택 모드

<mdui-segmented-button-group> 요소에 selects 속성을 single로 지정하면 단일 선택 모드를 구현할 수 있습니다. 이때 <mdui-segmented-button-group>의 value 속성값은 현재 선택된 <mdui-segmented-button>의 value 속성값입니다.

Day

Week

Month

Day

Week

Month

<mdui-segmented-button-group selects="single">
  <mdui-segmented-button value="day">Day</mdui-segmented-button>
  <mdui-segmented-button value="week">Week</mdui-segmented-button>
  <mdui-segmented-button value="month">Month</mdui-segmented-button>
</mdui-segmented-button-group>

<mdui-segmented-button-group selects="single" value="week">
  <mdui-segmented-button value="day">Day</mdui-segmented-button>
  <mdui-segmented-button value="week">Week</mdui-segmented-button>
  <mdui-segmented-button value="month">Month</mdui-segmented-button>
</mdui-segmented-button-group>

소스

다중 선택 모드

<mdui-segmented-button-group> 요소에 selects 속성을 multiple로 지정하면 다중 선택 모드를 구현할 수 있습니다. 이때 <mdui-segmented-button-group>의 value 속성값은 현재 선택된 <mdui-segmented-button>의 value 속성값으로 구성된 배열입니다.

참고: 다중 선택 모드에서는 <mdui-segmented-button-group>의 value 속성값이 배열이므로 JavaScript 속성으로서만 값을 읽고 설정할 수 있습니다.

Day

Week

Month

Day

Week

Month

<mdui-segmented-button-group selects="multiple">
  <mdui-segmented-button value="day">Day</mdui-segmented-button>
  <mdui-segmented-button value="week">Week</mdui-segmented-button>
  <mdui-segmented-button value="month">Month</mdui-segmented-button>
</mdui-segmented-button-group>

<mdui-segmented-button-group selects="multiple" class="demo-multiple">
  <mdui-segmented-button value="day">Day</mdui-segmented-button>
  <mdui-segmented-button value="week">Week</mdui-segmented-button>
  <mdui-segmented-button value="month">Month</mdui-segmented-button>
</mdui-segmented-button-group>

<script>
  // week와 month를 기본 선택으로 설정
  const group = document.querySelector(".demo-multiple");
  group.value = ["week", "month"];
</script>

소스

아이콘

<mdui-segmented-button> 요소에 icon 및 end-icon 속성을 설정하면 버튼의 왼쪽과 오른쪽에 각각 Material Icons 아이콘을 추가할 수 있습니다. 또한 icon 및 end-icon 슬롯을 통해 버튼의 왼쪽과 오른쪽에 요소를 추가할 수 있습니다.

Day

Week

Month

<mdui-segmented-button-group>
  <mdui-segmented-button icon="search">Day</mdui-segmented-button>
  <mdui-segmented-button end-icon="arrow_forward">Week</mdui-segmented-button>
  <mdui-segmented-button>
    Month
    <mdui-icon slot="icon" name="downloading"></mdui-icon>
    <mdui-icon slot="end-icon" name="attach_file"></mdui-icon>
  </mdui-segmented-button>
</mdui-segmented-button-group>

소스

<mdui-segmented-button> 요소에 selected-icon 속성을 추가하면 선택 상태의 Material Icons 아이콘을 설정할 수 있습니다. selected-icon 슬롯을 통해서도 설정할 수 있습니다.

Day

Week

<mdui-segmented-button-group selects="multiple">
  <mdui-segmented-button value="day" selected-icon="cloud_done">Day</mdui-segmented-button>
  <mdui-segmented-button value="week">
    <mdui-icon slot="selected-icon" name="cloud_done"></mdui-icon>
    Week
  </mdui-segmented-button>
</mdui-segmented-button-group>

소스

링크

<mdui-segmented-button> 요소에 href 속성을 설정하면 버튼을 링크로 변환할 수 있습니다. 이때 링크 관련 속성(download, target, rel)도 함께 사용합니다.

Link

Week

Month

<mdui-segmented-button-group>
  <mdui-segmented-button href="https://www.mdui.org" target="_blank">Link</mdui-segmented-button>
  <mdui-segmented-button>Week</mdui-segmented-button>
  <mdui-segmented-button>Month</mdui-segmented-button>
</mdui-segmented-button-group>

소스

비활성화 및 로딩 중 상태

<mdui-segmented-button-group> 요소에 disabled 속성을 추가하면 전체 세그먼트 버튼 그룹을 비활성화할 수 있습니다.

Day

Week

Month

<mdui-segmented-button-group disabled>
  <mdui-segmented-button>Day</mdui-segmented-button>
  <mdui-segmented-button>Week</mdui-segmented-button>
  <mdui-segmented-button>Month</mdui-segmented-button>
</mdui-segmented-button-group>

소스

<mdui-segmented-button> 요소에 disabled 속성을 추가하면 특정 버튼을 비활성화할 수 있고, loading 속성을 추가하면 특정 버튼에 로딩 중 상태를 추가할 수 있습니다.

Day

Week

Month

Year

<mdui-segmented-button-group>
  <mdui-segmented-button>Day</mdui-segmented-button>
  <mdui-segmented-button disabled>Week</mdui-segmented-button>
  <mdui-segmented-button loading>Month</mdui-segmented-button>
  <mdui-segmented-button disabled loading>Year</mdui-segmented-button>
</mdui-segmented-button-group>

소스

`mdui-segmented-button-group` API

속성

HTML 속성	JavaScript 프로퍼티	유형	기본값
`full-width`	`fullWidth`	`boolean`	`false`
부모 요소의 너비를 채울지 여부를 설정합니다.
`selects`	`selects`	`'single' \| 'multiple'`	-
세그먼트 버튼의 선택 가능 상태입니다. 기본값은 선택 불가입니다. 사용 가능한 값: `single`: 단일 선택 `multiple`: 다중 선택
`disabled`	`disabled`	`boolean`	`false`
비활성화할지 여부를 설정합니다.
`required`	`required`	`boolean`	`false`
폼 제출 시 반드시 선택해야 하는지 여부를 설정합니다.
`form`	`form`	`string`	-
연결된 `<form>` 요소입니다. 이 속성 값은 동일한 페이지에 있는 `<form>` 요소의 `id`여야 합니다. 이 속성을 지정하지 않으면 이 요소는 `<form>` 요소의 자식 요소여야 합니다. 이 속성을 사용하면 요소를 `<form>` 요소의 자식뿐만 아니라 페이지의 어느 곳에나 배치할 수 있습니다.
`name`	`name`	`string`	`''`
폼 제출 시 이름이며, 폼 데이터와 함께 제출됩니다.
`value`	`value`	`string \| string[]`	`''`
현재 선택된 `<mdui-segmented-button>`의 값입니다. 참고: 이 프로퍼티의 HTML 속성 값은 항상 문자열이며, `selects="single"`일 때만 HTML 속성을 통해 초기값을 설정할 수 있습니다. 이 프로퍼티의 JavaScript 프로퍼티 값은 `selects="single"`일 때는 문자열, `selects="multiple"`일 때는 문자열 배열입니다. 따라서 `selects="multiple"`일 때는 JavaScript 프로퍼티를 통해서만 이 값을 수정할 수 있습니다.
	`defaultValue`	`string \| string[]`	`''`
기본 선택 값입니다. 폼을 재설정할 때 이 기본값으로 재설정됩니다. 이 프로퍼티는 JavaScript 프로퍼티로만 설정할 수 있습니다.
	`validity`	`ValidityState`	-
폼 유효성 검사 상태 객체입니다. 자세한 내용은 `ValidityState`를 참조하십시오.
	`validationMessage`	`string`	-
폼 유효성 검사를 통과하지 못하면 오류 메시지가 포함되고, 통과하면 빈 문자열입니다.

메서드

이름	매개변수	반환값
`checkValidity`		`boolean`
폼 필드가 유효성 검사를 통과하는지 확인합니다. 통과하지 못하면 `false`를 반환하고 `invalid` 이벤트를 트리거합니다. 통과하면 `true`를 반환합니다.
`reportValidity`		`boolean`
폼 필드가 유효성 검사를 통과하는지 확인합니다. 통과하지 못하면 `false`를 반환하고 `invalid` 이벤트를 트리거합니다. 통과하면 `true`를 반환합니다. 유효성 검사를 통과하지 못하면 컴포넌트에 유효성 검사 실패 메시지가 표시됩니다.
`setCustomValidity`	`message: string`	`void`
사용자 정의 오류 메시지 텍스트를 설정합니다. 이 텍스트가 비어 있지 않으면 필드가 유효성 검사를 통과하지 못했음을 나타냅니다.

이벤트

이름
`change`
선택된 값이 변경될 때 발생합니다.
`invalid`
폼 필드 유효성 검사를 통과하지 못했을 때 발생합니다.

Slots

이름
기본
`<mdui-segmented-button>` 컴포넌트

CSS 사용자 정의 속성

이름
`--shape-corner`
컴포넌트의 둥근 모서리 크기입니다. 구체적인 픽셀 값을 지정할 수 있지만, 디자인 토큰을 참조하는 것을 권장합니다.

`mdui-segmented-button` API

속성

HTML 속성	JavaScript 프로퍼티	유형	기본값
`icon`	`icon`	`string`	-
왼쪽의 Material Icons 아이콘 이름입니다. `slot="icon"`을 통해서도 설정할 수 있습니다.
`end-icon`	`endIcon`	`string`	-
오른쪽의 Material Icons 아이콘 이름입니다. `slot="end-icon"`을 통해서도 설정할 수 있습니다.
`selected-icon`	`selectedIcon`	`string`	-
선택됨 상태의 Material Icons 아이콘 이름입니다. `slot="selected-icon"`을 통해서도 설정할 수 있습니다.
`href`	`href`	`string`	-
링크의 대상 URL입니다. 이 속성을 설정하면 컴포넌트 내부가 `<a>` 요소로 렌더링되며, 링크 관련 속성을 사용할 수 있습니다.
`download`	`download`	`string`	-
다운로드할 링크 대상을 지정합니다. 참고: `href` 속성이 지정된 경우에만 유효합니다.
`target`	`target`	`'_blank' \| '_parent' \| '_self' \| '_top'`	-
링크를 여는 방식을 지정합니다. 사용 가능한 값은 다음과 같습니다: `_blank`: 새 창에서 링크 열기 `_parent`: 부모 프레임에서 링크 열기 `_self`: 기본값. 현재 프레임에서 링크 열기 `_top`: 전체 창에서 링크 열기 참고: `href` 속성이 지정된 경우에만 유효합니다.
`rel`	`rel`	`'alternate' \| 'author' \| 'bookmark' \| 'external' \| 'help' \| 'license' \| 'me' \| 'next' \| 'nofollow' \| 'noreferrer' \| 'opener' \| 'prev' \| 'search' \| 'tag'`	-
현재 문서와 링크된 문서 간의 관계를 나타냅니다. 사용 가능한 값은 다음과 같습니다: `alternate`: 현재 문서의 대체 버전 `author`: 현재 문서 또는 글의 작성자 `bookmark`: 가장 가까운 상위 섹션으로의 영구 링크 `external`: 참조된 문서가 현재 문서와 동일한 사이트에 있지 않음 `help`: 관련 도움말 문서로 링크 `license`: 현재 문서의 주요 내용이 참조된 파일의 저작권 라이선스에 따라 사용됨 `me`: 현재 문서가 링크된 콘텐츠의 소유자를 나타냄 `next`: 현재 문서가 시리즈의 일부이며, 참조된 문서는 시리즈의 다음 문서임 `nofollow`: 현재 문서의 작성자 또는 게시자가 참조된 파일을 보증하지 않음 `noreferrer`: `Referer` 헤더가 포함되지 않음. `noopener`와 유사하게 동작합니다. `opener`: 하이퍼링크가 최상위 브라우징 컨텍스트를 생성할 때(즉, `target` 속성 값이 `_blank`인 경우) 보조 브라우징 컨텍스트를 생성함 `prev`: 현재 문서가 시리즈의 일부이며, 참조된 문서는 시리즈의 이전 문서임 `search`: 현재 파일 및 관련 페이지를 검색하는 데 사용할 수 있는 리소스 링크를 제공 `tag`: 현재 문서에 적용할 수 있는 태그(지정된 주소로 식별됨)를 제공 참고: `href` 속성이 지정된 경우에만 사용 가능합니다.
`autofocus`	`autofocus`	`boolean`	`false`
페이지 로드 후 자동으로 포커스를 받을지 여부를 지정합니다.
`tabindex`	`tabIndex`	`number`	-
Tab 키를 사용하여 포커스를 이동할 때 요소의 순서를 지정합니다.
`disabled`	`disabled`	`boolean`	`false`
비활성화할지 여부를 설정합니다.
`loading`	`loading`	`boolean`	`false`
로딩할지 여부를 설정합니다.
`name`	`name`	`string`	`''`
버튼의 이름이며, 폼 데이터와 함께 제출됩니다. 참고: `href` 속성이 지정되지 않은 경우에만 유효합니다.
`value`	`value`	`string`	`''`
버튼의 초기값이며, 폼 데이터와 함께 제출됩니다. 참고: `href` 속성이 지정되지 않은 경우에만 유효합니다.
`type`	`type`	`'submit' \| 'reset' \| 'button'`	`'button'`
버튼의 유형입니다. 기본 유형은 `button`입니다. 사용 가능한 유형은 다음과 같습니다: `submit`: 버튼을 클릭하면 폼 데이터를 서버로 제출합니다. `reset`: 버튼을 클릭하면 폼의 모든 필드를 초기값으로 재설정합니다. `button`: 이 유형의 버튼은 기본 동작이 없습니다. 참고: `href` 속성이 지정되지 않은 경우에만 유효합니다.
`form`	`form`	`string`	-
연결된 `<form>` 요소입니다. 이 속성 값은 동일한 페이지에 있는 `<form>` 요소의 `id`여야 합니다. 이 속성을 지정하지 않으면 이 요소는 `<form>` 요소의 자식 요소여야 합니다. 이 속성을 사용하면 요소를 `<form>` 요소의 자식뿐만 아니라 페이지의 어느 곳에나 배치할 수 있습니다. 참고: `href` 속성이 지정되지 않은 경우에만 유효합니다.
`formaction`	`formAction`	`string`	-
폼을 제출할 URL을 지정합니다. 이 속성이 지정되면 `<form>` 요소의 `action` 속성을 재정의합니다. 참고: `href` 속성이 지정되지 않고 `type="submit"`인 경우에만 유효합니다.
`formenctype`	`formEnctype`	`'application/x-www-form-urlencoded' \| 'multipart/form-data' \| 'text/plain'`	-
폼을 서버에 제출할 때의 콘텐츠 유형을 지정합니다. 사용 가능한 값은 다음과 같습니다: `application/x-www-form-urlencoded`: 이 속성을 지정하지 않았을 때의 기본값 `multipart/form-data`: 폼에 `<input type="file">` 요소가 포함된 경우 사용 `text/plain`: HTML5에서 새로 추가되었으며, 디버깅용입니다. 이 속성이 지정되면 `<form>` 요소의 `enctype` 속성을 재정의합니다. 참고: `href` 속성이 지정되지 않고 `type="submit"`인 경우에만 유효합니다.
`formmethod`	`formMethod`	`'post' \| 'get'`	-
폼 제출 시 사용할 HTTP 메서드를 지정합니다. 사용 가능한 값은 다음과 같습니다: `post`: 폼 데이터가 폼 콘텐츠에 포함되어 서버로 전송됩니다. `get`: 폼 데이터가 `?` 구분자와 함께 폼 URI에 추가되어 서버로 전송됩니다. 폼에 부작용이 없고 ASCII 문자만 포함된 경우 이 메서드를 사용합니다. 이 속성이 설정되면 `<form>` 요소의 `method` 속성을 재정의합니다. 참고: `href` 속성이 지정되지 않고 `type="submit"`인 경우에만 유효합니다.
`formnovalidate`	`formNoValidate`	`boolean`	`false`
이 속성을 설정하면 폼 제출 시 폼 유효성 검사를 수행하지 않습니다. 이 속성을 설정하면 `<form>` 요소의 `novalidate` 속성을 재정의합니다. 참고: `href` 속성이 지정되지 않고 `type="submit"`인 경우에만 유효합니다.
`formtarget`	`formTarget`	`'_self' \| '_blank' \| '_parent' \| '_top'`	-
폼 제출 후 수신된 응답이 표시될 위치를 지정합니다. 사용 가능한 값은 다음과 같습니다: `_self`: 기본값, 현재 프레임에서 열기 `_blank`: 새 창에서 열기 `_parent`: 부모 프레임에서 열기 `_top`: 전체 창에서 열기 이 속성을 설정하면 `<form>` 요소의 `target` 속성을 재정의합니다. 참고: `href` 속성이 지정되지 않고 `type="submit"`인 경우에만 유효합니다.
	`validity`	`ValidityState`	-
폼 유효성 검사 상태 객체입니다. 자세한 내용은 `ValidityState`를 참조하십시오.
	`validationMessage`	`string`	-
폼 유효성 검사를 통과하지 못하면 오류 메시지가 포함되고, 통과하면 빈 문자열입니다.

메서드

이름	매개변수	반환값
`click`		`void`
마우스 클릭을 시뮬레이션합니다.
`focus`	`options: FocusOptions` (선택사항)	`void`
현재 요소에 포커스를 설정합니다. 객체를 인자로 전달할 수 있으며, 객체의 속성은 다음과 같습니다: `preventScroll`: 기본적으로 요소가 포커스를 받으면 페이지가 스크롤되어 해당 요소가 화면에 표시됩니다. 페이지 스크롤을 방지하려면 이 속성을 `true`로 설정하십시오.
`blur`		`void`
현재 요소에서 포커스를 제거합니다.
`checkValidity`		`boolean`
폼 필드가 유효성 검사를 통과하는지 확인합니다. 통과하지 못하면 `false`를 반환하고 `invalid` 이벤트를 트리거합니다. 통과하면 `true`를 반환합니다.
`reportValidity`		`boolean`
폼 필드가 유효성 검사를 통과하는지 확인합니다. 통과하지 못하면 `false`를 반환하고 `invalid` 이벤트를 트리거합니다. 통과하면 `true`를 반환합니다. 유효성 검사를 통과하지 못하면 컴포넌트에 유효성 검사 실패 메시지가 표시됩니다.
`setCustomValidity`	`message: string`	`void`
사용자 정의 오류 메시지 텍스트를 설정합니다. 이 텍스트가 비어 있지 않으면 필드가 유효성 검사를 통과하지 못했음을 나타냅니다.

이벤트

이름
`focus`
포커스를 얻었을 때 발생합니다.
`blur`
포커스를 잃었을 때 발생합니다.
`invalid`
폼 필드 유효성 검사를 통과하지 못했을 때 발생합니다.

Slots

이름
기본
세그먼트 버튼 항목의 텍스트 콘텐츠
`icon`
세그먼트 버튼 항목의 왼쪽 아이콘
`selected-icon`
선택됨 상태의 왼쪽 아이콘
`end-icon`
세그먼트 버튼 항목의 오른쪽 아이콘

CSS Parts

이름
`button`
내부의 `<button>` 또는 `<a>` 요소
`icon`
왼쪽 아이콘
`selected-icon`
선택됨 상태의 왼쪽 아이콘
`end-icon`
오른쪽 아이콘
`label`
텍스트 콘텐츠
`loading`
로딩 중 상태의 `<mdui-circular-progress>` 요소

이전 장

Select 셀렉트

다음 장

Slider 슬라이더