Обзор
Компоненты
- Accordion
- Alert
- Alert Dialog
- Autocomplete
- Auth Surface
- Avatar
- Badge
- Browse Catalog Dialog
- Button
- Card
- Checkbox
- Checkbox Group
- Collapsible
- Combobox
- Command
- Connector Setup Dialog
- Cookie Banner
- Dialog
- Directory Card
- Directory Detail
- Directory Skeleton
- DrawerНовое
- Token Parts Input
- Empty
- Field
- Fieldset
- File Preview Modal
- File Preview Skeleton
- Form
- Frame
- Group
- Icon
- Input
- Input Group
- Kbd
- Label
- Legal Shell
- Menu
- Mermaid Diagram
- Mind Map Diagram
- Not Found Screen
- Onboarding Frame
- Popover
- PDF Thumbnail
- Personalization Landing
- Preview Card
- Pricing Page
- Progress
- Radio Group
- Ring Spinner
- Scroll Area
- Select
- Separator
- Settings Page
- Settings Skills
- Settings Connectors
- Settings Capabilities
- Settings Usage
- Settings Account
- Settings Billing
- Sheet
- Sidebar
- Skeleton
- Skill Create Dialog
- Slider
- Spinner
- Stat
- Switch
- Table
- Tabs
- Textarea
- Toast
- Toggle
- Tooltip
AI-компоненты
- Компоненты AI
- Chat Conversation
- Chat Message
- Chat Response
- Chat Suggestion
- Chat Prompt Input
- Slash Highlighted Textarea
- Chat Search Dialog
- Chat Skill Doc
- Chat Connector Detail
- Chat Attachments
- Chat File Card
- Chat Token Chip
- Chat Code Block
- Chat Image
- Chat Inline Citation
- Chat Sources
- Chat Web Search
- Chat Research
- Chat Source
- Chat Actions
- Chat Context
- Chat Loader
- Chat Compaction
- Chat Timeline
- Chat Snippet
- Chat Terminal
- Chat Stack Trace
- Chat Test Results
- Chat File Tree
- Chat Environment Variables
- Chat Audio Player
- Chat Transcription
- Chat Speech Input
- Chat Mic Selector
- Chat Voice Selector
- Chat Agent
- Chat Persona
- Chat Connection
- Chat Connector Suggestion
- Chat Queue
- Chat Checkpoint
- Chat Confirmation
- Chat Artifact
- Chat JSX Preview
- Chat Schema Display
- Chat Package Info
- Chat Commit
- Chat Plan
- Chat Open In Chat
- Chat Sandbox
- Chat Model Selector
- Chat Canvas
- Chat Node
- Chat Edge
Ресурсы
Accordion
Набор сворачиваемых панелей с заголовками и содержимым.
Конечно! Base UI бесплатна и имеет открытый исходный код.
import {
Accordion,
AccordionItem,
AccordionPanel,
AccordionTrigger,
} from "@/components/ui/accordion";
export default function Particle() {
const items = [
{
content:
"Base UI — это библиотека качественных нестилизованных React-компонентов для дизайн-систем и веб-приложений.",
id: "1",
title: "Что такое Base UI?",
},
{
content:
"Откройте руководство «Быстрый старт» в документации. Если вы уже работали с нестилизованными библиотеками, всё будет привычно.",
id: "2",
title: "С чего начать?",
},
{
content: "Конечно! Base UI бесплатна и имеет открытый исходный код.",
id: "3",
title: "Можно ли использовать её в моём проекте?",
},
];
return (
<Accordion className="w-full" defaultValue={["3"]}>
{items.map((item) => (
<AccordionItem key={item.id} value={item.id}>
<AccordionTrigger>{item.title}</AccordionTrigger>
<AccordionPanel>{item.content}</AccordionPanel>
</AccordionItem>
))}
</Accordion>
);
}
Установка
pnpm dlx shadcn@latest add @oracul/accordion
Использование
import {
Accordion,
AccordionItem,
AccordionPanel,
AccordionTrigger,
} from "@/components/ui/accordion"<Accordion>
<AccordionItem value="item-1">
<AccordionTrigger>Is it accessible?</AccordionTrigger>
<AccordionPanel>
Yes. It adheres to the WAI-ARIA design pattern.
</AccordionPanel>
</AccordionItem>
</Accordion>Справочник API
Accordion
Корневой компонент. Псевдоним для Accordion.Root из Base UI.
AccordionItem
Контейнер отдельного элемента аккордеона. Стилизованная обёртка для Accordion.Item из Base UI с нижней границей.
AccordionTrigger
Кнопка-триггер, которая открывает и закрывает панель аккордеона. Стилизованная обёртка для Accordion.Trigger из Base UI. Содержит встроенную иконку-шеврон, которая поворачивается при раскрытии.
AccordionPanel
Сворачиваемая панель с содержимым. Стилизованная обёртка для Accordion.Panel из Base UI с анимированными переходами высоты. Также экспортируется как AccordionContent.
Примеры
Одиночный аккордеон
import {
Accordion,
AccordionItem,
AccordionPanel,
AccordionTrigger,
} from "@/components/ui/accordion";
export default function Particle() {
return (
<Accordion className="w-full">
<AccordionItem value="item-1">
<AccordionTrigger>Что такое Base UI?</AccordionTrigger>
<AccordionPanel>
Base UI — это библиотека качественных нестилизованных
React-компонентов для дизайн-систем и веб-приложений.
</AccordionPanel>
</AccordionItem>
<AccordionItem value="item-2">
<AccordionTrigger>С чего начать?</AccordionTrigger>
<AccordionPanel>
Откройте руководство «Быстрый старт» в документации. Если вы уже
работали с нестилизованными библиотеками, всё будет привычно.
</AccordionPanel>
</AccordionItem>
<AccordionItem value="item-3">
<AccordionTrigger>
Можно ли использовать её в моём проекте?
</AccordionTrigger>
<AccordionPanel>
Конечно! Base UI бесплатна и имеет открытый исходный код.
</AccordionPanel>
</AccordionItem>
</Accordion>
);
}
Множественный аккордеон
import {
Accordion,
AccordionItem,
AccordionPanel,
AccordionTrigger,
} from "@/components/ui/accordion";
export default function Particle() {
return (
<Accordion className="w-full" multiple>
<AccordionItem value="item-1">
<AccordionTrigger>Что такое Base UI?</AccordionTrigger>
<AccordionPanel>
Base UI — это библиотека качественных нестилизованных
React-компонентов для дизайн-систем и веб-приложений.
</AccordionPanel>
</AccordionItem>
<AccordionItem value="item-2">
<AccordionTrigger>С чего начать?</AccordionTrigger>
<AccordionPanel>
Откройте руководство «Быстрый старт» в документации. Если вы уже
работали с нестилизованными библиотеками, всё будет привычно.
</AccordionPanel>
</AccordionItem>
<AccordionItem value="item-3">
<AccordionTrigger>
Можно ли использовать её в моём проекте?
</AccordionTrigger>
<AccordionPanel>
Конечно! Base UI бесплатна и имеет открытый исходный код.
</AccordionPanel>
</AccordionItem>
</Accordion>
);
}
Управляемый аккордеон
Открытые элементы: Нет
"use client";
import { useState } from "react";
import {
Accordion,
AccordionItem,
AccordionPanel,
AccordionTrigger,
} from "@/components/ui/accordion";
import { Button } from "@/components/ui/button";
export default function Particle() {
const [value, setValue] = useState<string[]>([]);
return (
<div className="flex w-full flex-col gap-4">
<Accordion className="w-full" onValueChange={setValue} value={value}>
<AccordionItem value="item-1">
<AccordionTrigger>Что такое Base UI?</AccordionTrigger>
<AccordionPanel>
Base UI — это библиотека качественных нестилизованных
React-компонентов для дизайн-систем и веб-приложений.
</AccordionPanel>
</AccordionItem>
<AccordionItem value="item-2">
<AccordionTrigger>С чего начать?</AccordionTrigger>
<AccordionPanel>
Откройте руководство «Быстрый старт» в документации. Если вы уже
работали с нестилизованными библиотеками, всё будет привычно.
</AccordionPanel>
</AccordionItem>
<AccordionItem value="item-3">
<AccordionTrigger>
Можно ли использовать её в моём проекте?
</AccordionTrigger>
<AccordionPanel>
Конечно! Base UI бесплатна и имеет открытый исходный код.
</AccordionPanel>
</AccordionItem>
</Accordion>
<div className="flex flex-col items-start gap-4">
<Button
onClick={() => setValue(["item-1", "item-2"])}
variant="outline"
>
Открыть первые два
</Button>
<p className="text-muted-foreground text-sm">
Открытые элементы: {value.length > 0 ? value.join(", ") : "Нет"}
</p>
</div>
</div>
);
}