کالپس (Collapsible)

1import { Button, Card, CardContent } from "@/components/ui/card";
2import {
3  Collapsible,
4  CollapsibleContent,
5  CollapsibleTrigger,
6} from "@/components/ui/collapsible";
7
8export default function BasicCollapsibleExample() {
9  return (
10    <Card className="mx-auto w-full max-w-sm">
11      <CardContent className="p-2">
12        <Collapsible className="w-full rounded-md border border-border data-[state=open]:bg-muted">
13          <CollapsibleTrigger className="group flex w-full items-center justify-between px-3 py-2 text-sm font-medium">
14            جزئیات محصول
15            <span className="ms-auto text-xs text-muted-foreground group-data-[state=open]:rotate-180">
16              ▼
17            </span>
18          </CollapsibleTrigger>
19          <CollapsibleContent className="flex flex-col items-start gap-2 border-t border-border px-3 pb-3 pt-2 text-sm text-muted-foreground data-[state=closed]:border-t-0 data-[state=closed]:p-0">
20            <div>
21              این بخش می‌تواند برای نمایش توضیحات تکمیلی محصول باز و بسته شود.
22            </div>
23            <Button size="sm">بیشتر بدانید</Button>
24          </CollapsibleContent>
25        </Collapsible>
26      </CardContent>
27    </Card>
28  );
29}
30

1import * as React from "react";
2
3import {
4  Button,
5  Collapsible,
6  CollapsibleContent,
7  CollapsibleTrigger,
8} from "@/components/ui/collapsible";
9
10export default function ControlledCollapsibleExample() {
11  const [open, setOpen] = React.useState(false);
12
13  return (
14    <div className="flex w-full max-w-sm flex-col items-stretch gap-3">
15      <Button
16        variant="outline"
17        className="w-full"
18        onClick={() => setOpen((prev) => !prev)}
19      >
20        {open ? "بستن جزئیات" : "نمایش جزئیات"}
21      </Button>
22
23      <Collapsible
24        open={open}
25        onOpenChange={setOpen}
26        className="space-y-2 w-full"
27      >
28        <CollapsibleTrigger className="text-sm font-medium text-primary underline-offset-4 hover:underline">
29          تغییر وضعیت از داخل کامپوننت
30        </CollapsibleTrigger>
31        <CollapsibleContent className="text-sm text-muted-foreground">
32          این نمونه نشان می‌دهد چگونه می‌توانید وضعیت باز/بسته را به صورت
33          کنترل‌شده مدیریت کنید.
34        </CollapsibleContent>
35      </Collapsible>
36    </div>
37  );
38}
39

1import * as React from "react";
2import {
3  Button,
4  Card,
5  CardContent,
6  CardDescription,
7  CardHeader,
8  CardTitle,
9  Collapsible,
10  CollapsibleContent,
11  CollapsibleTrigger,
12  Field,
13  FieldGroup,
14  FieldLabel,
15  Input,
16} from "@/components/ui/collapsible";
17import { Maximize, Minimize } from "lucide-react";
18
19export default function CollapsibleSettingsPanel() {
20  const [open, setOpen] = React.useState(false);
21
22  return (
23    <Card className="mx-auto w-full max-w-xs" size="sm">
24      <CardHeader>
25        <CardTitle>شعاع گوشه‌ها</CardTitle>
26        <CardDescription>شعاع گوشه‌های المان را تنظیم کنید.</CardDescription>
27      </CardHeader>
28      <CardContent>
29        <Collapsible
30          open={open}
31          onOpenChange={setOpen}
32          className="flex items-start gap-2"
33        >
34          <FieldGroup className="grid w-full grid-cols-2 gap-2">
35            <Field>
36              <FieldLabel htmlFor="radius-x" className="sr-only">
37                Radius X
38              </FieldLabel>
39              <Input id="radius-x" placeholder="0" defaultValue={0} />
40            </Field>
41            <Field>
42              <FieldLabel htmlFor="radius-y" className="sr-only">
43                Radius Y
44              </FieldLabel>
45              <Input id="radius-y" placeholder="0" defaultValue={0} />
46            </Field>
47            <CollapsibleContent className="col-span-full grid grid-cols-subgrid gap-2">
48              <Field>
49                <FieldLabel htmlFor="radius-top" className="sr-only">
50                  Radius Top
51                </FieldLabel>
52                <Input id="radius-top" placeholder="0" defaultValue={0} />
53              </Field>
54              <Field>
55                <FieldLabel htmlFor="radius-bottom" className="sr-only">
56                  Radius Bottom
57                </FieldLabel>
58                <Input id="radius-bottom" placeholder="0" defaultValue={0} />
59              </Field>
60            </CollapsibleContent>
61          </FieldGroup>
62          <CollapsibleTrigger asChild>
63            <Button
64              variant="outline"
65              size="sm"
66              className="aspect-square p-0"
67              aria-label={open ? "بستن تنظیمات پیشرفته" : "نمایش تنظیمات پیشرفته"}
68            >
69              {open ? (
70                <Minimize className="w-4 h-4" />
71              ) : (
72                <Maximize className="w-4 h-4" />
73              )}
74            </Button>
75          </CollapsibleTrigger>
76        </Collapsible>
77      </CardContent>
78    </Card>
79  );
80}
81