Motile UI

SpeedDial

빠른 액션을 위한 플로팅 버튼 컴포넌트입니다. 메인 버튼을 클릭하면 여러 액션 버튼이 위, 아래, 좌, 우 방향으로 펼쳐집니다.

미리보기

사용법

1import { useState } from "react";
2import { SpeedDial } from "motile-ui";
3
4function App() {
5  const [open, setOpen] = useState(false);
6
7  return (
8    <SpeedDial.Root open={open} onOpenChange={setOpen} direction="up">
9      <SpeedDial.Trigger>+</SpeedDial.Trigger>
10      <SpeedDial.Actions>
11        <SpeedDial.Action onClick={() => alert("Action 1")}>
12          1
13        </SpeedDial.Action>
14        <SpeedDial.Action onClick={() => alert("Action 2")}>
15          2
16        </SpeedDial.Action>
17        <SpeedDial.Action onClick={() => alert("Action 3")}>
18          3
19        </SpeedDial.Action>
20      </SpeedDial.Actions>
21    </SpeedDial.Root>
22  );
23}

API 레퍼런스

SpeedDial.Root

속성타입기본값설명
openboolean-SpeedDial 열림/닫힘 상태
onOpenChange(open: boolean) => void-SpeedDial 상태 변경 핸들러
direction"up" | "down" | "left" | "right""up"Actions가 나타나는 방향
colorstring-Trigger 버튼 배경 색상
closeOnClickOutsidebooleantrue외부 클릭 시 자동으로 닫기
closeOnEscapeKeybooleantrueESC 키로 닫기

SpeedDial.Trigger

속성타입기본값설명
asChildbooleanfalse래퍼 없이 자식 요소만 렌더링

SpeedDial.Action

속성타입기본값설명
asChildbooleanfalse래퍼 없이 자식 요소만 렌더링

예제

방향: 위로

1"use client";
2
3import { useState } from "react";
4import { SpeedDial } from "motile-ui";
5
6export default function DirectionUpExample() {
7  const [open, setOpen] = useState(false);
8
9  return (
10    <div style={{ display: "flex", alignItems: "center", justifyContent: "center", minHeight: "300px" }}>
11      <SpeedDial.Root open={open} onOpenChange={setOpen} direction="up">
12        <SpeedDial.Trigger>↑</SpeedDial.Trigger>
13        <SpeedDial.Actions>
14          {[1, 2, 3].map((num) => (
15            <SpeedDial.Action key={num} onClick={() => alert(`Action ${num}`)}>
16              {num}
17            </SpeedDial.Action>
18          ))}
19        </SpeedDial.Actions>
20      </SpeedDial.Root>
21    </div>
22  );
23}

방향: 아래로

1"use client";
2
3import { useState } from "react";
4import { SpeedDial } from "motile-ui";
5
6export default function DirectionDownExample() {
7  const [open, setOpen] = useState(false);
8
9  return (
10    <div style={{ display: "flex", alignItems: "center", justifyContent: "center", minHeight: "300px" }}>
11      <SpeedDial.Root open={open} onOpenChange={setOpen} direction="down">
12        <SpeedDial.Trigger>↓</SpeedDial.Trigger>
13        <SpeedDial.Actions>
14          {[1, 2, 3].map((num) => (
15            <SpeedDial.Action key={num} onClick={() => alert(`Action ${num}`)}>
16              {num}
17            </SpeedDial.Action>
18          ))}
19        </SpeedDial.Actions>
20      </SpeedDial.Root>
21    </div>
22  );
23}

방향: 왼쪽으로

1"use client";
2
3import { useState } from "react";
4import { SpeedDial } from "motile-ui";
5
6export default function DirectionLeftExample() {
7  const [open, setOpen] = useState(false);
8
9  return (
10    <div style={{ display: "flex", alignItems: "center", justifyContent: "center", minHeight: "300px" }}>
11      <SpeedDial.Root open={open} onOpenChange={setOpen} direction="left">
12        <SpeedDial.Trigger>←</SpeedDial.Trigger>
13        <SpeedDial.Actions>
14          {[1, 2, 3].map((num) => (
15            <SpeedDial.Action key={num} onClick={() => alert(`Action ${num}`)}>
16              {num}
17            </SpeedDial.Action>
18          ))}
19        </SpeedDial.Actions>
20      </SpeedDial.Root>
21    </div>
22  );
23}

방향: 오른쪽으로

1"use client";
2
3import { useState } from "react";
4import { SpeedDial } from "motile-ui";
5
6export default function DirectionRightExample() {
7  const [open, setOpen] = useState(false);
8
9  return (
10    <div style={{ display: "flex", alignItems: "center", justifyContent: "center", minHeight: "300px" }}>
11      <SpeedDial.Root open={open} onOpenChange={setOpen} direction="right">
12        <SpeedDial.Trigger>→</SpeedDial.Trigger>
13        <SpeedDial.Actions>
14          {[1, 2, 3].map((num) => (
15            <SpeedDial.Action key={num} onClick={() => alert(`Action ${num}`)}>
16              {num}
17            </SpeedDial.Action>
18          ))}
19        </SpeedDial.Actions>
20      </SpeedDial.Root>
21    </div>
22  );
23}

아이콘 사용

1"use client";
2
3import { useState } from "react";
4import { SpeedDial } from "motile-ui";
5import ShareIcon from "@/app/_components/icons/ShareIcon";
6import CopyIcon from "@/app/_components/icons/CopyIcon";
7import TwitterIcon from "@/app/_components/icons/TwitterIcon";
8import FacebookIcon from "@/app/_components/icons/FacebookIcon";
9import LinkIcon from "@/app/_components/icons/LinkIcon";
10
11export default function WithIconsExample() {
12  const [open, setOpen] = useState(false);
13
14  return (
15    <div style={{ display: "flex", alignItems: "center", justifyContent: "center", minHeight: "300px" }}>
16      <SpeedDial.Root open={open} onOpenChange={setOpen} direction="up">
17        <SpeedDial.Trigger>
18          <ShareIcon />
19        </SpeedDial.Trigger>
20        <SpeedDial.Actions>
21          <SpeedDial.Action aria-label="Copy Link" onClick={() => alert("Copy Link")}>
22            <CopyIcon />
23          </SpeedDial.Action>
24          <SpeedDial.Action aria-label="Share on Twitter" onClick={() => alert("Share on Twitter")}>
25            <TwitterIcon />
26          </SpeedDial.Action>
27          <SpeedDial.Action aria-label="Share on Facebook" onClick={() => alert("Share on Facebook")}>
28            <FacebookIcon />
29          </SpeedDial.Action>
30          <SpeedDial.Action aria-label="Get Link" onClick={() => alert("Get Link")}>
31            <LinkIcon />
32          </SpeedDial.Action>
33        </SpeedDial.Actions>
34      </SpeedDial.Root>
35    </div>
36  );
37}
SpeedDial | Motile UI