Motile UI

Dock

호버 시 확대되는 인터랙티브 독 컴포넌트입니다. bottom, top, left, right 4가지 위치를 지원하며, Separator로 아이템 그룹을 구분할 수 있습니다. color 속성으로 glow effect 색상을 자유롭게 지정할 수 있습니다.

미리보기

사용법

1"use client";
2
3import { Dock } from "motile-ui";
4
5import { DemoContent } from "@/app/_components/containers/DemoContent";
6import { HomeIcon } from "@/app/_components/icons/HomeIcon";
7import { SearchIcon } from "@/app/_components/icons/SearchIcon";
8import { SettingsIcon } from "@/app/_components/icons/SettingsIcon";
9import { StarIcon } from "@/app/_components/icons/StarIcon";
10
11export default function PreviewExample() {
12  return (
13    <>
14      <DemoContent />
15
16      <div
17        style={{
18          position: "absolute",
19          bottom: "20px",
20          left: "50%",
21          transform: "translateX(-50%)",
22        }}
23      >
24        <Dock.Root position="bottom">
25          <Dock.Item icon={<HomeIcon />} label="홈" />
26          <Dock.Item icon={<SearchIcon />} label="검색" />
27          <Dock.Item icon={<StarIcon />} label="즐겨찾기" />
28          <Dock.Item icon={<SettingsIcon />} label="설정" />
29        </Dock.Root>
30      </div>
31    </>
32  );
33}

API 레퍼런스

Dock.Root

독의 최상위 컨테이너 컴포넌트

속성타입기본값설명
position"top" | "bottom" | "left" | "right""bottom"독의 위치 (상하좌우)
zIndexnumber1000z-index 값
colorstring-Glow effect 기본 색상 (모든 Item에 적용)
childrenReactNode-자식 요소

기본 <code>div</code> HTML 속성을 모두 사용할 수 있습니다.

Dock.Item

독의 개별 아이템 컴포넌트

속성타입기본값설명
iconReactNode-아이콘 (ReactNode)
labelstring-라벨 (툴팁으로 표시됨)
asChildbooleanfalse래퍼 없이 자식 요소만 렌더링
colorstring-Glow effect 개별 색상 (Root.color를 override)

기본 <code>button</code> HTML 속성을 모두 사용할 수 있습니다.

Dock.Separator

독의 구분선 컴포넌트

기본 <code>div</code> HTML 속성을 모두 사용할 수 있습니다.

예제

위치 (Positions)

독을 화면의 상하좌우 어디든 배치할 수 있습니다.

1"use client";
2
3import { Dock } from "motile-ui";
4
5import { HomeIcon } from "@/app/_components/icons/HomeIcon";
6import { SearchIcon } from "@/app/_components/icons/SearchIcon";
7import { StarIcon } from "@/app/_components/icons/StarIcon";
8
9export default function PositionsExample() {
10  return (
11    <>
12      {/* Bottom */}
13      <div
14        style={{
15          position: "absolute",
16          bottom: "20px",
17          left: "50%",
18          transform: "translateX(-50%)",
19        }}
20      >
21        <Dock.Root position="bottom">
22          <Dock.Item icon={<HomeIcon />} label="Bottom" />
23          <Dock.Item icon={<SearchIcon />} label="Bottom" />
24          <Dock.Item icon={<StarIcon />} label="Bottom" />
25        </Dock.Root>
26      </div>
27
28      {/* Top */}
29      <div
30        style={{
31          position: "absolute",
32          top: "20px",
33          left: "50%",
34          transform: "translateX(-50%)",
35        }}
36      >
37        <Dock.Root position="top">
38          <Dock.Item icon={<HomeIcon />} label="Top" />
39          <Dock.Item icon={<SearchIcon />} label="Top" />
40          <Dock.Item icon={<StarIcon />} label="Top" />
41        </Dock.Root>
42      </div>
43
44      {/* Left */}
45      <div
46        style={{
47          position: "absolute",
48          left: "20px",
49          top: "50%",
50          transform: "translateY(-50%)",
51        }}
52      >
53        <Dock.Root position="left">
54          <Dock.Item icon={<HomeIcon />} label="Left" />
55          <Dock.Item icon={<SearchIcon />} label="Left" />
56          <Dock.Item icon={<StarIcon />} label="Left" />
57        </Dock.Root>
58      </div>
59
60      {/* Right */}
61      <div
62        style={{
63          position: "absolute",
64          right: "20px",
65          top: "50%",
66          transform: "translateY(-50%)",
67        }}
68      >
69        <Dock.Root position="right">
70          <Dock.Item icon={<HomeIcon />} label="Right" />
71          <Dock.Item icon={<SearchIcon />} label="Right" />
72          <Dock.Item icon={<StarIcon />} label="Right" />
73        </Dock.Root>
74      </div>
75    </>
76  );
77}

다양한 아이콘

icon 속성으로 다양한 아이콘을 표시할 수 있습니다.

