🐬
Vaul - 2.2k star の Drawer Component
はじめに
-
2023年8月6日現在、Github で 2.2k スターを獲得している Drawer Component の Vaul を紹介します。
-
Vaul を実装した例が以下です。
- 作業したコードは以下です。
結論
- 簡単に タブレット、スマホ向けに Drawer Component を実装できるのでおすすめです。
Vaul とは❓
- タブレットやモバイルデバイス上で、Dialogの代替として使用できる、React用のスタイルの内Drawerコンポーネントです。
- 8月6日現在、Github で 2.2k スターを獲得しています。
- Vaul は内部でRadixのDialogプリミティブを使用しています。
以下のサイトでデモを見れます。
実装
実際にNext.jsで試してみます。
Next.jsプロジェクトの新規作成
作業するプロジェクトを新規に作成していきます。
長いので、折りたたんでおきます。
新規プロジェクト作成と初期環境構築の手順詳細
$ pnpm create next-app@latest nextjs-vaul-sample --typescript --eslint --import-alias "@/*" --src-dir --use-pnpm --tailwind --app
$ cd nextjs-vaul-sample
以下の通り不要な設定を削除し、プロジェクトの初期環境を構築します。
$ mkdir src/styles
$ mv src/app/globals.css src/styles/globals.css
src/styles/globals.css
@tailwind base;
@tailwind components;
@tailwind utilities;
src/app/page.tsx
export default function Home() {
return (
<main className="text-lg">
テストページ
</main>
)
}
src/app/layout.tsx
import '@/styles/globals.css'
export const metadata = {
title: "Create Next App",
description: "Generated by create next app",
};
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="ja">
<body className="">{children}</body>
</html>
);
}
tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./src/components/**/*.{js,ts,jsx,tsx,mdx}",
"./src/app/**/*.{js,ts,jsx,tsx,mdx}",
],
plugins: [],
};
tsconfig.json
{
"compilerOptions": {
"target": "es5",
"lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
"skipLibCheck": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"noEmit": true,
"esModuleInterop": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"jsx": "preserve",
"incremental": true,
"plugins": [
{
"name": "next"
}
],
+ "baseUrl": ".",
"paths": {
"@/*": ["./src/*"],
}
},
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
"exclude": ["node_modules"]
}
コミットします。
$ pnpm build
$ git add .
$ git commit -m "新規にプロジェクトを作成し, 作業環境を構築"
Vaul のインストール
パッケージをインストールします。
$ pnpm add vaul
公式に記載がされているサンプルを実装します。
$ mkdir src/components
$ touch src/components/drawer-with-no-style.tsx
src/components/drawer-with-no-style.tsx
"use client"
import {FC} from 'react'
import { Drawer } from 'vaul';
interface DrawerWithNoStyleProps {}
const DrawerWithNoStyle: FC<DrawerWithNoStyleProps> = ({}) => {
return (
<Drawer.Root>
<Drawer.Trigger>Open</Drawer.Trigger>
<Drawer.Portal>
<Drawer.Content>
<p>Content</p>
</Drawer.Content>
<Drawer.Overlay />
</Drawer.Portal>
</Drawer.Root>
);
};
export default DrawerWithNoStyle;
src/app/page.tsx
import DrawerWithNoStyle from "@/components/drawer-with-no-style";
export default function Home() {
return (
<main className="text-lg">
<DrawerWithNoStyle />
</main>
)
}
ローカルサーバーで動作確認します。現在のままだとスタイルがあたっていません。
$ pnpm dev
コミットします。
$ pnpm build
$ git add .
$ git commit -m "デザインが反映されていないDrawerを追加"
スタイルの例
Githubのリポジトリで5つのスタイルが紹介されています。
- With scaled background
- Without scaled background
- Scrollable with inputs
- Nested drawers
- Non-dismissible
それぞれ実装していきます。上記のサイトを参考に少し変更しています。
$ touch src/components/drawer-with-scaled-background.tsx
$ touch src/components/drawer-without-scaled-background.tsx
$ touch src/components/drawer-scrollable-with-inputs.tsx
$ touch src/components/drawer-nested-drawers.tsx
$ touch src/components/drawer-non-dismissible.tsx
まとめると以下です。
| ファイル名 | 説明 |
|---|---|
| drawer-with-no-style.tsx | スタイル無しDrawer |
| drawer-with-scaled-background.tsx | 画面全体に表示するDrawer |
| drawer-without-scaled-background.tsx | 画面最小サイズで表示するDrawer |
| drawer-scrollable-with-inputs.tsx | スクロール可能なDrawer |
| drawer-nested-drawers.tsx | ネストされたDrawer |
| drawer-non-dismissible.tsx | DismissibleなDrawer |
長いので折りたたんでおきます。
実装
src/app/page.tsx
import DrawerNestedDrawers from "@/components/drawer-nested-drawers";
import DrawerNonDismissible from "@/components/drawer-non-dismissible";
import DrawerScrollableWithInputs from "@/components/drawer-scrollable-with-inputs";
import DrawerWithNoStyle from "@/components/drawer-with-no-style";
import DrawerWithScaledBackground from "@/components/drawer-with-scaled-background";
import DrawerWithoutScaledBackground from "@/components/drawer-without-scaled-background";
export default function Home() {
return (
<main className="flex flex-col items-start">
<DrawerWithNoStyle />
<DrawerWithScaledBackground />
<DrawerWithoutScaledBackground />
<DrawerScrollableWithInputs />
<DrawerNestedDrawers />
<DrawerNonDismissible />
</main>
)
}
src/components/drawer-with-no-style.tsx
"use client";
import { FC } from "react";
import { Drawer } from "vaul";
interface DrawerWithNoStyleProps {}
const DrawerWithNoStyle: FC<DrawerWithNoStyleProps> = ({}) => {
return (
<Drawer.Root>
<Drawer.Trigger>
<button className="bg-slate-800 text-white py-1 px-3 rounded-md m-2">
スタイル無しの Drawer
</button>
</Drawer.Trigger>
<Drawer.Portal>
<Drawer.Content>
<p>Content</p>
</Drawer.Content>
<Drawer.Overlay />
</Drawer.Portal>
</Drawer.Root>
);
};
export default DrawerWithNoStyle;
src/components/drawer-with-scaled-background.tsx
"use client";
import { FC } from "react";
import { Drawer } from "vaul";
interface DrawerWithScaledBackgroundProps {}
const DrawerWithScaledBackground: FC<DrawerWithScaledBackgroundProps> = () =>{
return (
<Drawer.Root shouldScaleBackground>
<Drawer.Trigger asChild>
<button className="bg-slate-800 text-white py-1 px-3 rounded-md m-2">画面全体に表示する Drawer</button>
</Drawer.Trigger>
<Drawer.Portal>
<Drawer.Overlay className="fixed inset-0 bg-black/40" />
<Drawer.Content className="bg-zinc-100 flex flex-col rounded-t-[10px] h-[96%] mt-24 fixed bottom-0 left-0 right-0">
<div className="p-4 bg-white rounded-t-[10px] flex-1">
<div className="mx-auto w-12 h-1.5 flex-shrink-0 rounded-full bg-zinc-300 mb-8" />
<div className="max-w-md mx-auto">
<Drawer.Title className="font-medium mb-4">
Unstyled drawer for React.
</Drawer.Title>
<p className="text-zinc-600 mb-2">
This component can be used as a replacement for a Dialog on
mobile and tablet devices.
</p>
<p className="text-zinc-600 mb-8">
It uses{" "}
<a
href="https://www.radix-ui.com/docs/primitives/components/dialog"
className="underline"
target="_blank"
>
Radix's Dialog primitive
</a>{" "}
under the hood and is inspired by{" "}
<a
href="https://twitter.com/devongovett/status/1674470185783402496"
className="underline"
target="_blank"
>
this tweet.
</a>
</p>
</div>
</div>
<div className="p-4 bg-zinc-100 border-t border-zinc-200 mt-auto">
<div className="flex gap-6 justify-end max-w-md mx-auto">
<a
className="text-xs text-zinc-600 flex items-center gap-0.25"
href="https://github.com/emilkowalski/vaul"
target="_blank"
>
GitHub
<svg
fill="none"
height="16"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
viewBox="0 0 24 24"
width="16"
aria-hidden="true"
className="w-3 h-3 ml-1"
>
<path d="M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6"></path>
<path d="M15 3h6v6"></path>
<path d="M10 14L21 3"></path>
</svg>
</a>
<a
className="text-xs text-zinc-600 flex items-center gap-0.25"
href="https://twitter.com/emilkowalski_"
target="_blank"
>
Twitter
<svg
fill="none"
height="16"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
viewBox="0 0 24 24"
width="16"
aria-hidden="true"
className="w-3 h-3 ml-1"
>
<path d="M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6"></path>
<path d="M15 3h6v6"></path>
<path d="M10 14L21 3"></path>
</svg>
</a>
</div>
</div>
</Drawer.Content>
</Drawer.Portal>
</Drawer.Root>
);
}
export default DrawerWithScaledBackground;
src/components/drawer-without-scaled-background.tsx
"use client";
import { FC } from "react";
import { Drawer } from "vaul";
interface DrawerWithoutScaledBackgroundProps {}
const DrawerWithoutScaledBackground: FC<DrawerWithoutScaledBackgroundProps> = () => {
return (
<Drawer.Root>
<Drawer.Trigger asChild>
<button className="bg-slate-800 text-white py-1 px-3 rounded-md m-2">画面最小サイズで表示する Drawer</button>
</Drawer.Trigger>
<Drawer.Portal>
<Drawer.Overlay className="fixed inset-0 bg-black/40" />
<Drawer.Content className="bg-zinc-100 flex flex-col rounded-t-[10px] mt-24 fixed bottom-0 left-0 right-0">
<div className="p-4 bg-white rounded-t-[10px] flex-1">
<div className="mx-auto w-12 h-1.5 flex-shrink-0 rounded-full bg-zinc-300 mb-8" />
<div className="max-w-md mx-auto">
<Drawer.Title className="font-medium mb-4">
Unstyled drawer for React.
</Drawer.Title>
<p className="text-zinc-600 mb-2">
This component can be used as a replacement for a Dialog on
mobile and tablet devices.
</p>
<p className="text-zinc-600 mb-8">
It uses{" "}
<a
href="https://www.radix-ui.com/docs/primitives/components/dialog"
className="underline"
target="_blank"
>
Radix{"'"}s Dialog primitive
</a>{" "}
under the hood and is inspired by{" "}
<a
href="https://twitter.com/devongovett/status/1674470185783402496"
className="underline"
target="_blank"
>
this tweet.
</a>
</p>
</div>
</div>
<div className="p-4 bg-zinc-100 border-t border-zinc-200 mt-auto">
<div className="flex gap-6 justify-end max-w-md mx-auto">
<a
className="text-xs text-zinc-600 flex items-center gap-0.25"
href="https://github.com/emilkowalski/vaul"
target="_blank"
>
GitHub
<svg
fill="none"
height="16"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
viewBox="0 0 24 24"
width="16"
aria-hidden="true"
className="w-3 h-3 ml-1"
>
<path d="M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6"></path>
<path d="M15 3h6v6"></path>
<path d="M10 14L21 3"></path>
</svg>
</a>
<a
className="text-xs text-zinc-600 flex items-center gap-0.25"
href="https://twitter.com/emilkowalski_"
target="_blank"
>
Twitter
<svg
fill="none"
height="16"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
viewBox="0 0 24 24"
width="16"
aria-hidden="true"
className="w-3 h-3 ml-1"
>
<path d="M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6"></path>
<path d="M15 3h6v6"></path>
<path d="M10 14L21 3"></path>
</svg>
</a>
</div>
</div>
</Drawer.Content>
</Drawer.Portal>
</Drawer.Root>
);
};
export default DrawerWithoutScaledBackground;
src/components/drawer-scrollable-with-inputs.tsx
"use client";
import { FC } from "react";
import { Drawer } from "vaul";
interface DrawerScrollableWithInputsProps {}
const DrawerScrollableWithInputs: FC<DrawerScrollableWithInputsProps> = () => {
return (
<Drawer.Root shouldScaleBackground>
<Drawer.Trigger asChild>
<button className="bg-slate-800 text-white py-1 px-3 rounded-md m-2">スクロール可能な Drawer</button>
</Drawer.Trigger>
<Drawer.Portal>
<Drawer.Overlay className="fixed inset-0 bg-black/40" />
<Drawer.Content className="bg-white flex flex-col fixed bottom-0 left-0 right-0 max-h-[85vh] rounded-t-[10px]">
<div className="max-w-md w-full mx-auto flex flex-col overflow-auto p-4 rounded-t-[10px]">
<input
className="border border-gray-400 my-8"
placeholder="Input"
/>
<p>
But I must explain to you how all this mistaken idea of denouncing
pleasure and praising pain was born and I will give you a complete
account of the system, and expound the actual teachings of the
great explorer of the truth, the master-builder of human
happiness. No one rejects, dislikes, or avoids pleasure itself,
because it is pleasure, but because those who do not know how to
pursue pleasure rationally encounter consequences that are
extremely painful. Nor again is there anyone who loves or pursues
or desires to obtain pain of itself, because it is pain, but
because occasionally circumstances occur in which toil and pain
can procure him some great pleasure. To take a trivial example,
which of us ever undertakes laborious physical exercise, except to
obtain some advantage from it? But who has any right to find fault
with a man who chooses to enjoy a pleasure that has no annoying
consequences, or one who avoids a pain that produces no resultant
pleasure?
</p>
<input
className="border border-gray-400 my-8"
placeholder="Input"
/>
<p>
On the other hand, we denounce with righteous indignation and
dislike men who are so beguiled and demoralized by the charms of
pleasure of the moment, so blinded by desire, that they cannot
foresee the pain and trouble that are bound to ensue; and equal
blame belongs to those who fail in their duty through weakness of
will, which is the same as saying through shrinking from toil and
pain. These cases are perfectly simple and easy to distinguish. In
a free hour, when our power of choice is untrammelled and when
nothing prevents our being able to do what we like best, every
pleasure is to be welcomed and every pain avoided. But in certain
circumstances and owing to the claims of duty or the obligations
of business it will frequently occur that pleasures have to be
repudiated and annoyances accepted. The wise man therefore always
holds in these matters to this principle of selection: he rejects
pleasures to secure other greater pleasures, or else he endures
pains to avoid worse pains.
</p>
<input
className="border border-gray-400 my-8"
placeholder="Input"
/>
</div>
</Drawer.Content>
</Drawer.Portal>
</Drawer.Root>
);
};
export default DrawerScrollableWithInputs;
src/components/drawer-nested-drawers.tsx
"use client";
import { FC } from "react";
import { Drawer } from "vaul";
interface DrawerNestedDrawersProps {}
const DrawerNestedDrawers: FC<DrawerNestedDrawersProps> = () => {
return (
<Drawer.Root shouldScaleBackground>
<Drawer.Trigger asChild>
<button className="bg-slate-800 text-white py-1 px-3 rounded-md m-2">ネストされた Drawer</button>
</Drawer.Trigger>
<Drawer.Portal>
<Drawer.Overlay className="fixed inset-0 bg-black/40" />
<Drawer.Content className="bg-gray-100 flex flex-col rounded-t-[10px] h-full mt-24 max-h-[96%] fixed bottom-0 left-0 right-0">
<div className="p-4 bg-white rounded-t-[10px] flex-1">
<div className="mx-auto w-12 h-1.5 flex-shrink-0 rounded-full bg-gray-300 mb-8" />
<div className="max-w-md mx-auto">
<Drawer.Title className="font-medium mb-4">
Drawer for React.
</Drawer.Title>
<p className="text-gray-600 mb-2">
This component can be used as a Dialog replacement on mobile and
tablet devices.
</p>
<p className="text-gray-600 mb-2">
It comes unstyled and has gesture-driven animations.
</p>
<p className="text-gray-600 mb-6">
It uses{" "}
<a
href="https://www.radix-ui.com/docs/primitives/components/dialog"
className="underline"
target="_blank"
>
Radix{"'"}s Dialog primitive
</a>{" "}
under the hood and is inspired by{" "}
<a
href="https://twitter.com/devongovett/status/1674470185783402496"
className="underline"
target="_blank"
>
this tweet.
</a>
</p>
<Drawer.NestedRoot>
<Drawer.Trigger className="rounded-md mb-6 w-full bg-gray-900 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-gray-800 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-600">
Open Second Drawer
</Drawer.Trigger>
<Drawer.Portal>
<Drawer.Overlay className="fixed inset-0 bg-black/40" />
<Drawer.Content className="bg-gray-100 flex flex-col rounded-t-[10px] h-full mt-24 max-h-[94%] fixed bottom-0 left-0 right-0">
<div className="p-4 bg-white rounded-t-[10px] flex-1">
<div className="mx-auto w-12 h-1.5 flex-shrink-0 rounded-full bg-gray-300 mb-8" />
<div className="max-w-md mx-auto">
<Drawer.Title className="font-medium mb-4">
This drawer is nested.
</Drawer.Title>
<p className="text-gray-600 mb-2">
Place a{" "}
<span className="font-mono text-[15px] font-semibold">
`Drawer.NestedRoot`
</span>{" "}
inside another drawer and it will be nested
automatically for you.
</p>
<p className="text-gray-600 mb-2">
You can view more examples{" "}
<a
href="https://github.com/emilkowalski/vaul#examples"
className="underline"
target="_blank"
>
here
</a>
.
</p>
</div>
</div>
<div className="p-4 bg-gray-100 border-t border-gray-200 mt-auto">
<div className="flex gap-6 justify-end max-w-md mx-auto">
<a
className="text-xs text-gray-600 flex items-center gap-0.25"
href="https://github.com/emilkowalski/vaul"
target="_blank"
>
GitHub
<svg
fill="none"
height="16"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
viewBox="0 0 24 24"
width="16"
aria-hidden="true"
className="w-3 h-3 ml-1"
>
<path d="M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6"></path>
<path d="M15 3h6v6"></path>
<path d="M10 14L21 3"></path>
</svg>
</a>
<a
className="text-xs text-gray-600 flex items-center gap-0.25"
href="https://twitter.com/emilkowalski_"
target="_blank"
>
Twitter
<svg
fill="none"
height="16"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
viewBox="0 0 24 24"
width="16"
aria-hidden="true"
className="w-3 h-3 ml-1"
>
<path d="M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6"></path>
<path d="M15 3h6v6"></path>
<path d="M10 14L21 3"></path>
</svg>
</a>
</div>
</div>
</Drawer.Content>
</Drawer.Portal>
</Drawer.NestedRoot>
</div>
</div>
<div className="p-4 bg-gray-100 border-t border-gray-200 mt-auto">
<div className="flex gap-6 justify-end max-w-md mx-auto">
<a
className="text-xs text-gray-600 flex items-center gap-0.25"
href="https://github.com/emilkowalski/vaul"
target="_blank"
>
GitHub
<svg
fill="none"
height="16"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
viewBox="0 0 24 24"
width="16"
aria-hidden="true"
className="w-3 h-3 ml-1"
>
<path d="M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6"></path>
<path d="M15 3h6v6"></path>
<path d="M10 14L21 3"></path>
</svg>
</a>
<a
className="text-xs text-gray-600 flex items-center gap-0.25"
href="https://twitter.com/emilkowalski_"
target="_blank"
>
Twitter
<svg
fill="none"
height="16"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
viewBox="0 0 24 24"
width="16"
aria-hidden="true"
className="w-3 h-3 ml-1"
>
<path d="M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6"></path>
<path d="M15 3h6v6"></path>
<path d="M10 14L21 3"></path>
</svg>
</a>
</div>
</div>
</Drawer.Content>
</Drawer.Portal>
</Drawer.Root>
);
};
export default DrawerNestedDrawers;
src/components/drawer-non-dismissible.tsx
"use client";
import { FC, useState } from "react";
import { Drawer } from "vaul";
interface DrawerNonDismissibleProps {}
const DrawerNonDismissible: FC<DrawerNonDismissibleProps> = () => {
const [open, setOpen] = useState(false);
return (
<Drawer.Root dismissible={false} open={open}>
<Drawer.Trigger asChild onClick={() => setOpen(true)}>
<button className="bg-slate-800 text-white py-1 px-3 rounded-md m-2">Dismissibleできない Drawer</button>
</Drawer.Trigger>
<Drawer.Portal>
<Drawer.Overlay className="fixed inset-0 bg-black/40" />
<Drawer.Content className="bg-zinc-100 flex flex-col rounded-t-[10px] mt-24 fixed bottom-0 left-0 right-0">
<div className="p-4 bg-white rounded-t-[10px] flex-1">
<div className="mx-auto w-12 h-1.5 flex-shrink-0 rounded-full bg-zinc-300 mb-8" />
<div className="max-w-md mx-auto">
<Drawer.Title className="font-medium mb-4">
Unstyled drawer for React.
</Drawer.Title>
<p className="text-zinc-600 mb-2">
This component can be used as a replacement for a Dialog on
mobile and tablet devices.
</p>
<p className="text-zinc-600 mb-6">
It uses{" "}
<a
href="https://www.radix-ui.com/docs/primitives/components/dialog"
className="underline"
target="_blank"
>
Radix{"'"}s Dialog primitive
</a>{" "}
under the hood and is inspired by{" "}
<a
href="https://twitter.com/devongovett/status/1674470185783402496"
className="underline"
target="_blank"
>
this tweet.
</a>
</p>
<button
type="button"
onClick={() => setOpen(false)}
className="rounded-md mb-6 w-full bg-gray-900 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-gray-800 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-600"
>
Click to close
</button>
</div>
</div>
<div className="p-4 bg-zinc-100 border-t border-zinc-200 mt-auto">
<div className="flex gap-6 justify-end max-w-md mx-auto">
<a
className="text-xs text-zinc-600 flex items-center gap-0.25"
href="https://github.com/emilkowalski/vaul"
target="_blank"
>
GitHub
<svg
fill="none"
height="16"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
viewBox="0 0 24 24"
width="16"
aria-hidden="true"
className="w-3 h-3 ml-1"
>
<path d="M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6"></path>
<path d="M15 3h6v6"></path>
<path d="M10 14L21 3"></path>
</svg>
</a>
<a
className="text-xs text-zinc-600 flex items-center gap-0.25"
href="https://twitter.com/emilkowalski_"
target="_blank"
>
Twitter
<svg
fill="none"
height="16"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
viewBox="0 0 24 24"
width="16"
aria-hidden="true"
className="w-3 h-3 ml-1"
>
<path d="M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6"></path>
<path d="M15 3h6v6"></path>
<path d="M10 14L21 3"></path>
</svg>
</a>
</div>
</div>
</Drawer.Content>
</Drawer.Portal>
</Drawer.Root>
);
};
export default DrawerNonDismissible;
コミットします。
$ pnpm build
$ git add .
$ git commit -m "デザインありのDrawerを実装"
動作確認
ローカルサーバーを起動して動作確認します。
$ pnpm dev
まとめ
- 2023年8月6日現在、Github で 2.2k スターを獲得している Drawer Component の Vaul を紹介しました。
- 作業したコードは以下です。
参考
Discussion