컴포넌트
Floating Action Button
클릭 시 하위 액션 버튼들이 직선(위/아래/좌/우) 또는 부채꼴(arc)로 펼쳐지는 플로팅 액션 버튼. 트리거 아이콘은 45도 회전(+ → ×)하고, 하위 버튼은 인덱스별 transition-delay로 스태거 등장한다. 방향키 순환 포커스·Esc·외부 클릭 닫기, reduced-motion 페이드 폴백을 지원한다.
- 분류
- 컴포넌트
- 난이도
- medium
- 변형
- TS-TW
설치
npx shadcn@latest add https://gasan.ai.kr/tools/effect/r/FloatingActionButton-TS-TW
Props
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| actions | FabAction[] | DEFAULT_ACTIONS (4 emoji) | 하위 액션 목록. 각 항목은 label·icon(ReactNode)·onSelect. 미지정 시 이모지 기본 세트. |
| direction | "up" | "down" | "left" | "right" | "arc" | "up" | 펼침 형태. 직선 스택 4방향 또는 부채꼴(arc). |
| size | number | 60 | 트리거 버튼 변 길이(px). |
| actionSize | number | 48 | 하위 액션 버튼 변 길이(px). |
| spacing | number | 66 | 액션 간 거리(px). arc는 반경, 직선은 중심 간 거리. |
| arcSpread | number | 90 | arc 모드 부채꼴 총 각도(deg). |
| arcStart | number | 90 | arc 모드 시작 각도(deg). |
| accentColor | string | "#C084FC" | 메인 강조 색(트리거 그라데이션·글로우). |
| secondaryColor | string | "#EC4899" | 보조 강조 색(트리거 그라데이션). |
| showLabels | boolean | true | 라벨 칩 표시 여부(직선 모드에서 유효). |
| triggerIcon | ReactNode | "+" | 닫힘 상태 트리거 아이콘. 열리면 45도 회전. |
| defaultOpen | boolean | false | 초기 열림 상태. |
| onOpenChange | (open: boolean) => void | undefined | 열림/닫힘 변경 콜백. |
| className | string | undefined | 루트 래퍼 추가 클래스. |
| style | CSSProperties | undefined | 루트 래퍼 인라인 스타일. |