[ Home ]
back

shadcn/ui List 編集 , DataTable, Sheet 例

id: 160, 2024-09-20

概要:

shadcn/ui リスト系編集的な CRUD一部実装メモになります。

[ 作成日: 2024/09/17 ]

構成

  • Bun
  • @rsbuild/core: 1.0.1
  • shadcn/ui
  • React
  • express.js
  • typescript

関連

作成したコード


....
return(
<div className="container mx-auto my-2 px-8 bg-white">
  <Head />
  <h1 className="text-4xl font-bold">ListTest</h1>
  <hr className="my-2" />
  <Button onClick={handleOpen}>Create</Button>

....


<Sheet open={isOpen} onOpenChange={setIsOpen}>
  <SheetContent>
    <SheetHeader>
      <SheetTitle>Create</SheetTitle>
      <SheetDescription>
        create test user.
      </SheetDescription>
    </SheetHeader>
    <div className="grid gap-4 py-4" id="form1">
      <div className="grid grid-cols-4 items-center gap-4">
        <Label htmlFor="username" className="text-right">
        username
        </Label>
        <Input id="email" name="email" 
        defaultValue="@name123" className="col-span-3" />
      </div>
      <div className="grid grid-cols-4 items-center gap-4">
        <Label htmlFor="name" className="text-right">
        amount
        </Label>
        <Input id="amount" name="amount" defaultValue="1111" 
        className="col-span-3" />
      </div>
    </div>
    <SheetFooter>
      <Button onClick={()=>{closeFunc()}}
      >Save</Button>
    </SheetFooter>
  </SheetContent>
</Sheet>