Компонент

Виджет

Widget собирает экспортируемые обёртки WidgetDragHandle, WidgetDynamicIsland, WidgetHeader, WidgetBody и WidgetFooter. Dynamic Island раскрывает доступное меню действий; dragHandlePlacement переключает верхнюю ручку из Widget Components и встроенную ручку из widget-wrappers.

Пример

Интерактивный пример

Обзор активности

Метрика пространства

24 доски

Создано за текущий период

Последняя активность

Лог событий

Планирование продукта
12 минут назад
Контент-план
вчера
Входящие задачи
3 дня назад

Пространство

АКТИВНО

ПК

Продуктовая команда

ID: pulse-prod-04

Дорожная карта, глубокие кабинетные исследования и сквозная разработка платформы Pulse.

Быстрый старт

Настройка доски

Создайте первую рабочую область, настройте основные колонки и пригласите коллег.

Шаг 1 из 3 выполнен33%

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

Импортируйте компонент из публичной точки входа пакета.


import {
  Widget,
  WidgetBody,
  WidgetDragHandle,
  WidgetDynamicIsland,
  WidgetFooter,
  WidgetHeader,
} from "denjs-ui";
import { ChartBar, Settings, Trash2 } from "lucide-react";

const widgetActions = [
  { id: "settings", label: "Settings", icon: <Settings aria-hidden="true" /> },
  { id: "delete", label: "Delete", icon: <Trash2 aria-hidden="true" />, tone: "danger" },
] as const;

export function Example() {
  return (
    <Widget
      dragHandlePlacement="header"
	  dynamicIsland={
	    <WidgetDynamicIsland items={widgetActions} menuLabel="Widget actions" />
	  }
      title="Activity overview"
      subtitle="Workspace metric"
      footer={<span>18 active</span>}
    >
      <div className="flex items-center gap-4">
        <div className="flex size-12 items-center justify-center rounded-xl border border-warning text-warning">
          <ChartBar aria-hidden="true" className="size-5" />
        </div>
        <div>
          <p className="font-extrabold text-3xl">24 boards</p>
          <p className="text-xs text-mutedForeground">Created this period</p>
        </div>
      </div>
    </Widget>
  );
}

// The wrappers are also exported for custom compositions:
// WidgetDragHandle, WidgetDynamicIsland, WidgetHeader, WidgetBody, WidgetFooter