@wener/console
Version:
Base console UI toolkit
72 lines (71 loc) • 3.73 kB
JavaScript
import React from "react";
import { DaisyCollapsible } from "./DaisyCollapsible.js";
var meta = {
title: "daisy/DaisyCollapsible",
component: DaisyCollapsible.Root,
parameters: {
layout: "centered"
},
tags: [
"autodocs"
]
};
export default meta;
export var Basic = {
render: function () {
return /*#__PURE__*/ React.createElement(DaisyCollapsible.Root, {
className: "w-80"
}, /*#__PURE__*/ React.createElement(DaisyCollapsible.Trigger, {
className: "collapse-title font-medium"
}, "Click to expand"), /*#__PURE__*/ React.createElement(DaisyCollapsible.Panel, {
className: "collapse-content"
}, /*#__PURE__*/ React.createElement("p", null, "This content is hidden by default and shown when the collapsible is opened.")));
}
};
export var WithArrow = {
render: function () {
return /*#__PURE__*/ React.createElement(DaisyCollapsible.Root, {
className: "collapse-arrow bg-base-200 w-80"
}, /*#__PURE__*/ React.createElement(DaisyCollapsible.Trigger, {
className: "collapse-title text-xl font-medium"
}, "Collapsible with Arrow"), /*#__PURE__*/ React.createElement(DaisyCollapsible.Panel, {
className: "collapse-content"
}, /*#__PURE__*/ React.createElement("p", null, "This collapsible has an arrow indicator that rotates when opened/closed."), /*#__PURE__*/ React.createElement("p", null, "It also has a background color applied via DaisyUI classes.")));
}
};
export var WithPlus = {
render: function () {
return /*#__PURE__*/ React.createElement(DaisyCollapsible.Root, {
className: "collapse-plus bg-base-200 w-80"
}, /*#__PURE__*/ React.createElement(DaisyCollapsible.Trigger, {
className: "collapse-title text-xl font-medium"
}, "Collapsible with Plus"), /*#__PURE__*/ React.createElement(DaisyCollapsible.Panel, {
className: "collapse-content"
}, /*#__PURE__*/ React.createElement("p", null, "This collapsible uses a plus/minus indicator instead of an arrow.")));
}
};
export var Multiple = {
render: function () {
return /*#__PURE__*/ React.createElement("div", {
className: "w-80 space-y-2"
}, /*#__PURE__*/ React.createElement(DaisyCollapsible.Root, {
className: "collapse-arrow bg-base-200"
}, /*#__PURE__*/ React.createElement(DaisyCollapsible.Trigger, {
className: "collapse-title text-xl font-medium"
}, "First Item"), /*#__PURE__*/ React.createElement(DaisyCollapsible.Panel, {
className: "collapse-content"
}, /*#__PURE__*/ React.createElement("p", null, "Content for the first collapsible item."))), /*#__PURE__*/ React.createElement(DaisyCollapsible.Root, {
className: "collapse-arrow bg-base-200"
}, /*#__PURE__*/ React.createElement(DaisyCollapsible.Trigger, {
className: "collapse-title text-xl font-medium"
}, "Second Item"), /*#__PURE__*/ React.createElement(DaisyCollapsible.Panel, {
className: "collapse-content"
}, /*#__PURE__*/ React.createElement("p", null, "Content for the second collapsible item."))), /*#__PURE__*/ React.createElement(DaisyCollapsible.Root, {
className: "collapse-arrow bg-base-200"
}, /*#__PURE__*/ React.createElement(DaisyCollapsible.Trigger, {
className: "collapse-title text-xl font-medium"
}, "Third Item"), /*#__PURE__*/ React.createElement(DaisyCollapsible.Panel, {
className: "collapse-content"
}, /*#__PURE__*/ React.createElement("p", null, "Content for the third collapsible item."))));
}
};