Fab플로팅 액션 버튼

플로팅 액션 버튼(FAB)은 페이지의 주요 작업을 강조하는 데 사용되며, 주요 작업을 쉽게 접근할 수 있는 위치에 배치합니다.

사용법

컴포넌트 가져오기:

import 'mdui/components/fab.js';

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

import type { Fab } from 'mdui/components/fab.js';

사용 예시:

<mdui-fab icon="edit"></mdui-fab>

예시

아이콘

icon 속성을 사용해 Material Icons 아이콘 이름을 지정합니다. icon 슬롯을 통해 아이콘 요소를 지정할 수도 있습니다.

<mdui-fab icon="edit"></mdui-fab>
<mdui-fab>
  <mdui-icon slot="icon" name="edit"></mdui-icon>
</mdui-fab>

소스

확장 상태

extended 속성을 추가하면 FAB를 확장 상태로 설정할 수 있으며, 이때 default 슬롯의 텍스트가 표시됩니다.

Compose

<mdui-fab extended icon="edit">Compose</mdui-fab>

소스

형태

variant 속성을 사용해 FAB의 형태를 설정할 수 있습니다.

<mdui-fab variant="primary" icon="edit"></mdui-fab>
<mdui-fab variant="surface" icon="edit"></mdui-fab>
<mdui-fab variant="secondary" icon="edit"></mdui-fab>
<mdui-fab variant="tertiary" icon="edit"></mdui-fab>

소스

크기

size 속성을 사용해 FAB의 크기를 설정할 수 있습니다.

<mdui-fab size="small" icon="edit"></mdui-fab>
<mdui-fab size="normal" icon="edit"></mdui-fab>
<mdui-fab size="large" icon="edit"></mdui-fab>

소스

링크

href 속성을 추가하면 FAB에 링크 기능이 생기며, 이때 링크 관련 속성(download, target, rel)도 함께 사용합니다.

<mdui-fab icon="edit" href="https://www.mdui.org" target="_blank"></mdui-fab>

소스

비활성화 및 로딩 중 상태

disabled 속성을 추가하면 FAB를 비활성화할 수 있습니다. loading 속성을 추가하면 FAB에 로딩 중 상태를 추가할 수 있습니다.

<mdui-fab disabled icon="edit"></mdui-fab>
<mdui-fab loading icon="edit"></mdui-fab>
<mdui-fab loading disabled icon="edit"></mdui-fab>

소스

API

속성

HTML 속성	JavaScript 프로퍼티	유형	기본값
`variant`	`variant`	`'primary' \| 'surface' \| 'secondary' \| 'tertiary'`	`'primary'`
FAB의 모양입니다. 이 컴포넌트의 다른 모양 간에는 색상만 다릅니다. 사용 가능한 값: `primary`: Primary container 배경색 사용 `surface`: Surface container high 배경색 사용 `secondary`: Secondary container 배경색 사용 `tertiary`: Tertiary container 배경색 사용
`size`	`size`	`'normal' \| 'small' \| 'large'`	`'normal'`
FAB의 크기입니다. 사용 가능한 값: `normal`: 일반 크기 FAB `small`: 작은 크기 FAB `large`: 큰 크기 FAB
`icon`	`icon`	`string`	-
Material Icons 아이콘 이름입니다. `slot="icon"`을 통해서도 설정할 수 있습니다.
`extended`	`extended`	`boolean`	`false`
확장할지 여부를 설정합니다.
`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`
아이콘

CSS Parts

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

CSS 사용자 정의 속성

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

이전 장

Dropdown 드롭다운

다음 장

Icon 아이콘