1"use client";
2
3import { Dock } from "motile-ui";
4
5import { CalendarIcon } from "@/app/_components/icons/CalendarIcon";
6import { FilesIcon } from "@/app/_components/icons/FilesIcon";
7import { MailIcon } from "@/app/_components/icons/MailIcon";
8import { MessagesIcon } from "@/app/_components/icons/MessagesIcon";
9import { MusicIcon } from "@/app/_components/icons/MusicIcon";
10import { PhotosIcon } from "@/app/_components/icons/PhotosIcon";
11
12export default function IconsExample() {
13  return (
14    <div
15      style={{
16        position: "absolute",
17        bottom: "20px",
18        left: "50%",
19        transform: "translateX(-50%)",
20      }}
21    >
22      <Dock.Root position="bottom">
23        <Dock.Item icon={<FilesIcon />} label="파일" />
24        <Dock.Item icon={<MailIcon />} label="메일" />
25        <Dock.Item icon={<CalendarIcon />} label="달력" />
26        <Dock.Item icon={<MessagesIcon />} label="메시지" />
27        <Dock.Item icon={<MusicIcon />} label="음악" />
28        <Dock.Item icon={<PhotosIcon />} label="사진" />
29      </Dock.Root>
30    </div>
31  );
32}

구분선 사용

Dock.Separator로 아이템 그룹을 시각적으로 구분할 수 있습니다.

1"use client";
2
3import { Dock } from "motile-ui";
4
5import { FilesIcon } from "@/app/_components/icons/FilesIcon";
6import { HomeIcon } from "@/app/_components/icons/HomeIcon";
7import { MessagesIcon } from "@/app/_components/icons/MessagesIcon";
8import { SearchIcon } from "@/app/_components/icons/SearchIcon";
9import { SettingsIcon } from "@/app/_components/icons/SettingsIcon";
10
11export default function SeparatorExample() {
12  return (
13    <div
14      style={{
15        position: "absolute",
16        bottom: "20px",
17        left: "50%",
18        transform: "translateX(-50%)",
19      }}
20    >
21      <Dock.Root position="bottom">
22        <Dock.Item icon={<HomeIcon />} label="홈" />
23        <Dock.Item icon={<SearchIcon />} label="검색" />
24        <Dock.Separator />
25        <Dock.Item icon={<FilesIcon />} label="파일" />
26        <Dock.Item icon={<MessagesIcon />} label="메시지" />
27        <Dock.Separator />
28        <Dock.Item icon={<SettingsIcon />} label="설정" />
29      </Dock.Root>
30    </div>
31  );
32}

커스텀 색상

Root의 color 속성으로 전체 glow 색상을, Item의 color 속성으로 개별 glow 색상을 지정할 수 있습니다.

1"use client";
2
3import { Dock } from "motile-ui";
4
5import { HomeIcon } from "@/app/_components/icons/HomeIcon";
6import { SearchIcon } from "@/app/_components/icons/SearchIcon";
7import { SettingsIcon } from "@/app/_components/icons/SettingsIcon";
8import { StarIcon } from "@/app/_components/icons/StarIcon";
9
10export default function ColorsExample() {
11  return (
12    <div
13      style={{
14        position: "absolute",
15        bottom: "20px",
16        left: "50%",
17        transform: "translateX(-50%)",
18      }}
19    >
20      <Dock.Root position="bottom" color="#8b5cf6">
21        <Dock.Item icon={<HomeIcon />} label="홈" />
22        <Dock.Item icon={<SearchIcon />} label="검색" color="#10b981" />
23        <Dock.Item icon={<StarIcon />} label="즐겨찾기" color="#f59e0b" />
24        <Dock.Item icon={<SettingsIcon />} label="설정" />
25      </Dock.Root>
26    </div>
27  );
28}

조합

다양한 속성을 조합해서 사용할 수 있습니다.

1"use client";
2
3import { Dock } from "motile-ui";
4
5import { FilesIcon } from "@/app/_components/icons/FilesIcon";
6import { HomeIcon } from "@/app/_components/icons/HomeIcon";
7import { MessagesIcon } from "@/app/_components/icons/MessagesIcon";
8import { MusicIcon } from "@/app/_components/icons/MusicIcon";
9import { SettingsIcon } from "@/app/_components/icons/SettingsIcon";
10
11export default function CombinationsExample() {
12  return (
13    <div
14      style={{
15        position: "absolute",
16        bottom: "20px",
17        left: "50%",
18        transform: "translateX(-50%)",
19      }}
20    >
21      <Dock.Root position="bottom" color="#ec4899" zIndex={2000}>
22        <Dock.Item icon={<HomeIcon />} label="홈" />
23        <Dock.Item icon={<FilesIcon />} label="파일" color="#10b981" />
24        <Dock.Separator />
25        <Dock.Item icon={<MessagesIcon />} label="메시지" />
26        <Dock.Item icon={<MusicIcon />} label="음악" color="#f59e0b" />
27        <Dock.Separator />
28        <Dock.Item icon={<SettingsIcon />} label="설정" />
29      </Dock.Root>
30    </div>
31  );
32}
Dock | Motile UI