Shadcn-ui : 基礎
shadcnのアイコン = Lucide
Lucide: https://lucide.dev/icons/bar-chart-3 で確認できる
アイコンにカラーをつける :
<Swords color={"#d8bc03"}/>
{}は無くていい
docs : https://lucide.dev/guide/basics/color
デフォルトでAccordionをオープン
<Accordion
type="single"
collapsible
className="border my-2 p-3"
defaultValue="item-1"
>
<AccordionItem value="item-1">
<Accordion defaultValue="item-1" >と <AccordionItem value="item-1"> の値が一致していればOPENになる模様
Toaster(= 画面右下のポップアップ)
Providerのように上部ファイルにToasterコンポーネントを置けば、下層ファイルに機能が適用される仕組み
<main className="min-h-screen sm:w-2/3 mx-auto w-full p-3">
{children}
<Toaster />
1npx shadcn-ui@latest add sonner
2 Toasterを使いたいファイルでは import { toast } from "sonner"
例:
import { toast } from "sonner";
<button
type="submit"
onClick={() =>
toast("追加したよ", {
description: "追加完了",
action: {
label: "OK",
onClick: () => console.log("OK"),
},
})
}
>
hogege
</button>
- * onClick: () => console.log("OK") この部分は消さないこと。OKボタンを押してToaterを消すのに必要
レスポンシブ時にtdが消える <TableCell>
- shadcnの<Table>コンポーネントではデフォでtdにp-4がでついている
- なので<TableHead>がw-[30]等の大きさだと、レスポンシブで内容が消えてしまう
<td class="p-4 align-middle [&:has([role=checkbox])]:pr-0 py-2 px-4 border-b text-base">
- 対策:p-0
<TableCell className="p-0">
← Go home