Frame

Контейнер с рамкой для группировки связанной информации.

Заголовок раздела

Краткое описание раздела

Название раздела

Описание раздела

import {
  Frame,
  FrameDescription,
  FrameFooter,
  FrameHeader,
  FramePanel,
  FrameTitle,
} from "@/components/ui/frame";

export default function Particle() {
  return (
    <Frame className="w-full">
      <FrameHeader>
        <FrameTitle>Заголовок раздела</FrameTitle>
        <FrameDescription>Краткое описание раздела</FrameDescription>
      </FrameHeader>
      <FramePanel>
        <h2 className="font-semibold text-sm">Название раздела</h2>
        <p className="text-muted-foreground text-sm">Описание раздела</p>
      </FramePanel>
      <FrameFooter>
        <p className="text-muted-foreground text-sm">Подвал</p>
      </FrameFooter>
    </Frame>
  );
}

Установка


pnpm dlx shadcn@latest add @oracul/frame

Использование

import {
  Frame,
  FrameDescription,
  FrameFooter,
  FrameHeader,
  FramePanel,
  FrameTitle,
} from "@/components/ui/frame"

<Frame>
  <FrameHeader>
    <FrameTitle>Title</FrameTitle>
    <FrameDescription>Description</FrameDescription>
  </FrameHeader>
  <FramePanel>Content</FramePanel>
  <FrameFooter>Footer</FrameFooter>
</Frame>

Справочник API

Frame

Основной контейнер для группировки связанной информации.

Свойство	Тип	По умолчанию
`className`	`string`

FramePanel

Контейнер-панель для содержимого фрейма.

Свойство	Тип	По умолчанию
`className`	`string`

<FramePanel>Content</FramePanel>

FrameHeader

Секция заголовка фрейма.

Свойство	Тип	По умолчанию
`className`	`string`

<FrameHeader>
  <FrameTitle>Title</FrameTitle>
  <FrameDescription>Description</FrameDescription>
</FrameHeader>

FrameTitle

Текст заголовка для шапки фрейма.

Свойство	Тип	По умолчанию
`className`	`string`

<FrameTitle>Title</FrameTitle>

FrameDescription

Текст описания для шапки фрейма.

Свойство	Тип	По умолчанию
`className`	`string`

<FrameDescription>Description</FrameDescription>

FrameFooter

Секция подвала фрейма.

Свойство	Тип	По умолчанию
`className`	`string`

<FrameFooter>Footer</FrameFooter>

Примеры

Разделённые панели

По умолчанию несколько панелей разделяются отступами между ними.

Заголовок раздела

Краткое описание раздела

Отдельная панель

Описание раздела

Отдельная панель

Описание раздела

import {
  Frame,
  FrameDescription,
  FrameHeader,
  FramePanel,
  FrameTitle,
} from "@/components/ui/frame";

export default function Particle() {
  return (
    <Frame className="w-full">
      <FrameHeader>
        <FrameTitle>Заголовок раздела</FrameTitle>
        <FrameDescription>Краткое описание раздела</FrameDescription>
      </FrameHeader>
      <FramePanel>
        <h2 className="font-semibold text-sm">Отдельная панель</h2>
        <p className="text-muted-foreground text-sm">Описание раздела</p>
      </FramePanel>
      <FramePanel>
        <h2 className="font-semibold text-sm">Отдельная панель</h2>
        <p className="text-muted-foreground text-sm">Описание раздела</p>
      </FramePanel>
    </Frame>
  );
}

На этой странице

Установка Использование Справочник API Frame FramePanel FrameHeader FrameTitle FrameDescription FrameFooter Примеры Разделённые панели