Components
- آکوردئونAccordion
- Alert
- Alert Dialog
- Aspect Ratio
- Attachment
- Avatar
- Badge
- Breadcrumb
- Bubble
- دکمهButton
- گروه دکمههاButton Group
- Calendar
- Card
- Carousel
- Chart
- Checkbox
- Collapsible
- Combobox
- Command
- Context Menu
- Data Table
- Date Picker
- Dialog
- Direction
- Drawer
- Dropdown Menu
- Empty
- Field
- Hover Card
- Input
- Input Group
- Input OTP
- Item
- Kbd
- Label
- Marker
- Menubar
- Message
- Message Scroller
- Native Select
- Navigation Menu
- Pagination
- Popover
- Progress
- Questionnaire
- Radio Group
- Resizable
- Scroll Area
- Select
- Separator
- Sheet
- Sidebar
- Skeleton
- Slider
- Spinner
- Switch
- Table
- Tabs
- Textarea
- Toast
- Toggle
- Toggle Group
- Tooltip
- Typography
Get Started
@farsiui/react
@farsiui/helpers
Utilities
import {
Accordion,
AccordionContent,
AccordionItem,
AccordionTrigger,
} from "@/components/ui/accordion"
export function AccordionDemo() {
return (
<Accordion dir="rtl" defaultValue={["shipping"]} className="w-full max-w-lg">
<AccordionItem value="shipping">
<AccordionTrigger>گزینههای ارسال چیست؟</AccordionTrigger>
<AccordionContent>
ارسال عادی (۵ تا ۷ روز)، سریع (۲ تا ۳ روز) و overnight. برای سفارشهای
بینالمللی ارسال رایگان داریم.
</AccordionContent>
</AccordionItem>
<AccordionItem value="returns">
<AccordionTrigger>شرایط مرجوعی چگونه است؟</AccordionTrigger>
<AccordionContent>
تا ۳۰ روز پس از خرید میتوانید مرجوع کنید. کالا باید استفادهنشده و در
بستهبندی اصلی باشد. بازگشت وجه طی ۵ تا ۷ روز کاری انجام میشود.
</AccordionContent>
</AccordionItem>
<AccordionItem value="support">
<AccordionTrigger>چطور با پشتیبانی تماس بگیرم؟</AccordionTrigger>
<AccordionContent>
از طریق ایمیل، گفتگوی آنلاین یا تلفن. در روزهای کاری معمولاً تا ۲۴
ساعت پاسخ میدهیم.
</AccordionContent>
</AccordionItem>
</Accordion>
)
}
نصب#
npx farsiui@latest add accordion
استفاده#
import {
Accordion,
AccordionContent,
AccordionItem,
AccordionTrigger,
} from "@/components/ui/accordion"<Accordion defaultValue={["item-1"]}>
<AccordionItem value="item-1">
<AccordionTrigger>دسترسپذیر است؟</AccordionTrigger>
<AccordionContent>
بله. از الگوی طراحی WAI-ARIA پیروی میکند.
</AccordionContent>
</AccordionItem>
</Accordion>