Complete 1 fase docs components
This commit is contained in:
86
dist/sigpro-ui.cjs
vendored
86
dist/sigpro-ui.cjs
vendored
@@ -750,39 +750,55 @@ var DrawerModule = /*#__PURE__*/Object.freeze({
|
||||
Drawer: Drawer
|
||||
});
|
||||
|
||||
/** DROPDOWN */
|
||||
const Dropdown = (props, children) => {
|
||||
const { label, icon, ...rest } = props;
|
||||
const { label, icon, items, ...rest } = props;
|
||||
|
||||
return sigpro.$html(
|
||||
"div",
|
||||
{
|
||||
...rest,
|
||||
class: () => `dropdown ${val(props.class) || props.class || ""}`,
|
||||
},
|
||||
[
|
||||
sigpro.$html(
|
||||
"div",
|
||||
{
|
||||
tabindex: 0,
|
||||
role: "button",
|
||||
class: "btn m-1 flex items-center gap-2",
|
||||
},
|
||||
[
|
||||
icon ? (typeof icon === "function" ? icon() : icon) : null,
|
||||
label ? (typeof label === "function" ? label() : label) : null
|
||||
],
|
||||
),
|
||||
sigpro.$html(
|
||||
"ul",
|
||||
{
|
||||
tabindex: 0,
|
||||
class: "dropdown-content z-[50] menu p-2 shadow bg-base-100 rounded-box min-w-max border border-base-300",
|
||||
},
|
||||
[typeof children === "function" ? children() : children],
|
||||
),
|
||||
],
|
||||
);
|
||||
const renderContent = () => {
|
||||
if (items) {
|
||||
const source = typeof items === "function" ? items : () => items;
|
||||
return sigpro.$html("ul", {
|
||||
tabindex: 0,
|
||||
class: "dropdown-content z-[50] menu p-2 shadow bg-base-100 rounded-box w-52 border border-base-300"
|
||||
}, [
|
||||
sigpro.$for(source, (item) =>
|
||||
sigpro.$html("li", {}, [
|
||||
sigpro.$html("a", {
|
||||
class: item.class || "",
|
||||
onclick: (e) => {
|
||||
if (item.onclick) item.onclick(e);
|
||||
if (document.activeElement) document.activeElement.blur();
|
||||
}
|
||||
}, [
|
||||
item.icon ? sigpro.$html("span", {}, item.icon) : null,
|
||||
sigpro.$html("span", {}, item.label)
|
||||
])
|
||||
])
|
||||
)
|
||||
]);
|
||||
}
|
||||
|
||||
return sigpro.$html("div", {
|
||||
tabindex: 0,
|
||||
class: "dropdown-content z-[50] p-2 shadow bg-base-100 rounded-box min-w-max border border-base-300"
|
||||
}, [
|
||||
typeof children === "function" ? children() : children
|
||||
]);
|
||||
};
|
||||
|
||||
return sigpro.$html("div", {
|
||||
...rest,
|
||||
class: () => `dropdown ${val(props.class) || ""}`,
|
||||
}, [
|
||||
sigpro.$html("div", {
|
||||
tabindex: 0,
|
||||
role: "button",
|
||||
class: "btn m-1 flex items-center gap-2",
|
||||
}, [
|
||||
icon ? (typeof icon === "function" ? icon() : icon) : null,
|
||||
label ? (typeof label === "function" ? label() : label) : null
|
||||
]),
|
||||
renderContent()
|
||||
]);
|
||||
};
|
||||
|
||||
var DropdownModule = /*#__PURE__*/Object.freeze({
|
||||
@@ -792,18 +808,15 @@ var DropdownModule = /*#__PURE__*/Object.freeze({
|
||||
|
||||
/** FAB (Floating Action Button) */
|
||||
const Fab = (props) => {
|
||||
const { icon, label, actions = [], position = "bottom-6 right-6", ...rest } = props;
|
||||
const { icon, label, actions = [], position = "bottom-6 right-6", class: className = "", ...rest } = props;
|
||||
|
||||
return sigpro.$html(
|
||||
"div",
|
||||
{
|
||||
...rest,
|
||||
class: () => `fab fixed ${val(position)} flex flex-col-reverse items-end gap-3 z-[100] ${
|
||||
props.class || ""
|
||||
}`,
|
||||
class: `fab absolute ${position} flex flex-col-reverse items-end gap-3 z-[100] ${className}`,
|
||||
},
|
||||
[
|
||||
// Botón principal
|
||||
sigpro.$html(
|
||||
"div",
|
||||
{
|
||||
@@ -817,7 +830,6 @@ const Fab = (props) => {
|
||||
],
|
||||
),
|
||||
|
||||
// Acciones secundarias (se despliegan hacia arriba)
|
||||
...val(actions).map((act) =>
|
||||
sigpro.$html("div", { class: "flex items-center gap-3 transition-all duration-300" }, [
|
||||
act.label ? sigpro.$html("span", { class: "badge badge-ghost shadow-sm whitespace-nowrap" }, act.label) : null,
|
||||
|
||||
86
dist/sigpro-ui.esm.js
vendored
86
dist/sigpro-ui.esm.js
vendored
@@ -746,39 +746,55 @@ var DrawerModule = /*#__PURE__*/Object.freeze({
|
||||
Drawer: Drawer
|
||||
});
|
||||
|
||||
/** DROPDOWN */
|
||||
const Dropdown = (props, children) => {
|
||||
const { label, icon, ...rest } = props;
|
||||
const { label, icon, items, ...rest } = props;
|
||||
|
||||
return $html(
|
||||
"div",
|
||||
{
|
||||
...rest,
|
||||
class: () => `dropdown ${val(props.class) || props.class || ""}`,
|
||||
},
|
||||
[
|
||||
$html(
|
||||
"div",
|
||||
{
|
||||
tabindex: 0,
|
||||
role: "button",
|
||||
class: "btn m-1 flex items-center gap-2",
|
||||
},
|
||||
[
|
||||
icon ? (typeof icon === "function" ? icon() : icon) : null,
|
||||
label ? (typeof label === "function" ? label() : label) : null
|
||||
],
|
||||
),
|
||||
$html(
|
||||
"ul",
|
||||
{
|
||||
tabindex: 0,
|
||||
class: "dropdown-content z-[50] menu p-2 shadow bg-base-100 rounded-box min-w-max border border-base-300",
|
||||
},
|
||||
[typeof children === "function" ? children() : children],
|
||||
),
|
||||
],
|
||||
);
|
||||
const renderContent = () => {
|
||||
if (items) {
|
||||
const source = typeof items === "function" ? items : () => items;
|
||||
return $html("ul", {
|
||||
tabindex: 0,
|
||||
class: "dropdown-content z-[50] menu p-2 shadow bg-base-100 rounded-box w-52 border border-base-300"
|
||||
}, [
|
||||
$for(source, (item) =>
|
||||
$html("li", {}, [
|
||||
$html("a", {
|
||||
class: item.class || "",
|
||||
onclick: (e) => {
|
||||
if (item.onclick) item.onclick(e);
|
||||
if (document.activeElement) document.activeElement.blur();
|
||||
}
|
||||
}, [
|
||||
item.icon ? $html("span", {}, item.icon) : null,
|
||||
$html("span", {}, item.label)
|
||||
])
|
||||
])
|
||||
)
|
||||
]);
|
||||
}
|
||||
|
||||
return $html("div", {
|
||||
tabindex: 0,
|
||||
class: "dropdown-content z-[50] p-2 shadow bg-base-100 rounded-box min-w-max border border-base-300"
|
||||
}, [
|
||||
typeof children === "function" ? children() : children
|
||||
]);
|
||||
};
|
||||
|
||||
return $html("div", {
|
||||
...rest,
|
||||
class: () => `dropdown ${val(props.class) || ""}`,
|
||||
}, [
|
||||
$html("div", {
|
||||
tabindex: 0,
|
||||
role: "button",
|
||||
class: "btn m-1 flex items-center gap-2",
|
||||
}, [
|
||||
icon ? (typeof icon === "function" ? icon() : icon) : null,
|
||||
label ? (typeof label === "function" ? label() : label) : null
|
||||
]),
|
||||
renderContent()
|
||||
]);
|
||||
};
|
||||
|
||||
var DropdownModule = /*#__PURE__*/Object.freeze({
|
||||
@@ -788,18 +804,15 @@ var DropdownModule = /*#__PURE__*/Object.freeze({
|
||||
|
||||
/** FAB (Floating Action Button) */
|
||||
const Fab = (props) => {
|
||||
const { icon, label, actions = [], position = "bottom-6 right-6", ...rest } = props;
|
||||
const { icon, label, actions = [], position = "bottom-6 right-6", class: className = "", ...rest } = props;
|
||||
|
||||
return $html(
|
||||
"div",
|
||||
{
|
||||
...rest,
|
||||
class: () => `fab fixed ${val(position)} flex flex-col-reverse items-end gap-3 z-[100] ${
|
||||
props.class || ""
|
||||
}`,
|
||||
class: `fab absolute ${position} flex flex-col-reverse items-end gap-3 z-[100] ${className}`,
|
||||
},
|
||||
[
|
||||
// Botón principal
|
||||
$html(
|
||||
"div",
|
||||
{
|
||||
@@ -813,7 +826,6 @@ const Fab = (props) => {
|
||||
],
|
||||
),
|
||||
|
||||
// Acciones secundarias (se despliegan hacia arriba)
|
||||
...val(actions).map((act) =>
|
||||
$html("div", { class: "flex items-center gap-3 transition-all duration-300" }, [
|
||||
act.label ? $html("span", { class: "badge badge-ghost shadow-sm whitespace-nowrap" }, act.label) : null,
|
||||
|
||||
86
dist/sigpro-ui.umd.js
vendored
86
dist/sigpro-ui.umd.js
vendored
@@ -747,39 +747,55 @@ var SigProUI = (function (exports, sigpro) {
|
||||
Drawer: Drawer
|
||||
});
|
||||
|
||||
/** DROPDOWN */
|
||||
const Dropdown = (props, children) => {
|
||||
const { label, icon, ...rest } = props;
|
||||
const { label, icon, items, ...rest } = props;
|
||||
|
||||
return sigpro.$html(
|
||||
"div",
|
||||
{
|
||||
...rest,
|
||||
class: () => `dropdown ${val(props.class) || props.class || ""}`,
|
||||
},
|
||||
[
|
||||
sigpro.$html(
|
||||
"div",
|
||||
{
|
||||
tabindex: 0,
|
||||
role: "button",
|
||||
class: "btn m-1 flex items-center gap-2",
|
||||
},
|
||||
[
|
||||
icon ? (typeof icon === "function" ? icon() : icon) : null,
|
||||
label ? (typeof label === "function" ? label() : label) : null
|
||||
],
|
||||
),
|
||||
sigpro.$html(
|
||||
"ul",
|
||||
{
|
||||
tabindex: 0,
|
||||
class: "dropdown-content z-[50] menu p-2 shadow bg-base-100 rounded-box min-w-max border border-base-300",
|
||||
},
|
||||
[typeof children === "function" ? children() : children],
|
||||
),
|
||||
],
|
||||
);
|
||||
const renderContent = () => {
|
||||
if (items) {
|
||||
const source = typeof items === "function" ? items : () => items;
|
||||
return sigpro.$html("ul", {
|
||||
tabindex: 0,
|
||||
class: "dropdown-content z-[50] menu p-2 shadow bg-base-100 rounded-box w-52 border border-base-300"
|
||||
}, [
|
||||
sigpro.$for(source, (item) =>
|
||||
sigpro.$html("li", {}, [
|
||||
sigpro.$html("a", {
|
||||
class: item.class || "",
|
||||
onclick: (e) => {
|
||||
if (item.onclick) item.onclick(e);
|
||||
if (document.activeElement) document.activeElement.blur();
|
||||
}
|
||||
}, [
|
||||
item.icon ? sigpro.$html("span", {}, item.icon) : null,
|
||||
sigpro.$html("span", {}, item.label)
|
||||
])
|
||||
])
|
||||
)
|
||||
]);
|
||||
}
|
||||
|
||||
return sigpro.$html("div", {
|
||||
tabindex: 0,
|
||||
class: "dropdown-content z-[50] p-2 shadow bg-base-100 rounded-box min-w-max border border-base-300"
|
||||
}, [
|
||||
typeof children === "function" ? children() : children
|
||||
]);
|
||||
};
|
||||
|
||||
return sigpro.$html("div", {
|
||||
...rest,
|
||||
class: () => `dropdown ${val(props.class) || ""}`,
|
||||
}, [
|
||||
sigpro.$html("div", {
|
||||
tabindex: 0,
|
||||
role: "button",
|
||||
class: "btn m-1 flex items-center gap-2",
|
||||
}, [
|
||||
icon ? (typeof icon === "function" ? icon() : icon) : null,
|
||||
label ? (typeof label === "function" ? label() : label) : null
|
||||
]),
|
||||
renderContent()
|
||||
]);
|
||||
};
|
||||
|
||||
var DropdownModule = /*#__PURE__*/Object.freeze({
|
||||
@@ -789,18 +805,15 @@ var SigProUI = (function (exports, sigpro) {
|
||||
|
||||
/** FAB (Floating Action Button) */
|
||||
const Fab = (props) => {
|
||||
const { icon, label, actions = [], position = "bottom-6 right-6", ...rest } = props;
|
||||
const { icon, label, actions = [], position = "bottom-6 right-6", class: className = "", ...rest } = props;
|
||||
|
||||
return sigpro.$html(
|
||||
"div",
|
||||
{
|
||||
...rest,
|
||||
class: () => `fab fixed ${val(position)} flex flex-col-reverse items-end gap-3 z-[100] ${
|
||||
props.class || ""
|
||||
}`,
|
||||
class: `fab absolute ${position} flex flex-col-reverse items-end gap-3 z-[100] ${className}`,
|
||||
},
|
||||
[
|
||||
// Botón principal
|
||||
sigpro.$html(
|
||||
"div",
|
||||
{
|
||||
@@ -814,7 +827,6 @@ var SigProUI = (function (exports, sigpro) {
|
||||
],
|
||||
),
|
||||
|
||||
// Acciones secundarias (se despliegan hacia arriba)
|
||||
...val(actions).map((act) =>
|
||||
sigpro.$html("div", { class: "flex items-center gap-3 transition-all duration-300" }, [
|
||||
act.label ? sigpro.$html("span", { class: "badge badge-ghost shadow-sm whitespace-nowrap" }, act.label) : null,
|
||||
|
||||
2
dist/sigpro-ui.umd.min.js
vendored
2
dist/sigpro-ui.umd.min.js
vendored
File diff suppressed because one or more lines are too long
@@ -7,46 +7,43 @@
|
||||
* [Quick Reference](quick.md)
|
||||
|
||||
* **Forms & Inputs**
|
||||
* [Button](components/button.md)
|
||||
* [Input](components/input.md)
|
||||
* [Select](components/select.md)
|
||||
* [Autocomplete](components/autocomplete.md)
|
||||
* [Datepicker](components/datepicker.md)
|
||||
* [Colorpicker](components/colorpicker.md)
|
||||
* [Button](components/button.md)
|
||||
* [Checkbox](components/checkbox.md)
|
||||
* [Colorpicker](components/colorpicker.md)
|
||||
* [Datepicker](components/datepicker.md)
|
||||
* [Input](components/input.md)
|
||||
* [Radio](components/radio.md)
|
||||
* [Range](components/range.md)
|
||||
* [Rating](components/rating.md)
|
||||
* [Select](components/select.md)
|
||||
* [Swap](components/swap.md)
|
||||
|
||||
* **Data Display**
|
||||
* [Table](components/table.md)
|
||||
* [List](components/list.md)
|
||||
* [Badge](components/badge.md)
|
||||
* [Stat](components/stat.md)
|
||||
* [Timeline](components/timeline.md)
|
||||
* [Stack](components/stack.md)
|
||||
* [Indicator](components/indicator.md)
|
||||
* [List](components/list.md)
|
||||
* [Stack](components/stack.md)
|
||||
* [Stat](components/stat.md)
|
||||
* [Table](components/table.md)
|
||||
* [Timeline](components/timeline.md)
|
||||
|
||||
* **Feedback & Overlays**
|
||||
* [Alert](components/alert.md)
|
||||
* [Loading](components/loading.md)
|
||||
* [Modal](components/modal.md)
|
||||
* [Toast](components/toast.md)
|
||||
* [Loading](components/loading.md)
|
||||
* [Tooltip](components/tooltip.md)
|
||||
|
||||
* **Navigation & Layout**
|
||||
* [Navbar](components/navbar.md)
|
||||
* [Menu](components/menu.md)
|
||||
* [Drawer](components/drawer.md)
|
||||
* [Tabs](components/tabs.md)
|
||||
* [Accordion](components/accordion.md)
|
||||
* [Drawer](components/drawer.md)
|
||||
* [Dropdown](components/dropdown.md)
|
||||
* [Fieldset](components/fieldset.md)
|
||||
|
||||
* **Utilities**
|
||||
* [Fab](components/fab.md)
|
||||
* [Toast](components/toast.md)
|
||||
* [Fieldset](components/fieldset.md)
|
||||
* [Menu](components/menu.md)
|
||||
* [Navbar](components/navbar.md)
|
||||
* [Tabs](components/tabs.md)
|
||||
|
||||
* **Advanced**
|
||||
* [Reactivity Guide](advanced/reactivity.md)
|
||||
|
||||
730
docs/components/accordion.md
Normal file
730
docs/components/accordion.md
Normal file
@@ -0,0 +1,730 @@
|
||||
# Accordion
|
||||
|
||||
Collapsible accordion component for organizing content into expandable sections with DaisyUI styling.
|
||||
|
||||
## Tag
|
||||
|
||||
`Accordion`
|
||||
|
||||
## Props
|
||||
|
||||
| Prop | Type | Default | Description |
|
||||
| :----------- | :-------------------------------------- | :---------- | :----------------------------------------------- |
|
||||
| `title` | `string \| VNode \| Signal` | Required | Accordion section title |
|
||||
| `open` | `boolean \| Signal<boolean>` | `false` | Whether the accordion is expanded |
|
||||
| `name` | `string` | `-` | Group name for radio-style accordions (only one open at a time) |
|
||||
| `class` | `string` | `''` | Additional CSS classes (DaisyUI + Tailwind) |
|
||||
| `children` | `VNode \| Array<VNode>` | Required | Content to display when expanded |
|
||||
|
||||
## Live Examples
|
||||
|
||||
### Basic Accordion
|
||||
|
||||
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
|
||||
<div id="demo-basic" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const BasicDemo = () => {
|
||||
const open1 = $(false);
|
||||
const open2 = $(false);
|
||||
const open3 = $(false);
|
||||
|
||||
return Div({ class: 'flex flex-col gap-2' }, [
|
||||
Accordion({
|
||||
title: 'Section 1',
|
||||
open: open1,
|
||||
onclick: () => open1(!open1())
|
||||
}, [
|
||||
Div({ class: 'p-2' }, 'Content for section 1. This is a basic accordion section.')
|
||||
]),
|
||||
Accordion({
|
||||
title: 'Section 2',
|
||||
open: open2,
|
||||
onclick: () => open2(!open2())
|
||||
}, [
|
||||
Div({ class: 'p-2' }, 'Content for section 2. You can put any content here.')
|
||||
]),
|
||||
Accordion({
|
||||
title: 'Section 3',
|
||||
open: open3,
|
||||
onclick: () => open3(!open3())
|
||||
}, [
|
||||
Div({ class: 'p-2' }, 'Content for section 3. Accordions are great for FAQs.')
|
||||
])
|
||||
]);
|
||||
};
|
||||
$mount(BasicDemo, '#demo-basic');
|
||||
```
|
||||
|
||||
### Group Accordion (Radio Style)
|
||||
|
||||
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
|
||||
<div id="demo-group" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const GroupDemo = () => {
|
||||
const openSection = $('section1');
|
||||
|
||||
return Div({ class: 'flex flex-col gap-2' }, [
|
||||
Accordion({
|
||||
title: 'Section 1',
|
||||
name: 'group',
|
||||
open: () => openSection() === 'section1',
|
||||
onclick: () => openSection('section1')
|
||||
}, [
|
||||
Div({ class: 'p-2' }, 'Content for section 1. Only one section can be open at a time.')
|
||||
]),
|
||||
Accordion({
|
||||
title: 'Section 2',
|
||||
name: 'group',
|
||||
open: () => openSection() === 'section2',
|
||||
onclick: () => openSection('section2')
|
||||
}, [
|
||||
Div({ class: 'p-2' }, 'Content for section 2. Opening this will close section 1.')
|
||||
]),
|
||||
Accordion({
|
||||
title: 'Section 3',
|
||||
name: 'group',
|
||||
open: () => openSection() === 'section3',
|
||||
onclick: () => openSection('section3')
|
||||
}, [
|
||||
Div({ class: 'p-2' }, 'Content for section 3. This is useful for FAQ sections.')
|
||||
])
|
||||
]);
|
||||
};
|
||||
$mount(GroupDemo, '#demo-group');
|
||||
```
|
||||
|
||||
### FAQ Accordion
|
||||
|
||||
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
|
||||
<div id="demo-faq" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const FaqDemo = () => {
|
||||
const openFaq = $('faq1');
|
||||
|
||||
const faqs = [
|
||||
{ id: 'faq1', question: 'What is this component?', answer: 'This is an accordion component built with DaisyUI and Tailwind CSS for creating collapsible content sections.' },
|
||||
{ id: 'faq2', question: 'How do I use it?', answer: 'Simply import the Accordion component and pass title and children props. Use the open prop to control expansion.' },
|
||||
{ id: 'faq3', question: 'Can I have multiple open?', answer: 'Yes! By default, accordions can be opened independently. Use the name prop to create groups where only one can be open.' },
|
||||
{ id: 'faq4', question: 'Is it accessible?', answer: 'Yes, the accordion uses proper ARIA attributes and keyboard navigation support.' }
|
||||
];
|
||||
|
||||
return Div({ class: 'flex flex-col gap-2' }, faqs.map(faq =>
|
||||
Accordion({
|
||||
title: faq.question,
|
||||
name: 'faq-group',
|
||||
open: () => openFaq() === faq.id,
|
||||
onclick: () => openFaq(openFaq() === faq.id ? '' : faq.id)
|
||||
}, [
|
||||
Div({ class: 'p-2 text-sm' }, faq.answer)
|
||||
])
|
||||
));
|
||||
};
|
||||
$mount(FaqDemo, '#demo-faq');
|
||||
```
|
||||
|
||||
### With Rich Content
|
||||
|
||||
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
|
||||
<div id="demo-rich" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const RichDemo = () => {
|
||||
const open1 = $(true);
|
||||
const open2 = $(false);
|
||||
|
||||
return Div({ class: 'flex flex-col gap-2' }, [
|
||||
Accordion({
|
||||
title: Span({ class: 'flex items-center gap-2' }, ['📊', 'Statistics']),
|
||||
open: open1,
|
||||
onclick: () => open1(!open1())
|
||||
}, [
|
||||
Div({ class: 'p-2' }, [
|
||||
Div({ class: 'grid grid-cols-2 gap-4' }, [
|
||||
Div({ class: 'stat bg-base-100 rounded-lg p-3' }, [
|
||||
Div({ class: 'stat-title' }, 'Users'),
|
||||
Div({ class: 'stat-value text-lg' }, '1,234')
|
||||
]),
|
||||
Div({ class: 'stat bg-base-100 rounded-lg p-3' }, [
|
||||
Div({ class: 'stat-title' }, 'Revenue'),
|
||||
Div({ class: 'stat-value text-lg' }, '$45,678')
|
||||
]),
|
||||
Div({ class: 'stat bg-base-100 rounded-lg p-3' }, [
|
||||
Div({ class: 'stat-title' }, 'Growth'),
|
||||
Div({ class: 'stat-value text-lg text-success' }, '+23%')
|
||||
]),
|
||||
Div({ class: 'stat bg-base-100 rounded-lg p-3' }, [
|
||||
Div({ class: 'stat-title' }, 'Active'),
|
||||
Div({ class: 'stat-value text-lg' }, '89%')
|
||||
])
|
||||
])
|
||||
])
|
||||
]),
|
||||
Accordion({
|
||||
title: Span({ class: 'flex items-center gap-2' }, ['👥', 'Team Members']),
|
||||
open: open2,
|
||||
onclick: () => open2(!open2())
|
||||
}, [
|
||||
Div({ class: 'p-2 space-y-2' }, [
|
||||
Div({ class: 'flex items-center gap-3 p-2 hover:bg-base-100 rounded-lg' }, [
|
||||
Div({ class: 'avatar placeholder' }, [
|
||||
Div({ class: 'bg-primary text-primary-content rounded-full w-10 h-10 flex items-center justify-center' }, 'JD')
|
||||
]),
|
||||
Div({ class: 'flex-1' }, [
|
||||
Div({ class: 'font-medium' }, 'John Doe'),
|
||||
Div({ class: 'text-sm opacity-70' }, 'Developer')
|
||||
])
|
||||
]),
|
||||
Div({ class: 'flex items-center gap-3 p-2 hover:bg-base-100 rounded-lg' }, [
|
||||
Div({ class: 'avatar placeholder' }, [
|
||||
Div({ class: 'bg-secondary text-secondary-content rounded-full w-10 h-10 flex items-center justify-center' }, 'JS')
|
||||
]),
|
||||
Div({ class: 'flex-1' }, [
|
||||
Div({ class: 'font-medium' }, 'Jane Smith'),
|
||||
Div({ class: 'text-sm opacity-70' }, 'Designer')
|
||||
])
|
||||
])
|
||||
])
|
||||
])
|
||||
]);
|
||||
};
|
||||
$mount(RichDemo, '#demo-rich');
|
||||
```
|
||||
|
||||
### Form Accordion
|
||||
|
||||
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
|
||||
<div id="demo-form" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const FormAccordion = () => {
|
||||
const openStep = $('step1');
|
||||
const formData = $({
|
||||
name: '',
|
||||
email: '',
|
||||
address: '',
|
||||
payment: 'credit'
|
||||
});
|
||||
|
||||
const updateField = (field, value) => {
|
||||
formData({ ...formData(), [field]: value });
|
||||
};
|
||||
|
||||
const nextStep = () => {
|
||||
if (openStep() === 'step1') openStep('step2');
|
||||
else if (openStep() === 'step2') openStep('step3');
|
||||
};
|
||||
|
||||
const prevStep = () => {
|
||||
if (openStep() === 'step2') openStep('step1');
|
||||
else if (openStep() === 'step3') openStep('step2');
|
||||
};
|
||||
|
||||
const handleSubmit = () => {
|
||||
Toast('Form submitted!', 'alert-success', 2000);
|
||||
console.log(formData());
|
||||
};
|
||||
|
||||
return Div({ class: 'flex flex-col gap-2' }, [
|
||||
Accordion({
|
||||
title: Span({ class: 'flex items-center gap-2' }, ['1️⃣', 'Personal Information']),
|
||||
name: 'form-steps',
|
||||
open: () => openStep() === 'step1',
|
||||
onclick: () => openStep('step1')
|
||||
}, [
|
||||
Div({ class: 'p-4 space-y-4' }, [
|
||||
Input({
|
||||
label: 'Full Name',
|
||||
value: () => formData().name,
|
||||
placeholder: 'Enter your name',
|
||||
oninput: (e) => updateField('name', e.target.value)
|
||||
}),
|
||||
Input({
|
||||
label: 'Email',
|
||||
type: 'email',
|
||||
value: () => formData().email,
|
||||
placeholder: 'email@example.com',
|
||||
oninput: (e) => updateField('email', e.target.value)
|
||||
}),
|
||||
Div({ class: 'flex justify-end mt-2' }, [
|
||||
Button({
|
||||
class: 'btn btn-primary btn-sm',
|
||||
onclick: nextStep,
|
||||
disabled: () => !formData().name || !formData().email
|
||||
}, 'Next →')
|
||||
])
|
||||
])
|
||||
]),
|
||||
Accordion({
|
||||
title: Span({ class: 'flex items-center gap-2' }, ['2️⃣', 'Address']),
|
||||
name: 'form-steps',
|
||||
open: () => openStep() === 'step2',
|
||||
onclick: () => openStep('step2')
|
||||
}, [
|
||||
Div({ class: 'p-4 space-y-4' }, [
|
||||
Input({
|
||||
label: 'Address',
|
||||
value: () => formData().address,
|
||||
placeholder: 'Street address',
|
||||
oninput: (e) => updateField('address', e.target.value)
|
||||
}),
|
||||
Div({ class: 'flex justify-between mt-2' }, [
|
||||
Button({ class: 'btn btn-ghost btn-sm', onclick: prevStep }, '← Back'),
|
||||
Button({
|
||||
class: 'btn btn-primary btn-sm',
|
||||
onclick: nextStep
|
||||
}, 'Next →')
|
||||
])
|
||||
])
|
||||
]),
|
||||
Accordion({
|
||||
title: Span({ class: 'flex items-center gap-2' }, ['3️⃣', 'Payment']),
|
||||
name: 'form-steps',
|
||||
open: () => openStep() === 'step3',
|
||||
onclick: () => openStep('step3')
|
||||
}, [
|
||||
Div({ class: 'p-4 space-y-4' }, [
|
||||
Div({ class: 'flex flex-col gap-2' }, [
|
||||
Radio({
|
||||
label: 'Credit Card',
|
||||
value: () => formData().payment,
|
||||
radioValue: 'credit',
|
||||
onclick: () => updateField('payment', 'credit')
|
||||
}),
|
||||
Radio({
|
||||
label: 'PayPal',
|
||||
value: () => formData().payment,
|
||||
radioValue: 'paypal',
|
||||
onclick: () => updateField('payment', 'paypal')
|
||||
}),
|
||||
Radio({
|
||||
label: 'Bank Transfer',
|
||||
value: () => formData().payment,
|
||||
radioValue: 'bank',
|
||||
onclick: () => updateField('payment', 'bank')
|
||||
})
|
||||
]),
|
||||
Div({ class: 'flex justify-between mt-2' }, [
|
||||
Button({ class: 'btn btn-ghost btn-sm', onclick: prevStep }, '← Back'),
|
||||
Button({ class: 'btn btn-success btn-sm', onclick: handleSubmit }, 'Submit')
|
||||
])
|
||||
])
|
||||
])
|
||||
]);
|
||||
};
|
||||
$mount(FormAccordion, '#demo-form');
|
||||
```
|
||||
|
||||
### All Variants
|
||||
|
||||
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
|
||||
<div id="demo-variants" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-col gap-6"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const VariantsDemo = () => {
|
||||
const open1 = $(true);
|
||||
const open2 = $(false);
|
||||
const open3 = $(false);
|
||||
|
||||
return Div({ class: 'flex flex-col gap-4' }, [
|
||||
Div({ class: 'text-sm font-bold' }, 'Default Accordion'),
|
||||
Div({ class: 'flex flex-col gap-2' }, [
|
||||
Accordion({ title: 'Default style', open: open1, onclick: () => open1(!open1()) }, [
|
||||
Div({ class: 'p-2' }, 'Default accordion with standard styling.')
|
||||
])
|
||||
]),
|
||||
|
||||
Div({ class: 'text-sm font-bold mt-2' }, 'Custom Styling'),
|
||||
Div({ class: 'flex flex-col gap-2' }, [
|
||||
Accordion({
|
||||
title: Span({ class: 'text-primary font-bold' }, 'Primary Title'),
|
||||
open: open2,
|
||||
onclick: () => open2(!open2()),
|
||||
class: 'bg-primary/5 border-primary/20'
|
||||
}, [
|
||||
Div({ class: 'p-2' }, 'Accordion with custom styling and primary color.')
|
||||
])
|
||||
]),
|
||||
|
||||
Div({ class: 'text-sm font-bold mt-2' }, 'With Icons'),
|
||||
Div({ class: 'flex flex-col gap-2' }, [
|
||||
Accordion({
|
||||
title: Span({ class: 'flex items-center gap-2' }, ['✨', 'Featured Content']),
|
||||
open: open3,
|
||||
onclick: () => open3(!open3())
|
||||
}, [
|
||||
Div({ class: 'p-2' }, 'Accordion with emoji icons in the title.')
|
||||
])
|
||||
])
|
||||
]);
|
||||
};
|
||||
$mount(VariantsDemo, '#demo-variants');
|
||||
```
|
||||
|
||||
<script>
|
||||
(function() {
|
||||
const initAccordionExamples = () => {
|
||||
|
||||
// 1. Basic Accordion
|
||||
const basicTarget = document.querySelector('#demo-basic');
|
||||
if (basicTarget && !basicTarget.hasChildNodes()) {
|
||||
const BasicDemo = () => {
|
||||
const open1 = $(false);
|
||||
const open2 = $(false);
|
||||
const open3 = $(false);
|
||||
|
||||
return Div({ class: 'flex flex-col gap-2' }, [
|
||||
Accordion({
|
||||
title: 'Section 1',
|
||||
open: open1,
|
||||
onclick: () => open1(!open1())
|
||||
}, [
|
||||
Div({ class: 'p-2' }, 'Content for section 1. This is a basic accordion section.')
|
||||
]),
|
||||
Accordion({
|
||||
title: 'Section 2',
|
||||
open: open2,
|
||||
onclick: () => open2(!open2())
|
||||
}, [
|
||||
Div({ class: 'p-2' }, 'Content for section 2. You can put any content here.')
|
||||
]),
|
||||
Accordion({
|
||||
title: 'Section 3',
|
||||
open: open3,
|
||||
onclick: () => open3(!open3())
|
||||
}, [
|
||||
Div({ class: 'p-2' }, 'Content for section 3. Accordions are great for FAQs.')
|
||||
])
|
||||
]);
|
||||
};
|
||||
$mount(BasicDemo, basicTarget);
|
||||
}
|
||||
|
||||
// 2. Group Accordion (Radio Style)
|
||||
const groupTarget = document.querySelector('#demo-group');
|
||||
if (groupTarget && !groupTarget.hasChildNodes()) {
|
||||
const GroupDemo = () => {
|
||||
const openSection = $('section1');
|
||||
|
||||
return Div({ class: 'flex flex-col gap-2' }, [
|
||||
Accordion({
|
||||
title: 'Section 1',
|
||||
name: 'group',
|
||||
open: () => openSection() === 'section1',
|
||||
onclick: () => openSection('section1')
|
||||
}, [
|
||||
Div({ class: 'p-2' }, 'Content for section 1. Only one section can be open at a time.')
|
||||
]),
|
||||
Accordion({
|
||||
title: 'Section 2',
|
||||
name: 'group',
|
||||
open: () => openSection() === 'section2',
|
||||
onclick: () => openSection('section2')
|
||||
}, [
|
||||
Div({ class: 'p-2' }, 'Content for section 2. Opening this will close section 1.')
|
||||
]),
|
||||
Accordion({
|
||||
title: 'Section 3',
|
||||
name: 'group',
|
||||
open: () => openSection() === 'section3',
|
||||
onclick: () => openSection('section3')
|
||||
}, [
|
||||
Div({ class: 'p-2' }, 'Content for section 3. This is useful for FAQ sections.')
|
||||
])
|
||||
]);
|
||||
};
|
||||
$mount(GroupDemo, groupTarget);
|
||||
}
|
||||
|
||||
// 3. FAQ Accordion
|
||||
const faqTarget = document.querySelector('#demo-faq');
|
||||
if (faqTarget && !faqTarget.hasChildNodes()) {
|
||||
const FaqDemo = () => {
|
||||
const openFaq = $('faq1');
|
||||
|
||||
const faqs = [
|
||||
{ id: 'faq1', question: 'What is this component?', answer: 'This is an accordion component built with DaisyUI and Tailwind CSS for creating collapsible content sections.' },
|
||||
{ id: 'faq2', question: 'How do I use it?', answer: 'Simply import the Accordion component and pass title and children props. Use the open prop to control expansion.' },
|
||||
{ id: 'faq3', question: 'Can I have multiple open?', answer: 'Yes! By default, accordions can be opened independently. Use the name prop to create groups where only one can be open.' },
|
||||
{ id: 'faq4', question: 'Is it accessible?', answer: 'Yes, the accordion uses proper ARIA attributes and keyboard navigation support.' }
|
||||
];
|
||||
|
||||
return Div({ class: 'flex flex-col gap-2' }, faqs.map(faq =>
|
||||
Accordion({
|
||||
title: faq.question,
|
||||
name: 'faq-group',
|
||||
open: () => openFaq() === faq.id,
|
||||
onclick: () => openFaq(openFaq() === faq.id ? '' : faq.id)
|
||||
}, [
|
||||
Div({ class: 'p-2 text-sm' }, faq.answer)
|
||||
])
|
||||
));
|
||||
};
|
||||
$mount(FaqDemo, faqTarget);
|
||||
}
|
||||
|
||||
// 4. With Rich Content
|
||||
const richTarget = document.querySelector('#demo-rich');
|
||||
if (richTarget && !richTarget.hasChildNodes()) {
|
||||
const RichDemo = () => {
|
||||
const open1 = $(true);
|
||||
const open2 = $(false);
|
||||
|
||||
return Div({ class: 'flex flex-col gap-2' }, [
|
||||
Accordion({
|
||||
title: Span({ class: 'flex items-center gap-2' }, ['📊', 'Statistics']),
|
||||
open: open1,
|
||||
onclick: () => open1(!open1())
|
||||
}, [
|
||||
Div({ class: 'p-2' }, [
|
||||
Div({ class: 'grid grid-cols-2 gap-4' }, [
|
||||
Div({ class: 'stat bg-base-100 rounded-lg p-3' }, [
|
||||
Div({ class: 'stat-title' }, 'Users'),
|
||||
Div({ class: 'stat-value text-lg' }, '1,234')
|
||||
]),
|
||||
Div({ class: 'stat bg-base-100 rounded-lg p-3' }, [
|
||||
Div({ class: 'stat-title' }, 'Revenue'),
|
||||
Div({ class: 'stat-value text-lg' }, '$45,678')
|
||||
]),
|
||||
Div({ class: 'stat bg-base-100 rounded-lg p-3' }, [
|
||||
Div({ class: 'stat-title' }, 'Growth'),
|
||||
Div({ class: 'stat-value text-lg text-success' }, '+23%')
|
||||
]),
|
||||
Div({ class: 'stat bg-base-100 rounded-lg p-3' }, [
|
||||
Div({ class: 'stat-title' }, 'Active'),
|
||||
Div({ class: 'stat-value text-lg' }, '89%')
|
||||
])
|
||||
])
|
||||
])
|
||||
]),
|
||||
Accordion({
|
||||
title: Span({ class: 'flex items-center gap-2' }, ['👥', 'Team Members']),
|
||||
open: open2,
|
||||
onclick: () => open2(!open2())
|
||||
}, [
|
||||
Div({ class: 'p-2 space-y-2' }, [
|
||||
Div({ class: 'flex items-center gap-3 p-2 hover:bg-base-100 rounded-lg' }, [
|
||||
Div({ class: 'avatar placeholder' }, [
|
||||
Div({ class: 'bg-primary text-primary-content rounded-full w-10 h-10 flex items-center justify-center' }, 'JD')
|
||||
]),
|
||||
Div({ class: 'flex-1' }, [
|
||||
Div({ class: 'font-medium' }, 'John Doe'),
|
||||
Div({ class: 'text-sm opacity-70' }, 'Developer')
|
||||
])
|
||||
]),
|
||||
Div({ class: 'flex items-center gap-3 p-2 hover:bg-base-100 rounded-lg' }, [
|
||||
Div({ class: 'avatar placeholder' }, [
|
||||
Div({ class: 'bg-secondary text-secondary-content rounded-full w-10 h-10 flex items-center justify-center' }, 'JS')
|
||||
]),
|
||||
Div({ class: 'flex-1' }, [
|
||||
Div({ class: 'font-medium' }, 'Jane Smith'),
|
||||
Div({ class: 'text-sm opacity-70' }, 'Designer')
|
||||
])
|
||||
])
|
||||
])
|
||||
])
|
||||
]);
|
||||
};
|
||||
$mount(RichDemo, richTarget);
|
||||
}
|
||||
|
||||
// 5. Form Accordion
|
||||
const formTarget = document.querySelector('#demo-form');
|
||||
if (formTarget && !formTarget.hasChildNodes()) {
|
||||
const FormAccordion = () => {
|
||||
const openStep = $('step1');
|
||||
const formData = $({
|
||||
name: '',
|
||||
email: '',
|
||||
address: '',
|
||||
payment: 'credit'
|
||||
});
|
||||
|
||||
const updateField = (field, value) => {
|
||||
formData({ ...formData(), [field]: value });
|
||||
};
|
||||
|
||||
const nextStep = () => {
|
||||
if (openStep() === 'step1') openStep('step2');
|
||||
else if (openStep() === 'step2') openStep('step3');
|
||||
};
|
||||
|
||||
const prevStep = () => {
|
||||
if (openStep() === 'step2') openStep('step1');
|
||||
else if (openStep() === 'step3') openStep('step2');
|
||||
};
|
||||
|
||||
const handleSubmit = () => {
|
||||
Toast('Form submitted!', 'alert-success', 2000);
|
||||
console.log(formData());
|
||||
};
|
||||
|
||||
return Div({ class: 'flex flex-col gap-2' }, [
|
||||
Accordion({
|
||||
title: Span({ class: 'flex items-center gap-2' }, ['1️⃣', 'Personal Information']),
|
||||
name: 'form-steps',
|
||||
open: () => openStep() === 'step1',
|
||||
onclick: () => openStep('step1')
|
||||
}, [
|
||||
Div({ class: 'p-4 space-y-4' }, [
|
||||
Input({
|
||||
label: 'Full Name',
|
||||
value: () => formData().name,
|
||||
placeholder: 'Enter your name',
|
||||
oninput: (e) => updateField('name', e.target.value)
|
||||
}),
|
||||
Input({
|
||||
label: 'Email',
|
||||
type: 'email',
|
||||
value: () => formData().email,
|
||||
placeholder: 'email@example.com',
|
||||
oninput: (e) => updateField('email', e.target.value)
|
||||
}),
|
||||
Div({ class: 'flex justify-end mt-2' }, [
|
||||
Button({
|
||||
class: 'btn btn-primary btn-sm',
|
||||
onclick: nextStep,
|
||||
disabled: () => !formData().name || !formData().email
|
||||
}, 'Next →')
|
||||
])
|
||||
])
|
||||
]),
|
||||
Accordion({
|
||||
title: Span({ class: 'flex items-center gap-2' }, ['2️⃣', 'Address']),
|
||||
name: 'form-steps',
|
||||
open: () => openStep() === 'step2',
|
||||
onclick: () => openStep('step2')
|
||||
}, [
|
||||
Div({ class: 'p-4 space-y-4' }, [
|
||||
Input({
|
||||
label: 'Address',
|
||||
value: () => formData().address,
|
||||
placeholder: 'Street address',
|
||||
oninput: (e) => updateField('address', e.target.value)
|
||||
}),
|
||||
Div({ class: 'flex justify-between mt-2' }, [
|
||||
Button({ class: 'btn btn-ghost btn-sm', onclick: prevStep }, '← Back'),
|
||||
Button({
|
||||
class: 'btn btn-primary btn-sm',
|
||||
onclick: nextStep
|
||||
}, 'Next →')
|
||||
])
|
||||
])
|
||||
]),
|
||||
Accordion({
|
||||
title: Span({ class: 'flex items-center gap-2' }, ['3️⃣', 'Payment']),
|
||||
name: 'form-steps',
|
||||
open: () => openStep() === 'step3',
|
||||
onclick: () => openStep('step3')
|
||||
}, [
|
||||
Div({ class: 'p-4 space-y-4' }, [
|
||||
Div({ class: 'flex flex-col gap-2' }, [
|
||||
Radio({
|
||||
label: 'Credit Card',
|
||||
value: () => formData().payment,
|
||||
radioValue: 'credit',
|
||||
onclick: () => updateField('payment', 'credit')
|
||||
}),
|
||||
Radio({
|
||||
label: 'PayPal',
|
||||
value: () => formData().payment,
|
||||
radioValue: 'paypal',
|
||||
onclick: () => updateField('payment', 'paypal')
|
||||
}),
|
||||
Radio({
|
||||
label: 'Bank Transfer',
|
||||
value: () => formData().payment,
|
||||
radioValue: 'bank',
|
||||
onclick: () => updateField('payment', 'bank')
|
||||
})
|
||||
]),
|
||||
Div({ class: 'flex justify-between mt-2' }, [
|
||||
Button({ class: 'btn btn-ghost btn-sm', onclick: prevStep }, '← Back'),
|
||||
Button({ class: 'btn btn-success btn-sm', onclick: handleSubmit }, 'Submit')
|
||||
])
|
||||
])
|
||||
])
|
||||
]);
|
||||
};
|
||||
$mount(FormAccordion, formTarget);
|
||||
}
|
||||
|
||||
// 6. All Variants
|
||||
const variantsTarget = document.querySelector('#demo-variants');
|
||||
if (variantsTarget && !variantsTarget.hasChildNodes()) {
|
||||
const VariantsDemo = () => {
|
||||
const open1 = $(true);
|
||||
const open2 = $(false);
|
||||
const open3 = $(false);
|
||||
|
||||
return Div({ class: 'flex flex-col gap-4' }, [
|
||||
Div({ class: 'text-sm font-bold' }, 'Default Accordion'),
|
||||
Div({ class: 'flex flex-col gap-2' }, [
|
||||
Accordion({ title: 'Default style', open: open1, onclick: () => open1(!open1()) }, [
|
||||
Div({ class: 'p-2' }, 'Default accordion with standard styling.')
|
||||
])
|
||||
]),
|
||||
|
||||
Div({ class: 'text-sm font-bold mt-2' }, 'Custom Styling'),
|
||||
Div({ class: 'flex flex-col gap-2' }, [
|
||||
Accordion({
|
||||
title: Span({ class: 'text-primary font-bold' }, 'Primary Title'),
|
||||
open: open2,
|
||||
onclick: () => open2(!open2()),
|
||||
class: 'bg-primary/5 border-primary/20'
|
||||
}, [
|
||||
Div({ class: 'p-2' }, 'Accordion with custom styling and primary color.')
|
||||
])
|
||||
]),
|
||||
|
||||
Div({ class: 'text-sm font-bold mt-2' }, 'With Icons'),
|
||||
Div({ class: 'flex flex-col gap-2' }, [
|
||||
Accordion({
|
||||
title: Span({ class: 'flex items-center gap-2' }, ['✨', 'Featured Content']),
|
||||
open: open3,
|
||||
onclick: () => open3(!open3())
|
||||
}, [
|
||||
Div({ class: 'p-2' }, 'Accordion with emoji icons in the title.')
|
||||
])
|
||||
])
|
||||
]);
|
||||
};
|
||||
$mount(VariantsDemo, variantsTarget);
|
||||
}
|
||||
};
|
||||
|
||||
initAccordionExamples();
|
||||
|
||||
if (window.$docsify) {
|
||||
window.$docsify.plugins = [].concat(window.$docsify.plugins || [], (hook) => {
|
||||
hook.doneEach(initAccordionExamples);
|
||||
});
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
918
docs/components/drawer.md
Normal file
918
docs/components/drawer.md
Normal file
@@ -0,0 +1,918 @@
|
||||
# Drawer
|
||||
|
||||
Drawer component for creating off-canvas side panels with overlay and toggle functionality.
|
||||
|
||||
## Tag
|
||||
|
||||
`Drawer`
|
||||
|
||||
## Props
|
||||
|
||||
| Prop | Type | Default | Description |
|
||||
| :----------- | :--------------------------- | :---------- | :----------------------------------------------- |
|
||||
| `id` | `string` | Required | Unique identifier for the drawer |
|
||||
| `open` | `boolean \| Signal<boolean>` | `false` | Drawer open state |
|
||||
| `side` | `VNode` | Required | Content to display in the drawer panel |
|
||||
| `content` | `VNode` | Required | Main page content |
|
||||
| `class` | `string` | `''` | Additional CSS classes (DaisyUI + Tailwind) |
|
||||
|
||||
## Live Examples
|
||||
|
||||
### Basic Drawer
|
||||
|
||||
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
|
||||
<div id="demo-basic" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const BasicDemo = () => {
|
||||
const isOpen = $(false);
|
||||
|
||||
return Drawer({
|
||||
id: 'basic-drawer',
|
||||
open: isOpen,
|
||||
side: Div({ class: 'p-4' }, [
|
||||
Div({ class: 'text-lg font-bold mb-4' }, 'Menu'),
|
||||
Div({ class: 'flex flex-col gap-2' }, [
|
||||
Button({ class: 'btn btn-ghost justify-start' }, 'Home'),
|
||||
Button({ class: 'btn btn-ghost justify-start' }, 'About'),
|
||||
Button({ class: 'btn btn-ghost justify-start' }, 'Contact')
|
||||
])
|
||||
]),
|
||||
content: Div({ class: 'p-4 text-center' }, [
|
||||
Button({
|
||||
class: 'btn btn-primary',
|
||||
onclick: () => isOpen(true)
|
||||
}, 'Open Drawer')
|
||||
])
|
||||
});
|
||||
};
|
||||
$mount(BasicDemo, '#demo-basic');
|
||||
```
|
||||
|
||||
### Navigation Drawer
|
||||
|
||||
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
|
||||
<div id="demo-nav" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const NavDrawer = () => {
|
||||
const isOpen = $(false);
|
||||
const activePage = $('home');
|
||||
|
||||
const pages = {
|
||||
home: 'Welcome to the Home Page!',
|
||||
about: 'About Us - Learn more about our company',
|
||||
services: 'Our Services - What we offer',
|
||||
contact: 'Contact Us - Get in touch'
|
||||
};
|
||||
|
||||
return Drawer({
|
||||
id: 'nav-drawer',
|
||||
open: isOpen,
|
||||
side: Div({ class: 'p-4 w-64' }, [
|
||||
Div({ class: 'text-xl font-bold mb-6' }, 'MyApp'),
|
||||
Div({ class: 'flex flex-col gap-1' }, [
|
||||
Button({
|
||||
class: `btn btn-ghost justify-start ${activePage() === 'home' ? 'btn-active' : ''}`,
|
||||
onclick: () => {
|
||||
activePage('home');
|
||||
isOpen(false);
|
||||
}
|
||||
}, '🏠 Home'),
|
||||
Button({
|
||||
class: `btn btn-ghost justify-start ${activePage() === 'about' ? 'btn-active' : ''}`,
|
||||
onclick: () => {
|
||||
activePage('about');
|
||||
isOpen(false);
|
||||
}
|
||||
}, 'ℹ️ About'),
|
||||
Button({
|
||||
class: `btn btn-ghost justify-start ${activePage() === 'services' ? 'btn-active' : ''}`,
|
||||
onclick: () => {
|
||||
activePage('services');
|
||||
isOpen(false);
|
||||
}
|
||||
}, '⚙️ Services'),
|
||||
Button({
|
||||
class: `btn btn-ghost justify-start ${activePage() === 'contact' ? 'btn-active' : ''}`,
|
||||
onclick: () => {
|
||||
activePage('contact');
|
||||
isOpen(false);
|
||||
}
|
||||
}, '📧 Contact')
|
||||
])
|
||||
]),
|
||||
content: Div({ class: 'p-4' }, [
|
||||
Div({ class: 'flex justify-between items-center mb-4' }, [
|
||||
Button({
|
||||
class: 'btn btn-ghost btn-circle',
|
||||
onclick: () => isOpen(true)
|
||||
}, '☰'),
|
||||
Span({ class: 'text-lg font-bold' }, 'MyApp')
|
||||
]),
|
||||
Div({ class: 'card bg-base-200 shadow-lg' }, [
|
||||
Div({ class: 'card-body' }, [
|
||||
Div({ class: 'text-2xl font-bold mb-2' }, () => activePage().charAt(0).toUpperCase() + activePage().slice(1)),
|
||||
Div({ class: 'text-lg' }, () => pages[activePage()])
|
||||
])
|
||||
])
|
||||
])
|
||||
});
|
||||
};
|
||||
$mount(NavDrawer, '#demo-nav');
|
||||
```
|
||||
|
||||
### Settings Drawer
|
||||
|
||||
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
|
||||
<div id="demo-settings" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const SettingsDrawer = () => {
|
||||
const isOpen = $(false);
|
||||
const darkMode = $(false);
|
||||
const notifications = $(true);
|
||||
const autoSave = $(false);
|
||||
|
||||
return Drawer({
|
||||
id: 'settings-drawer',
|
||||
open: isOpen,
|
||||
side: Div({ class: 'p-4 w-80' }, [
|
||||
Div({ class: 'flex justify-between items-center mb-6' }, [
|
||||
Span({ class: 'text-xl font-bold' }, 'Settings'),
|
||||
Button({
|
||||
class: 'btn btn-ghost btn-circle btn-sm',
|
||||
onclick: () => isOpen(false)
|
||||
}, '✕')
|
||||
]),
|
||||
Div({ class: 'flex flex-col gap-4' }, [
|
||||
Div({ class: 'flex justify-between items-center' }, [
|
||||
Span({}, 'Dark Mode'),
|
||||
Swap({
|
||||
value: darkMode,
|
||||
on: "🌙",
|
||||
off: "☀️",
|
||||
onclick: () => darkMode(!darkMode())
|
||||
})
|
||||
]),
|
||||
Div({ class: 'flex justify-between items-center' }, [
|
||||
Span({}, 'Notifications'),
|
||||
Swap({
|
||||
value: notifications,
|
||||
on: "🔔",
|
||||
off: "🔕",
|
||||
onclick: () => notifications(!notifications())
|
||||
})
|
||||
]),
|
||||
Div({ class: 'flex justify-between items-center' }, [
|
||||
Span({}, 'Auto Save'),
|
||||
Swap({
|
||||
value: autoSave,
|
||||
on: "✅",
|
||||
off: "⭕",
|
||||
onclick: () => autoSave(!autoSave())
|
||||
})
|
||||
])
|
||||
]),
|
||||
Div({ class: 'divider my-4' }),
|
||||
Div({ class: 'flex gap-2' }, [
|
||||
Button({
|
||||
class: 'btn btn-primary flex-1',
|
||||
onclick: () => {
|
||||
isOpen(false);
|
||||
Toast('Settings saved!', 'alert-success', 2000);
|
||||
}
|
||||
}, 'Save'),
|
||||
Button({
|
||||
class: 'btn btn-ghost flex-1',
|
||||
onclick: () => isOpen(false)
|
||||
}, 'Cancel')
|
||||
])
|
||||
]),
|
||||
content: Div({ class: 'p-4' }, [
|
||||
Div({ class: 'flex justify-between items-center' }, [
|
||||
Span({ class: 'text-lg font-bold' }, 'Dashboard'),
|
||||
Button({
|
||||
class: 'btn btn-ghost btn-circle',
|
||||
onclick: () => isOpen(true)
|
||||
}, '⚙️')
|
||||
]),
|
||||
Div({ class: 'mt-4 grid grid-cols-2 gap-4' }, [
|
||||
Div({ class: 'stat bg-base-200 rounded-lg p-4' }, [
|
||||
Div({ class: 'stat-title' }, 'Users'),
|
||||
Div({ class: 'stat-value' }, '1,234')
|
||||
]),
|
||||
Div({ class: 'stat bg-base-200 rounded-lg p-4' }, [
|
||||
Div({ class: 'stat-title' }, 'Revenue'),
|
||||
Div({ class: 'stat-value' }, '$45K')
|
||||
])
|
||||
])
|
||||
])
|
||||
});
|
||||
};
|
||||
$mount(SettingsDrawer, '#demo-settings');
|
||||
```
|
||||
|
||||
### Cart Drawer
|
||||
|
||||
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
|
||||
<div id="demo-cart" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const CartDrawer = () => {
|
||||
const isOpen = $(false);
|
||||
const cart = $([
|
||||
{ id: 1, name: 'Product 1', price: 29, quantity: 2 },
|
||||
{ id: 2, name: 'Product 2', price: 49, quantity: 1 }
|
||||
]);
|
||||
|
||||
const updateQuantity = (id, delta) => {
|
||||
cart(cart().map(item => {
|
||||
if (item.id === id) {
|
||||
const newQty = Math.max(0, item.quantity + delta);
|
||||
return newQty === 0 ? null : { ...item, quantity: newQty };
|
||||
}
|
||||
return item;
|
||||
}).filter(Boolean));
|
||||
};
|
||||
|
||||
const total = () => cart().reduce((sum, item) => sum + (item.price * item.quantity), 0);
|
||||
|
||||
return Drawer({
|
||||
id: 'cart-drawer',
|
||||
open: isOpen,
|
||||
side: Div({ class: 'flex flex-col h-full' }, [
|
||||
Div({ class: 'p-4 border-b border-base-300' }, [
|
||||
Div({ class: 'flex justify-between items-center' }, [
|
||||
Span({ class: 'text-xl font-bold' }, `Cart (${cart().length} items)`),
|
||||
Button({
|
||||
class: 'btn btn-ghost btn-circle btn-sm',
|
||||
onclick: () => isOpen(false)
|
||||
}, '✕')
|
||||
])
|
||||
]),
|
||||
Div({ class: 'flex-1 overflow-y-auto p-4' }, cart().length === 0
|
||||
? Div({ class: 'text-center text-gray-500 mt-8' }, 'Your cart is empty')
|
||||
: Div({ class: 'flex flex-col gap-3' }, cart().map(item =>
|
||||
Div({ class: 'flex gap-3 items-center p-2 bg-base-200 rounded-lg' }, [
|
||||
Div({ class: 'flex-1' }, [
|
||||
Div({ class: 'font-medium' }, item.name),
|
||||
Div({ class: 'text-sm' }, `$${item.price} each`)
|
||||
]),
|
||||
Div({ class: 'flex items-center gap-2' }, [
|
||||
Button({
|
||||
class: 'btn btn-xs btn-circle',
|
||||
onclick: () => updateQuantity(item.id, -1)
|
||||
}, '-'),
|
||||
Span({ class: 'w-8 text-center' }, item.quantity),
|
||||
Button({
|
||||
class: 'btn btn-xs btn-circle',
|
||||
onclick: () => updateQuantity(item.id, 1)
|
||||
}, '+')
|
||||
]),
|
||||
Span({ class: 'font-bold w-16 text-right' }, `$${item.price * item.quantity}`)
|
||||
])
|
||||
))
|
||||
),
|
||||
Div({ class: 'p-4 border-t border-base-300' }, [
|
||||
Div({ class: 'flex justify-between items-center mb-4' }, [
|
||||
Span({ class: 'font-bold' }, 'Total'),
|
||||
Span({ class: 'text-xl font-bold' }, () => `$${total()}`)
|
||||
]),
|
||||
Button({
|
||||
class: 'btn btn-primary w-full',
|
||||
onclick: () => {
|
||||
isOpen(false);
|
||||
Toast('Checkout initiated!', 'alert-success', 2000);
|
||||
},
|
||||
disabled: () => cart().length === 0
|
||||
}, 'Checkout')
|
||||
])
|
||||
]),
|
||||
content: Div({ class: 'p-4' }, [
|
||||
Div({ class: 'flex justify-between items-center' }, [
|
||||
Span({ class: 'text-lg font-bold' }, 'Store'),
|
||||
Button({
|
||||
class: 'btn btn-primary',
|
||||
onclick: () => isOpen(true)
|
||||
}, () => `🛒 Cart (${cart().length})`)
|
||||
]),
|
||||
Div({ class: 'mt-4 grid grid-cols-2 gap-4' }, [
|
||||
Button({
|
||||
class: 'btn btn-outline h-32 flex flex-col',
|
||||
onclick: () => {
|
||||
cart([...cart(), { id: Date.now(), name: 'New Product', price: 39, quantity: 1 }]);
|
||||
Toast('Added to cart!', 'alert-success', 1500);
|
||||
}
|
||||
}, ['📦', 'Add to Cart'])
|
||||
])
|
||||
])
|
||||
});
|
||||
};
|
||||
$mount(CartDrawer, '#demo-cart');
|
||||
```
|
||||
|
||||
### Responsive Drawer
|
||||
|
||||
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
|
||||
<div id="demo-responsive" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const ResponsiveDrawer = () => {
|
||||
const isOpen = $(false);
|
||||
const activePage = $('home');
|
||||
|
||||
const MenuItems = () => Div({ class: 'flex flex-col gap-1 p-4' }, [
|
||||
Button({
|
||||
class: `btn btn-ghost justify-start ${activePage() === 'home' ? 'btn-active' : ''}`,
|
||||
onclick: () => {
|
||||
activePage('home');
|
||||
if (window.innerWidth < 1024) isOpen(false);
|
||||
}
|
||||
}, '🏠 Home'),
|
||||
Button({
|
||||
class: `btn btn-ghost justify-start ${activePage() === 'analytics' ? 'btn-active' : ''}`,
|
||||
onclick: () => {
|
||||
activePage('analytics');
|
||||
if (window.innerWidth < 1024) isOpen(false);
|
||||
}
|
||||
}, '📊 Analytics'),
|
||||
Button({
|
||||
class: `btn btn-ghost justify-start ${activePage() === 'settings' ? 'btn-active' : ''}`,
|
||||
onclick: () => {
|
||||
activePage('settings');
|
||||
if (window.innerWidth < 1024) isOpen(false);
|
||||
}
|
||||
}, '⚙️ Settings')
|
||||
]);
|
||||
|
||||
return Drawer({
|
||||
id: 'responsive-drawer',
|
||||
open: isOpen,
|
||||
side: Div({ class: 'w-64' }, [
|
||||
Div({ class: 'text-xl font-bold p-4 border-b border-base-300' }, 'Menu'),
|
||||
MenuItems()
|
||||
]),
|
||||
content: Div({ class: 'flex' }, [
|
||||
Div({ class: 'hidden lg:block w-64 border-r border-base-300' }, [MenuItems()]),
|
||||
Div({ class: 'flex-1 p-4' }, [
|
||||
Div({ class: 'flex justify-between items-center lg:hidden mb-4' }, [
|
||||
Button({
|
||||
class: 'btn btn-ghost btn-circle',
|
||||
onclick: () => isOpen(true)
|
||||
}, '☰'),
|
||||
Span({ class: 'text-lg font-bold' }, 'MyApp')
|
||||
]),
|
||||
Div({ class: 'card bg-base-200' }, [
|
||||
Div({ class: 'card-body' }, [
|
||||
Div({ class: 'text-2xl font-bold' }, () => activePage().charAt(0).toUpperCase() + activePage().slice(1)),
|
||||
Div({}, 'Content area. On desktop, the menu is always visible on the left.')
|
||||
])
|
||||
])
|
||||
])
|
||||
])
|
||||
});
|
||||
};
|
||||
$mount(ResponsiveDrawer, '#demo-responsive');
|
||||
```
|
||||
|
||||
### Form Drawer
|
||||
|
||||
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
|
||||
<div id="demo-form" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const FormDrawer = () => {
|
||||
const isOpen = $(false);
|
||||
const name = $('');
|
||||
const email = $('');
|
||||
const message = $('');
|
||||
|
||||
const handleSubmit = () => {
|
||||
if (name() && email() && message()) {
|
||||
Toast('Message sent!', 'alert-success', 2000);
|
||||
isOpen(false);
|
||||
name('');
|
||||
email('');
|
||||
message('');
|
||||
} else {
|
||||
Toast('Please fill all fields', 'alert-warning', 2000);
|
||||
}
|
||||
};
|
||||
|
||||
return Drawer({
|
||||
id: 'form-drawer',
|
||||
open: isOpen,
|
||||
side: Div({ class: 'p-4 w-96' }, [
|
||||
Div({ class: 'flex justify-between items-center mb-4' }, [
|
||||
Span({ class: 'text-xl font-bold' }, 'Contact Us'),
|
||||
Button({
|
||||
class: 'btn btn-ghost btn-circle btn-sm',
|
||||
onclick: () => isOpen(false)
|
||||
}, '✕')
|
||||
]),
|
||||
Div({ class: 'flex flex-col gap-4' }, [
|
||||
Input({
|
||||
label: 'Name',
|
||||
value: name,
|
||||
placeholder: 'Your name',
|
||||
oninput: (e) => name(e.target.value)
|
||||
}),
|
||||
Input({
|
||||
label: 'Email',
|
||||
type: 'email',
|
||||
value: email,
|
||||
placeholder: 'your@email.com',
|
||||
oninput: (e) => email(e.target.value)
|
||||
}),
|
||||
Div({ class: 'form-control' }, [
|
||||
Span({ class: 'label-text mb-1' }, 'Message'),
|
||||
$html('textarea', {
|
||||
class: 'textarea textarea-bordered h-24',
|
||||
placeholder: 'Your message',
|
||||
value: message,
|
||||
oninput: (e) => message(e.target.value)
|
||||
})
|
||||
]),
|
||||
Div({ class: 'flex gap-2 mt-2' }, [
|
||||
Button({
|
||||
class: 'btn btn-primary flex-1',
|
||||
onclick: handleSubmit
|
||||
}, 'Send'),
|
||||
Button({
|
||||
class: 'btn btn-ghost flex-1',
|
||||
onclick: () => isOpen(false)
|
||||
}, 'Cancel')
|
||||
])
|
||||
])
|
||||
]),
|
||||
content: Div({ class: 'p-4 text-center' }, [
|
||||
Button({
|
||||
class: 'btn btn-primary',
|
||||
onclick: () => isOpen(true)
|
||||
}, 'Contact Us')
|
||||
])
|
||||
});
|
||||
};
|
||||
$mount(FormDrawer, '#demo-form');
|
||||
```
|
||||
|
||||
<script>
|
||||
(function() {
|
||||
const initDrawerExamples = () => {
|
||||
|
||||
// 1. Basic Drawer
|
||||
const basicTarget = document.querySelector('#demo-basic');
|
||||
if (basicTarget && !basicTarget.hasChildNodes()) {
|
||||
const BasicDemo = () => {
|
||||
const isOpen = $(false);
|
||||
|
||||
return Drawer({
|
||||
id: 'basic-drawer',
|
||||
open: isOpen,
|
||||
side: Div({ class: 'p-4' }, [
|
||||
Div({ class: 'text-lg font-bold mb-4' }, 'Menu'),
|
||||
Div({ class: 'flex flex-col gap-2' }, [
|
||||
Button({ class: 'btn btn-ghost justify-start' }, 'Home'),
|
||||
Button({ class: 'btn btn-ghost justify-start' }, 'About'),
|
||||
Button({ class: 'btn btn-ghost justify-start' }, 'Contact')
|
||||
])
|
||||
]),
|
||||
content: Div({ class: 'p-4 text-center' }, [
|
||||
Button({
|
||||
class: 'btn btn-primary',
|
||||
onclick: () => isOpen(true)
|
||||
}, 'Open Drawer')
|
||||
])
|
||||
});
|
||||
};
|
||||
$mount(BasicDemo, basicTarget);
|
||||
}
|
||||
|
||||
// 2. Navigation Drawer
|
||||
const navTarget = document.querySelector('#demo-nav');
|
||||
if (navTarget && !navTarget.hasChildNodes()) {
|
||||
const NavDrawer = () => {
|
||||
const isOpen = $(false);
|
||||
const activePage = $('home');
|
||||
|
||||
const pages = {
|
||||
home: 'Welcome to the Home Page!',
|
||||
about: 'About Us - Learn more about our company',
|
||||
services: 'Our Services - What we offer',
|
||||
contact: 'Contact Us - Get in touch'
|
||||
};
|
||||
|
||||
return Drawer({
|
||||
id: 'nav-drawer',
|
||||
open: isOpen,
|
||||
side: Div({ class: 'p-4 w-64' }, [
|
||||
Div({ class: 'text-xl font-bold mb-6' }, 'MyApp'),
|
||||
Div({ class: 'flex flex-col gap-1' }, [
|
||||
Button({
|
||||
class: `btn btn-ghost justify-start ${activePage() === 'home' ? 'btn-active' : ''}`,
|
||||
onclick: () => {
|
||||
activePage('home');
|
||||
isOpen(false);
|
||||
}
|
||||
}, '🏠 Home'),
|
||||
Button({
|
||||
class: `btn btn-ghost justify-start ${activePage() === 'about' ? 'btn-active' : ''}`,
|
||||
onclick: () => {
|
||||
activePage('about');
|
||||
isOpen(false);
|
||||
}
|
||||
}, 'ℹ️ About'),
|
||||
Button({
|
||||
class: `btn btn-ghost justify-start ${activePage() === 'services' ? 'btn-active' : ''}`,
|
||||
onclick: () => {
|
||||
activePage('services');
|
||||
isOpen(false);
|
||||
}
|
||||
}, '⚙️ Services'),
|
||||
Button({
|
||||
class: `btn btn-ghost justify-start ${activePage() === 'contact' ? 'btn-active' : ''}`,
|
||||
onclick: () => {
|
||||
activePage('contact');
|
||||
isOpen(false);
|
||||
}
|
||||
}, '📧 Contact')
|
||||
])
|
||||
]),
|
||||
content: Div({ class: 'p-4' }, [
|
||||
Div({ class: 'flex justify-between items-center mb-4' }, [
|
||||
Button({
|
||||
class: 'btn btn-ghost btn-circle',
|
||||
onclick: () => isOpen(true)
|
||||
}, '☰'),
|
||||
Span({ class: 'text-lg font-bold' }, 'MyApp')
|
||||
]),
|
||||
Div({ class: 'card bg-base-200 shadow-lg' }, [
|
||||
Div({ class: 'card-body' }, [
|
||||
Div({ class: 'text-2xl font-bold mb-2' }, () => activePage().charAt(0).toUpperCase() + activePage().slice(1)),
|
||||
Div({ class: 'text-lg' }, () => pages[activePage()])
|
||||
])
|
||||
])
|
||||
])
|
||||
});
|
||||
};
|
||||
$mount(NavDrawer, navTarget);
|
||||
}
|
||||
|
||||
// 3. Settings Drawer
|
||||
const settingsTarget = document.querySelector('#demo-settings');
|
||||
if (settingsTarget && !settingsTarget.hasChildNodes()) {
|
||||
const SettingsDrawer = () => {
|
||||
const isOpen = $(false);
|
||||
const darkMode = $(false);
|
||||
const notifications = $(true);
|
||||
const autoSave = $(false);
|
||||
|
||||
return Drawer({
|
||||
id: 'settings-drawer',
|
||||
open: isOpen,
|
||||
side: Div({ class: 'p-4 w-80' }, [
|
||||
Div({ class: 'flex justify-between items-center mb-6' }, [
|
||||
Span({ class: 'text-xl font-bold' }, 'Settings'),
|
||||
Button({
|
||||
class: 'btn btn-ghost btn-circle btn-sm',
|
||||
onclick: () => isOpen(false)
|
||||
}, '✕')
|
||||
]),
|
||||
Div({ class: 'flex flex-col gap-4' }, [
|
||||
Div({ class: 'flex justify-between items-center' }, [
|
||||
Span({}, 'Dark Mode'),
|
||||
Swap({
|
||||
value: darkMode,
|
||||
on: "🌙",
|
||||
off: "☀️",
|
||||
onclick: () => darkMode(!darkMode())
|
||||
})
|
||||
]),
|
||||
Div({ class: 'flex justify-between items-center' }, [
|
||||
Span({}, 'Notifications'),
|
||||
Swap({
|
||||
value: notifications,
|
||||
on: "🔔",
|
||||
off: "🔕",
|
||||
onclick: () => notifications(!notifications())
|
||||
})
|
||||
]),
|
||||
Div({ class: 'flex justify-between items-center' }, [
|
||||
Span({}, 'Auto Save'),
|
||||
Swap({
|
||||
value: autoSave,
|
||||
on: "✅",
|
||||
off: "⭕",
|
||||
onclick: () => autoSave(!autoSave())
|
||||
})
|
||||
])
|
||||
]),
|
||||
Div({ class: 'divider my-4' }),
|
||||
Div({ class: 'flex gap-2' }, [
|
||||
Button({
|
||||
class: 'btn btn-primary flex-1',
|
||||
onclick: () => {
|
||||
isOpen(false);
|
||||
Toast('Settings saved!', 'alert-success', 2000);
|
||||
}
|
||||
}, 'Save'),
|
||||
Button({
|
||||
class: 'btn btn-ghost flex-1',
|
||||
onclick: () => isOpen(false)
|
||||
}, 'Cancel')
|
||||
])
|
||||
]),
|
||||
content: Div({ class: 'p-4' }, [
|
||||
Div({ class: 'flex justify-between items-center' }, [
|
||||
Span({ class: 'text-lg font-bold' }, 'Dashboard'),
|
||||
Button({
|
||||
class: 'btn btn-ghost btn-circle',
|
||||
onclick: () => isOpen(true)
|
||||
}, '⚙️')
|
||||
]),
|
||||
Div({ class: 'mt-4 grid grid-cols-2 gap-4' }, [
|
||||
Div({ class: 'stat bg-base-200 rounded-lg p-4' }, [
|
||||
Div({ class: 'stat-title' }, 'Users'),
|
||||
Div({ class: 'stat-value' }, '1,234')
|
||||
]),
|
||||
Div({ class: 'stat bg-base-200 rounded-lg p-4' }, [
|
||||
Div({ class: 'stat-title' }, 'Revenue'),
|
||||
Div({ class: 'stat-value' }, '$45K')
|
||||
])
|
||||
])
|
||||
])
|
||||
});
|
||||
};
|
||||
$mount(SettingsDrawer, settingsTarget);
|
||||
}
|
||||
|
||||
// 4. Cart Drawer
|
||||
const cartTarget = document.querySelector('#demo-cart');
|
||||
if (cartTarget && !cartTarget.hasChildNodes()) {
|
||||
const CartDrawer = () => {
|
||||
const isOpen = $(false);
|
||||
const cart = $([
|
||||
{ id: 1, name: 'Product 1', price: 29, quantity: 2 },
|
||||
{ id: 2, name: 'Product 2', price: 49, quantity: 1 }
|
||||
]);
|
||||
|
||||
const updateQuantity = (id, delta) => {
|
||||
cart(cart().map(item => {
|
||||
if (item.id === id) {
|
||||
const newQty = Math.max(0, item.quantity + delta);
|
||||
return newQty === 0 ? null : { ...item, quantity: newQty };
|
||||
}
|
||||
return item;
|
||||
}).filter(Boolean));
|
||||
};
|
||||
|
||||
const total = () => cart().reduce((sum, item) => sum + (item.price * item.quantity), 0);
|
||||
|
||||
return Drawer({
|
||||
id: 'cart-drawer',
|
||||
open: isOpen,
|
||||
side: Div({ class: 'flex flex-col h-full' }, [
|
||||
Div({ class: 'p-4 border-b border-base-300' }, [
|
||||
Div({ class: 'flex justify-between items-center' }, [
|
||||
Span({ class: 'text-xl font-bold' }, `Cart (${cart().length} items)`),
|
||||
Button({
|
||||
class: 'btn btn-ghost btn-circle btn-sm',
|
||||
onclick: () => isOpen(false)
|
||||
}, '✕')
|
||||
])
|
||||
]),
|
||||
Div({ class: 'flex-1 overflow-y-auto p-4' }, cart().length === 0
|
||||
? Div({ class: 'text-center text-gray-500 mt-8' }, 'Your cart is empty')
|
||||
: Div({ class: 'flex flex-col gap-3' }, cart().map(item =>
|
||||
Div({ class: 'flex gap-3 items-center p-2 bg-base-200 rounded-lg' }, [
|
||||
Div({ class: 'flex-1' }, [
|
||||
Div({ class: 'font-medium' }, item.name),
|
||||
Div({ class: 'text-sm' }, `$${item.price} each`)
|
||||
]),
|
||||
Div({ class: 'flex items-center gap-2' }, [
|
||||
Button({
|
||||
class: 'btn btn-xs btn-circle',
|
||||
onclick: () => updateQuantity(item.id, -1)
|
||||
}, '-'),
|
||||
Span({ class: 'w-8 text-center' }, item.quantity),
|
||||
Button({
|
||||
class: 'btn btn-xs btn-circle',
|
||||
onclick: () => updateQuantity(item.id, 1)
|
||||
}, '+')
|
||||
]),
|
||||
Span({ class: 'font-bold w-16 text-right' }, `$${item.price * item.quantity}`)
|
||||
])
|
||||
))
|
||||
),
|
||||
Div({ class: 'p-4 border-t border-base-300' }, [
|
||||
Div({ class: 'flex justify-between items-center mb-4' }, [
|
||||
Span({ class: 'font-bold' }, 'Total'),
|
||||
Span({ class: 'text-xl font-bold' }, () => `$${total()}`)
|
||||
]),
|
||||
Button({
|
||||
class: 'btn btn-primary w-full',
|
||||
onclick: () => {
|
||||
isOpen(false);
|
||||
Toast('Checkout initiated!', 'alert-success', 2000);
|
||||
},
|
||||
disabled: () => cart().length === 0
|
||||
}, 'Checkout')
|
||||
])
|
||||
]),
|
||||
content: Div({ class: 'p-4' }, [
|
||||
Div({ class: 'flex justify-between items-center' }, [
|
||||
Span({ class: 'text-lg font-bold' }, 'Store'),
|
||||
Button({
|
||||
class: 'btn btn-primary',
|
||||
onclick: () => isOpen(true)
|
||||
}, () => `🛒 Cart (${cart().length})`)
|
||||
]),
|
||||
Div({ class: 'mt-4 grid grid-cols-2 gap-4' }, [
|
||||
Button({
|
||||
class: 'btn btn-outline h-32 flex flex-col',
|
||||
onclick: () => {
|
||||
cart([...cart(), { id: Date.now(), name: 'New Product', price: 39, quantity: 1 }]);
|
||||
Toast('Added to cart!', 'alert-success', 1500);
|
||||
}
|
||||
}, ['📦', 'Add to Cart'])
|
||||
])
|
||||
])
|
||||
});
|
||||
};
|
||||
$mount(CartDrawer, cartTarget);
|
||||
}
|
||||
|
||||
// 5. Responsive Drawer
|
||||
const responsiveTarget = document.querySelector('#demo-responsive');
|
||||
if (responsiveTarget && !responsiveTarget.hasChildNodes()) {
|
||||
const ResponsiveDrawer = () => {
|
||||
const isOpen = $(false);
|
||||
const activePage = $('home');
|
||||
|
||||
const MenuItems = () => Div({ class: 'flex flex-col gap-1 p-4' }, [
|
||||
Button({
|
||||
class: `btn btn-ghost justify-start ${activePage() === 'home' ? 'btn-active' : ''}`,
|
||||
onclick: () => {
|
||||
activePage('home');
|
||||
if (window.innerWidth < 1024) isOpen(false);
|
||||
}
|
||||
}, '🏠 Home'),
|
||||
Button({
|
||||
class: `btn btn-ghost justify-start ${activePage() === 'analytics' ? 'btn-active' : ''}`,
|
||||
onclick: () => {
|
||||
activePage('analytics');
|
||||
if (window.innerWidth < 1024) isOpen(false);
|
||||
}
|
||||
}, '📊 Analytics'),
|
||||
Button({
|
||||
class: `btn btn-ghost justify-start ${activePage() === 'settings' ? 'btn-active' : ''}`,
|
||||
onclick: () => {
|
||||
activePage('settings');
|
||||
if (window.innerWidth < 1024) isOpen(false);
|
||||
}
|
||||
}, '⚙️ Settings')
|
||||
]);
|
||||
|
||||
return Drawer({
|
||||
id: 'responsive-drawer',
|
||||
open: isOpen,
|
||||
side: Div({ class: 'w-64' }, [
|
||||
Div({ class: 'text-xl font-bold p-4 border-b border-base-300' }, 'Menu'),
|
||||
MenuItems()
|
||||
]),
|
||||
content: Div({ class: 'flex' }, [
|
||||
Div({ class: 'hidden lg:block w-64 border-r border-base-300' }, [MenuItems()]),
|
||||
Div({ class: 'flex-1 p-4' }, [
|
||||
Div({ class: 'flex justify-between items-center lg:hidden mb-4' }, [
|
||||
Button({
|
||||
class: 'btn btn-ghost btn-circle',
|
||||
onclick: () => isOpen(true)
|
||||
}, '☰'),
|
||||
Span({ class: 'text-lg font-bold' }, 'MyApp')
|
||||
]),
|
||||
Div({ class: 'card bg-base-200' }, [
|
||||
Div({ class: 'card-body' }, [
|
||||
Div({ class: 'text-2xl font-bold' }, () => activePage().charAt(0).toUpperCase() + activePage().slice(1)),
|
||||
Div({}, 'Content area. On desktop, the menu is always visible on the left.')
|
||||
])
|
||||
])
|
||||
])
|
||||
])
|
||||
});
|
||||
};
|
||||
$mount(ResponsiveDrawer, responsiveTarget);
|
||||
}
|
||||
|
||||
// 6. Form Drawer
|
||||
const formTarget = document.querySelector('#demo-form');
|
||||
if (formTarget && !formTarget.hasChildNodes()) {
|
||||
const FormDrawer = () => {
|
||||
const isOpen = $(false);
|
||||
const name = $('');
|
||||
const email = $('');
|
||||
const message = $('');
|
||||
|
||||
const handleSubmit = () => {
|
||||
if (name() && email() && message()) {
|
||||
Toast('Message sent!', 'alert-success', 2000);
|
||||
isOpen(false);
|
||||
name('');
|
||||
email('');
|
||||
message('');
|
||||
} else {
|
||||
Toast('Please fill all fields', 'alert-warning', 2000);
|
||||
}
|
||||
};
|
||||
|
||||
return Drawer({
|
||||
id: 'form-drawer',
|
||||
open: isOpen,
|
||||
side: Div({ class: 'p-4 w-96' }, [
|
||||
Div({ class: 'flex justify-between items-center mb-4' }, [
|
||||
Span({ class: 'text-xl font-bold' }, 'Contact Us'),
|
||||
Button({
|
||||
class: 'btn btn-ghost btn-circle btn-sm',
|
||||
onclick: () => isOpen(false)
|
||||
}, '✕')
|
||||
]),
|
||||
Div({ class: 'flex flex-col gap-4' }, [
|
||||
Input({
|
||||
label: 'Name',
|
||||
value: name,
|
||||
placeholder: 'Your name',
|
||||
oninput: (e) => name(e.target.value)
|
||||
}),
|
||||
Input({
|
||||
label: 'Email',
|
||||
type: 'email',
|
||||
value: email,
|
||||
placeholder: 'your@email.com',
|
||||
oninput: (e) => email(e.target.value)
|
||||
}),
|
||||
Div({ class: 'form-control' }, [
|
||||
Span({ class: 'label-text mb-1' }, 'Message'),
|
||||
$html('textarea', {
|
||||
class: 'textarea textarea-bordered h-24',
|
||||
placeholder: 'Your message',
|
||||
value: message,
|
||||
oninput: (e) => message(e.target.value)
|
||||
})
|
||||
]),
|
||||
Div({ class: 'flex gap-2 mt-2' }, [
|
||||
Button({
|
||||
class: 'btn btn-primary flex-1',
|
||||
onclick: handleSubmit
|
||||
}, 'Send'),
|
||||
Button({
|
||||
class: 'btn btn-ghost flex-1',
|
||||
onclick: () => isOpen(false)
|
||||
}, 'Cancel')
|
||||
])
|
||||
])
|
||||
]),
|
||||
content: Div({ class: 'p-4 text-center' }, [
|
||||
Button({
|
||||
class: 'btn btn-primary',
|
||||
onclick: () => isOpen(true)
|
||||
}, 'Contact Us')
|
||||
])
|
||||
});
|
||||
};
|
||||
$mount(FormDrawer, formTarget);
|
||||
}
|
||||
};
|
||||
|
||||
initDrawerExamples();
|
||||
|
||||
if (window.$docsify) {
|
||||
window.$docsify.plugins = [].concat(window.$docsify.plugins || [], (hook) => {
|
||||
hook.doneEach(initDrawerExamples);
|
||||
});
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
489
docs/components/dropdown.md
Normal file
489
docs/components/dropdown.md
Normal file
@@ -0,0 +1,489 @@
|
||||
# Dropdown
|
||||
|
||||
Dropdown component for creating menus, selectors, and action panels that appear when triggered. Supports both array-based items and custom content.
|
||||
|
||||
## Tag
|
||||
|
||||
`Dropdown`
|
||||
|
||||
## Props
|
||||
|
||||
| Prop | Type | Default | Description |
|
||||
| :----------- | :-------------------------------------- | :---------- | :----------------------------------------------- |
|
||||
| `label` | `string \| VNode \| Signal` | `-` | Button label or content |
|
||||
| `icon` | `string \| VNode \| Signal` | `-` | Icon displayed next to label |
|
||||
| `items` | `Array<MenuItem> \| Signal<Array>` | `-` | Array of menu items (alternative to children) |
|
||||
| `class` | `string` | `''` | Additional CSS classes (DaisyUI + Tailwind) |
|
||||
| `children` | `VNode \| function` | `-` | Custom dropdown content (alternative to items) |
|
||||
|
||||
### MenuItem Structure (when using `items`)
|
||||
|
||||
| Property | Type | Description |
|
||||
| :---------- | :--------------------------- | :----------------------------------------------- |
|
||||
| `label` | `string \| VNode` | Menu item text |
|
||||
| `icon` | `string \| VNode` | Optional icon for the menu item |
|
||||
| `onclick` | `function` | Click handler |
|
||||
| `class` | `string` | Additional CSS classes for the menu item |
|
||||
|
||||
## Live Examples
|
||||
|
||||
### Basic Dropdown (Items Array)
|
||||
|
||||
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
|
||||
<div id="demo-basic" class="bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const BasicDemo = () => {
|
||||
return Dropdown({
|
||||
label: 'Options',
|
||||
items: [
|
||||
{ label: 'Profile', onclick: () => Toast('Profile clicked', 'alert-info', 2000) },
|
||||
{ label: 'Settings', onclick: () => Toast('Settings clicked', 'alert-info', 2000) },
|
||||
{ label: 'Logout', onclick: () => Toast('Logged out', 'alert-warning', 2000), class: 'text-error' }
|
||||
]
|
||||
});
|
||||
};
|
||||
$mount(BasicDemo, '#demo-basic');
|
||||
```
|
||||
|
||||
### With Icons (Items Array)
|
||||
|
||||
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
|
||||
<div id="demo-icons" class="bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const IconsDemo = () => {
|
||||
return Dropdown({
|
||||
label: 'Menu',
|
||||
icon: '☰',
|
||||
items: [
|
||||
{ icon: '👤', label: 'Profile', onclick: () => Toast('Profile', 'alert-info', 2000) },
|
||||
{ icon: '⭐', label: 'Favorites', onclick: () => Toast('Favorites', 'alert-info', 2000) },
|
||||
{ icon: '📁', label: 'Documents', onclick: () => Toast('Documents', 'alert-info', 2000) },
|
||||
{ icon: '⚙️', label: 'Settings', onclick: () => Toast('Settings', 'alert-info', 2000) }
|
||||
]
|
||||
});
|
||||
};
|
||||
$mount(IconsDemo, '#demo-icons');
|
||||
```
|
||||
|
||||
### Action Dropdown (Items Array)
|
||||
|
||||
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
|
||||
<div id="demo-actions" class="bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const ActionsDemo = () => {
|
||||
const handleAction = (action) => {
|
||||
Toast(`${action} action`, 'alert-info', 2000);
|
||||
};
|
||||
|
||||
return Dropdown({
|
||||
label: 'Actions',
|
||||
class: 'dropdown-end',
|
||||
items: [
|
||||
{ icon: '✏️', label: 'Edit', onclick: () => handleAction('Edit') },
|
||||
{ icon: '📋', label: 'Copy', onclick: () => handleAction('Copy') },
|
||||
{ icon: '🗑️', label: 'Delete', onclick: () => handleAction('Delete'), class: 'text-error' }
|
||||
]
|
||||
});
|
||||
};
|
||||
$mount(ActionsDemo, '#demo-actions');
|
||||
```
|
||||
|
||||
### User Dropdown (Items Array)
|
||||
|
||||
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
|
||||
<div id="demo-user" class="bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const UserDropdown = () => {
|
||||
return Dropdown({
|
||||
label: Span({ class: 'flex items-center gap-2' }, [
|
||||
Div({ class: 'avatar placeholder' }, [
|
||||
Div({ class: 'bg-primary text-primary-content rounded-full w-8 h-8 flex items-center justify-center text-sm' }, 'JD')
|
||||
]),
|
||||
'John Doe'
|
||||
]),
|
||||
class: 'dropdown-end',
|
||||
items: [
|
||||
{ label: 'Profile', onclick: () => Toast('Profile', 'alert-info', 2000) },
|
||||
{ label: 'Settings', onclick: () => Toast('Settings', 'alert-info', 2000) },
|
||||
{ label: 'Sign Out', onclick: () => Toast('Signed out', 'alert-warning', 2000), class: 'text-error' }
|
||||
]
|
||||
});
|
||||
};
|
||||
$mount(UserDropdown, '#demo-user');
|
||||
```
|
||||
|
||||
### Reactive Items
|
||||
|
||||
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
|
||||
<div id="demo-reactive" class="bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const ReactiveDropdown = () => {
|
||||
const count = $(0);
|
||||
|
||||
const items = () => [
|
||||
{ label: `Count: ${count()}`, onclick: () => {} },
|
||||
{ label: 'Increment', onclick: () => count(count() + 1) },
|
||||
{ label: 'Decrement', onclick: () => count(count() - 1) },
|
||||
{ label: 'Reset', onclick: () => count(0) }
|
||||
];
|
||||
|
||||
return Dropdown({
|
||||
label: () => `Counter (${count()})`,
|
||||
items: items
|
||||
});
|
||||
};
|
||||
$mount(ReactiveDropdown, '#demo-reactive');
|
||||
```
|
||||
|
||||
### Notification Dropdown (Custom Children)
|
||||
|
||||
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
|
||||
<div id="demo-notifications" class="bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const NotificationsDropdown = () => {
|
||||
const notifications = $([
|
||||
{ id: 1, title: 'New message', time: '5 min ago', read: false },
|
||||
{ id: 2, title: 'Update available', time: '1 hour ago', read: false },
|
||||
{ id: 3, title: 'Task completed', time: '2 hours ago', read: true }
|
||||
]);
|
||||
|
||||
const markAsRead = (id) => {
|
||||
notifications(notifications().map(n =>
|
||||
n.id === id ? { ...n, read: true } : n
|
||||
));
|
||||
};
|
||||
|
||||
const unreadCount = () => notifications().filter(n => !n.read).length;
|
||||
|
||||
return Dropdown({
|
||||
label: Span({ class: 'relative' }, [
|
||||
'🔔',
|
||||
() => unreadCount() > 0 ? Span({ class: 'badge badge-xs badge-error absolute -top-1 -right-2' }, unreadCount()) : null
|
||||
]),
|
||||
class: 'dropdown-end',
|
||||
children: () => Div({ class: 'w-80' }, [
|
||||
Div({ class: 'p-3 border-b border-base-300 font-bold' }, `Notifications (${unreadCount()} unread)`),
|
||||
Div({ class: 'max-h-64 overflow-y-auto' }, notifications().map(notif =>
|
||||
Div({
|
||||
class: `p-3 border-b border-base-300 cursor-pointer hover:bg-base-200 ${!notif.read ? 'bg-primary/5' : ''}`,
|
||||
onclick: () => markAsRead(notif.id)
|
||||
}, [
|
||||
Div({ class: 'font-medium' }, notif.title),
|
||||
Div({ class: 'text-xs opacity-60' }, notif.time),
|
||||
!notif.read && Span({ class: 'badge badge-xs badge-primary mt-1' }, 'New')
|
||||
])
|
||||
)),
|
||||
Div({ class: 'p-2 text-center' }, [
|
||||
Button({
|
||||
class: 'btn btn-xs btn-ghost w-full',
|
||||
onclick: () => notifications([])
|
||||
}, 'Clear all')
|
||||
])
|
||||
])
|
||||
});
|
||||
};
|
||||
$mount(NotificationsDropdown, '#demo-notifications');
|
||||
```
|
||||
|
||||
### Custom Content Dropdown
|
||||
|
||||
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
|
||||
<div id="demo-custom" class="bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const CustomDropdown = () => {
|
||||
const selected = $('Option 1');
|
||||
|
||||
return Dropdown({
|
||||
label: () => selected(),
|
||||
children: () => Div({ class: 'p-4 min-w-48' }, [
|
||||
Div({ class: 'text-sm font-bold mb-2' }, 'Select an option'),
|
||||
Div({ class: 'flex flex-col gap-1' }, [
|
||||
Button({
|
||||
class: 'btn btn-ghost btn-sm justify-start',
|
||||
onclick: () => selected('Option 1')
|
||||
}, 'Option 1'),
|
||||
Button({
|
||||
class: 'btn btn-ghost btn-sm justify-start',
|
||||
onclick: () => selected('Option 2')
|
||||
}, 'Option 2'),
|
||||
Button({
|
||||
class: 'btn btn-ghost btn-sm justify-start',
|
||||
onclick: () => selected('Option 3')
|
||||
}, 'Option 3')
|
||||
])
|
||||
])
|
||||
});
|
||||
};
|
||||
$mount(CustomDropdown, '#demo-custom');
|
||||
```
|
||||
|
||||
### All Variants
|
||||
|
||||
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
|
||||
<div id="demo-variants" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-wrap gap-4 justify-center"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const VariantsDemo = () => {
|
||||
const commonItems = [
|
||||
{ label: 'Item 1', onclick: () => Toast('Item 1', 'alert-info', 2000) },
|
||||
{ label: 'Item 2', onclick: () => Toast('Item 2', 'alert-info', 2000) },
|
||||
{ label: 'Item 3', onclick: () => Toast('Item 3', 'alert-info', 2000) }
|
||||
];
|
||||
|
||||
return Div({ class: 'flex flex-wrap gap-4 justify-center' }, [
|
||||
Dropdown({ label: 'Default', items: commonItems }),
|
||||
Dropdown({ label: 'With Icon', icon: '☰', items: commonItems }),
|
||||
Dropdown({ label: 'End Position', class: 'dropdown-end', items: commonItems })
|
||||
]);
|
||||
};
|
||||
$mount(VariantsDemo, '#demo-variants');
|
||||
```
|
||||
|
||||
<script>
|
||||
(function() {
|
||||
const initDropdownExamples = () => {
|
||||
|
||||
// 1. Basic Dropdown (Items Array)
|
||||
const basicTarget = document.querySelector('#demo-basic');
|
||||
if (basicTarget && !basicTarget.hasChildNodes()) {
|
||||
const BasicDemo = () => {
|
||||
return Dropdown({
|
||||
label: 'Options',
|
||||
items: [
|
||||
{ label: 'Profile', onclick: () => Toast('Profile clicked', 'alert-info', 2000) },
|
||||
{ label: 'Settings', onclick: () => Toast('Settings clicked', 'alert-info', 2000) },
|
||||
{ label: 'Logout', onclick: () => Toast('Logged out', 'alert-warning', 2000), class: 'text-error' }
|
||||
]
|
||||
});
|
||||
};
|
||||
$mount(BasicDemo, basicTarget);
|
||||
}
|
||||
|
||||
// 2. With Icons (Items Array)
|
||||
const iconsTarget = document.querySelector('#demo-icons');
|
||||
if (iconsTarget && !iconsTarget.hasChildNodes()) {
|
||||
const IconsDemo = () => {
|
||||
return Dropdown({
|
||||
label: 'Menu',
|
||||
icon: '☰',
|
||||
items: [
|
||||
{ icon: '👤', label: 'Profile', onclick: () => Toast('Profile', 'alert-info', 2000) },
|
||||
{ icon: '⭐', label: 'Favorites', onclick: () => Toast('Favorites', 'alert-info', 2000) },
|
||||
{ icon: '📁', label: 'Documents', onclick: () => Toast('Documents', 'alert-info', 2000) },
|
||||
{ icon: '⚙️', label: 'Settings', onclick: () => Toast('Settings', 'alert-info', 2000) }
|
||||
]
|
||||
});
|
||||
};
|
||||
$mount(IconsDemo, iconsTarget);
|
||||
}
|
||||
|
||||
// 3. Action Dropdown (Items Array)
|
||||
const actionsTarget = document.querySelector('#demo-actions');
|
||||
if (actionsTarget && !actionsTarget.hasChildNodes()) {
|
||||
const ActionsDemo = () => {
|
||||
const handleAction = (action) => {
|
||||
Toast(`${action} action`, 'alert-info', 2000);
|
||||
};
|
||||
|
||||
return Dropdown({
|
||||
label: 'Actions',
|
||||
class: 'dropdown-end',
|
||||
items: [
|
||||
{ icon: '✏️', label: 'Edit', onclick: () => handleAction('Edit') },
|
||||
{ icon: '📋', label: 'Copy', onclick: () => handleAction('Copy') },
|
||||
{ icon: '🗑️', label: 'Delete', onclick: () => handleAction('Delete'), class: 'text-error' }
|
||||
]
|
||||
});
|
||||
};
|
||||
$mount(ActionsDemo, actionsTarget);
|
||||
}
|
||||
|
||||
// 4. User Dropdown (Items Array)
|
||||
const userTarget = document.querySelector('#demo-user');
|
||||
if (userTarget && !userTarget.hasChildNodes()) {
|
||||
const UserDropdown = () => {
|
||||
return Dropdown({
|
||||
label: Span({ class: 'flex items-center gap-2' }, [
|
||||
Div({ class: 'avatar placeholder' }, [
|
||||
Div({ class: 'bg-primary text-primary-content rounded-full w-8 h-8 flex items-center justify-center text-sm' }, 'JD')
|
||||
]),
|
||||
'John Doe'
|
||||
]),
|
||||
class: 'dropdown-end',
|
||||
items: [
|
||||
{ label: 'Profile', onclick: () => Toast('Profile', 'alert-info', 2000) },
|
||||
{ label: 'Settings', onclick: () => Toast('Settings', 'alert-info', 2000) },
|
||||
{ label: 'Sign Out', onclick: () => Toast('Signed out', 'alert-warning', 2000), class: 'text-error' }
|
||||
]
|
||||
});
|
||||
};
|
||||
$mount(UserDropdown, userTarget);
|
||||
}
|
||||
|
||||
// 5. Reactive Items
|
||||
const reactiveTarget = document.querySelector('#demo-reactive');
|
||||
if (reactiveTarget && !reactiveTarget.hasChildNodes()) {
|
||||
const ReactiveDropdown = () => {
|
||||
const count = $(0);
|
||||
|
||||
const items = () => [
|
||||
{ label: `Count: ${count()}`, onclick: () => {} },
|
||||
{ label: 'Increment', onclick: () => count(count() + 1) },
|
||||
{ label: 'Decrement', onclick: () => count(count() - 1) },
|
||||
{ label: 'Reset', onclick: () => count(0) }
|
||||
];
|
||||
|
||||
return Dropdown({
|
||||
label: () => `Counter (${count()})`,
|
||||
items: items
|
||||
});
|
||||
};
|
||||
$mount(ReactiveDropdown, reactiveTarget);
|
||||
}
|
||||
|
||||
// 6. Notification Dropdown (Custom Children)
|
||||
const notifTarget = document.querySelector('#demo-notifications');
|
||||
if (notifTarget && !notifTarget.hasChildNodes()) {
|
||||
const NotificationsDropdown = () => {
|
||||
const notifications = $([
|
||||
{ id: 1, title: 'New message', time: '5 min ago', read: false },
|
||||
{ id: 2, title: 'Update available', time: '1 hour ago', read: false },
|
||||
{ id: 3, title: 'Task completed', time: '2 hours ago', read: true }
|
||||
]);
|
||||
|
||||
const markAsRead = (id) => {
|
||||
notifications(notifications().map(n =>
|
||||
n.id === id ? { ...n, read: true } : n
|
||||
));
|
||||
};
|
||||
|
||||
const unreadCount = () => notifications().filter(n => !n.read).length;
|
||||
|
||||
return Dropdown({
|
||||
label: Span({ class: 'relative' }, [
|
||||
'🔔',
|
||||
() => unreadCount() > 0 ? Span({ class: 'badge badge-xs badge-error absolute -top-1 -right-2' }, unreadCount()) : null
|
||||
]),
|
||||
class: 'dropdown-end',
|
||||
children: () => Div({ class: 'w-80' }, [
|
||||
Div({ class: 'p-3 border-b border-base-300 font-bold' }, `Notifications (${unreadCount()} unread)`),
|
||||
Div({ class: 'max-h-64 overflow-y-auto' }, notifications().map(notif =>
|
||||
Div({
|
||||
class: `p-3 border-b border-base-300 cursor-pointer hover:bg-base-200 ${!notif.read ? 'bg-primary/5' : ''}`,
|
||||
onclick: () => markAsRead(notif.id)
|
||||
}, [
|
||||
Div({ class: 'font-medium' }, notif.title),
|
||||
Div({ class: 'text-xs opacity-60' }, notif.time),
|
||||
!notif.read && Span({ class: 'badge badge-xs badge-primary mt-1' }, 'New')
|
||||
])
|
||||
)),
|
||||
Div({ class: 'p-2 text-center' }, [
|
||||
Button({
|
||||
class: 'btn btn-xs btn-ghost w-full',
|
||||
onclick: () => notifications([])
|
||||
}, 'Clear all')
|
||||
])
|
||||
])
|
||||
});
|
||||
};
|
||||
$mount(NotificationsDropdown, notifTarget);
|
||||
}
|
||||
|
||||
// 7. Custom Content Dropdown
|
||||
const customTarget = document.querySelector('#demo-custom');
|
||||
if (customTarget && !customTarget.hasChildNodes()) {
|
||||
const CustomDropdown = () => {
|
||||
const selected = $('Option 1');
|
||||
|
||||
return Dropdown({
|
||||
label: () => selected(),
|
||||
children: () => Div({ class: 'p-4 min-w-48' }, [
|
||||
Div({ class: 'text-sm font-bold mb-2' }, 'Select an option'),
|
||||
Div({ class: 'flex flex-col gap-1' }, [
|
||||
Button({
|
||||
class: 'btn btn-ghost btn-sm justify-start',
|
||||
onclick: () => selected('Option 1')
|
||||
}, 'Option 1'),
|
||||
Button({
|
||||
class: 'btn btn-ghost btn-sm justify-start',
|
||||
onclick: () => selected('Option 2')
|
||||
}, 'Option 2'),
|
||||
Button({
|
||||
class: 'btn btn-ghost btn-sm justify-start',
|
||||
onclick: () => selected('Option 3')
|
||||
}, 'Option 3')
|
||||
])
|
||||
])
|
||||
});
|
||||
};
|
||||
$mount(CustomDropdown, customTarget);
|
||||
}
|
||||
|
||||
// 8. All Variants
|
||||
const variantsTarget = document.querySelector('#demo-variants');
|
||||
if (variantsTarget && !variantsTarget.hasChildNodes()) {
|
||||
const VariantsDemo = () => {
|
||||
const commonItems = [
|
||||
{ label: 'Item 1', onclick: () => Toast('Item 1', 'alert-info', 2000) },
|
||||
{ label: 'Item 2', onclick: () => Toast('Item 2', 'alert-info', 2000) },
|
||||
{ label: 'Item 3', onclick: () => Toast('Item 3', 'alert-info', 2000) }
|
||||
];
|
||||
|
||||
return Div({ class: 'flex flex-wrap gap-4 justify-center' }, [
|
||||
Dropdown({ label: 'Default', items: commonItems }),
|
||||
Dropdown({ label: 'With Icon', icon: '☰', items: commonItems }),
|
||||
Dropdown({ label: 'End Position', class: 'dropdown-end', items: commonItems })
|
||||
]);
|
||||
};
|
||||
$mount(VariantsDemo, variantsTarget);
|
||||
}
|
||||
};
|
||||
|
||||
initDropdownExamples();
|
||||
|
||||
if (window.$docsify) {
|
||||
window.$docsify.plugins = [].concat(window.$docsify.plugins || [], (hook) => {
|
||||
hook.doneEach(initDropdownExamples);
|
||||
});
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
688
docs/components/fab.md
Normal file
688
docs/components/fab.md
Normal file
@@ -0,0 +1,688 @@
|
||||
# Fab
|
||||
|
||||
Floating Action Button (FAB) component for primary actions with expandable menu options. Each example uses a container with `position: relative` and explicit height to position the FAB correctly.
|
||||
|
||||
## Tag
|
||||
|
||||
`Fab`
|
||||
|
||||
## Props
|
||||
|
||||
| Prop | Type | Default | Description |
|
||||
| :----------- | :-------------------------------------- | :--------------- | :----------------------------------------------- |
|
||||
| `icon` | `string \| VNode \| Signal` | `-` | Main FAB icon |
|
||||
| `label` | `string \| VNode \| Signal` | `-` | Text label for main button |
|
||||
| `actions` | `Array<Action> \| Signal<Array>` | `[]` | Array of action buttons that expand from FAB |
|
||||
| `position` | `string` | `'bottom-6 right-6'` | CSS position classes (e.g., 'bottom-6 left-6') |
|
||||
| `class` | `string` | `''` | Additional CSS classes (DaisyUI + Tailwind) |
|
||||
|
||||
### Action Structure
|
||||
|
||||
| Property | Type | Description |
|
||||
| :---------- | :--------------------------- | :----------------------------------------------- |
|
||||
| `label` | `string \| VNode` | Label text shown next to action button |
|
||||
| `icon` | `string \| VNode` | Icon for the action button |
|
||||
| `onclick` | `function` | Click handler |
|
||||
| `class` | `string` | Additional CSS classes for the action button |
|
||||
|
||||
## Live Examples
|
||||
|
||||
### Basic FAB
|
||||
|
||||
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
|
||||
<div id="demo-basic" class="bg-base-100 p-6 rounded-xl border border-base-300 min-h-[300px] relative"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const BasicDemo = () => {
|
||||
return Div({ class: 'relative h-[300px] w-full bg-base-100 rounded-lg overflow-hidden' }, [
|
||||
Fab({
|
||||
icon: '➕',
|
||||
actions: [
|
||||
{ icon: '📝', label: 'New Note', onclick: () => Toast('Create note', 'alert-info', 2000) },
|
||||
{ icon: '📷', label: 'Take Photo', onclick: () => Toast('Open camera', 'alert-info', 2000) },
|
||||
{ icon: '📎', label: 'Attach File', onclick: () => Toast('Attach file', 'alert-info', 2000) }
|
||||
]
|
||||
})
|
||||
]);
|
||||
};
|
||||
$mount(BasicDemo, '#demo-basic');
|
||||
```
|
||||
|
||||
### With Label
|
||||
|
||||
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
|
||||
<div id="demo-label" class="bg-base-100 p-6 rounded-xl border border-base-300 min-h-[300px] relative"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const LabelDemo = () => {
|
||||
return Div({ class: 'relative h-[300px] w-full bg-base-100 rounded-lg overflow-hidden' }, [
|
||||
Fab({
|
||||
label: 'Create',
|
||||
icon: '✨',
|
||||
actions: [
|
||||
{ icon: '📝', label: 'Document', onclick: () => Toast('New document', 'alert-success', 2000) },
|
||||
{ icon: '🎨', label: 'Design', onclick: () => Toast('New design', 'alert-success', 2000) },
|
||||
{ icon: '📊', label: 'Spreadsheet', onclick: () => Toast('New spreadsheet', 'alert-success', 2000) }
|
||||
]
|
||||
})
|
||||
]);
|
||||
};
|
||||
$mount(LabelDemo, '#demo-label');
|
||||
```
|
||||
|
||||
### Different Positions
|
||||
|
||||
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
|
||||
<div id="demo-positions" class="bg-base-100 p-6 rounded-xl border border-base-300 min-h-[500px] relative"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const PositionsDemo = () => {
|
||||
const position = $('bottom-6 right-6');
|
||||
|
||||
return Div({ class: 'relative h-[500px] w-full bg-base-100 rounded-lg overflow-hidden' }, [
|
||||
Div({ class: 'absolute top-4 left-4 z-20 bg-base-200 p-2 rounded-lg shadow' }, [
|
||||
Select({
|
||||
value: position,
|
||||
options: [
|
||||
{ value: 'bottom-6 right-6', label: 'Bottom Right' },
|
||||
{ value: 'bottom-6 left-6', label: 'Bottom Left' },
|
||||
{ value: 'top-6 right-6', label: 'Top Right' },
|
||||
{ value: 'top-6 left-6', label: 'Top Left' }
|
||||
],
|
||||
onchange: (e) => position(e.target.value)
|
||||
})
|
||||
]),
|
||||
Div({ class: 'absolute inset-0 flex items-center justify-center text-sm opacity-50 pointer-events-none' }, [
|
||||
'FAB position changes relative to this container'
|
||||
]),
|
||||
Fab({
|
||||
position: () => position(),
|
||||
icon: '🧭',
|
||||
actions: [
|
||||
{ icon: '⬅️', label: 'Bottom Left', onclick: () => position('bottom-6 left-6') },
|
||||
{ icon: '➡️', label: 'Bottom Right', onclick: () => position('bottom-6 right-6') },
|
||||
{ icon: '⬆️', label: 'Top Right', onclick: () => position('top-6 right-6') },
|
||||
{ icon: '⬇️', label: 'Top Left', onclick: () => position('top-6 left-6') }
|
||||
]
|
||||
})
|
||||
]);
|
||||
};
|
||||
$mount(PositionsDemo, '#demo-positions');
|
||||
```
|
||||
|
||||
### Color Variants
|
||||
|
||||
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
|
||||
<div id="demo-colors" class="bg-base-100 p-6 rounded-xl border border-base-300 min-h-[300px] relative"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const ColorsDemo = () => {
|
||||
const variant = $('primary');
|
||||
|
||||
const variants = {
|
||||
primary: { class: 'btn-primary', icon: '🔵' },
|
||||
secondary: { class: 'btn-secondary', icon: '🟣' },
|
||||
accent: { class: 'btn-accent', icon: '🔴' },
|
||||
info: { class: 'btn-info', icon: '🔷' },
|
||||
success: { class: 'btn-success', icon: '🟢' },
|
||||
warning: { class: 'btn-warning', icon: '🟡' },
|
||||
error: { class: 'btn-error', icon: '🔴' }
|
||||
};
|
||||
|
||||
return Div({ class: 'relative h-[300px] w-full bg-base-100 rounded-lg overflow-hidden' }, [
|
||||
Div({ class: 'absolute top-4 left-4 z-20 bg-base-200 p-2 rounded-lg shadow' }, [
|
||||
Select({
|
||||
value: variant,
|
||||
options: Object.keys(variants).map(v => ({ value: v, label: v.charAt(0).toUpperCase() + v.slice(1) })),
|
||||
onchange: (e) => variant(e.target.value)
|
||||
})
|
||||
]),
|
||||
Fab({
|
||||
class: variants[variant()].class,
|
||||
icon: variants[variant()].icon,
|
||||
actions: [
|
||||
{ icon: '📝', label: 'Action 1', onclick: () => Toast('Action 1', 'alert-info', 2000) },
|
||||
{ icon: '🎨', label: 'Action 2', onclick: () => Toast('Action 2', 'alert-info', 2000) },
|
||||
{ icon: '⚙️', label: 'Action 3', onclick: () => Toast('Action 3', 'alert-info', 2000) }
|
||||
]
|
||||
})
|
||||
]);
|
||||
};
|
||||
$mount(ColorsDemo, '#demo-colors');
|
||||
```
|
||||
|
||||
### Reactive Actions
|
||||
|
||||
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
|
||||
<div id="demo-reactive" class="bg-base-100 p-6 rounded-xl border border-base-300 min-h-[300px] relative"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const ReactiveActions = () => {
|
||||
const count = $(0);
|
||||
|
||||
const actions = () => [
|
||||
{
|
||||
icon: '🔢',
|
||||
label: `Count: ${count()}`,
|
||||
onclick: () => {}
|
||||
},
|
||||
{
|
||||
icon: '➕',
|
||||
label: 'Increment',
|
||||
onclick: () => count(count() + 1)
|
||||
},
|
||||
{
|
||||
icon: '➖',
|
||||
label: 'Decrement',
|
||||
onclick: () => count(count() - 1)
|
||||
},
|
||||
{
|
||||
icon: '🔄',
|
||||
label: 'Reset',
|
||||
onclick: () => count(0)
|
||||
}
|
||||
];
|
||||
|
||||
return Div({ class: 'relative h-[300px] w-full bg-base-100 rounded-lg overflow-hidden' }, [
|
||||
Fab({
|
||||
icon: () => count() > 0 ? `🔢 ${count()}` : '🎛️',
|
||||
actions: actions
|
||||
})
|
||||
]);
|
||||
};
|
||||
$mount(ReactiveActions, '#demo-reactive');
|
||||
```
|
||||
|
||||
### Document Actions
|
||||
|
||||
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
|
||||
<div id="demo-document" class="bg-base-100 p-6 rounded-xl border border-base-300 min-h-[300px] relative"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const DocumentActions = () => {
|
||||
const saved = $(false);
|
||||
|
||||
const handleSave = () => {
|
||||
saved(true);
|
||||
Toast('Document saved!', 'alert-success', 2000);
|
||||
setTimeout(() => saved(false), 3000);
|
||||
};
|
||||
|
||||
return Div({ class: 'relative h-[300px] w-full bg-base-100 rounded-lg overflow-hidden' }, [
|
||||
Div({ class: 'absolute inset-0 flex flex-col items-center justify-center' }, [
|
||||
Div({ class: 'text-6xl mb-4' }, '📄'),
|
||||
Div({ class: 'text-sm opacity-70' }, 'Untitled Document'),
|
||||
() => saved() ? Div({ class: 'mt-4' }, Alert({ type: 'success', message: '✓ Saved successfully' })) : null
|
||||
]),
|
||||
Fab({
|
||||
icon: '✏️',
|
||||
actions: [
|
||||
{ icon: '💾', label: 'Save', onclick: handleSave },
|
||||
{ icon: '📋', label: 'Copy', onclick: () => Toast('Copied!', 'alert-info', 2000) },
|
||||
{ icon: '✂️', label: 'Cut', onclick: () => Toast('Cut!', 'alert-info', 2000) },
|
||||
{ icon: '📎', label: 'Share', onclick: () => Toast('Share dialog', 'alert-info', 2000) }
|
||||
]
|
||||
})
|
||||
]);
|
||||
};
|
||||
$mount(DocumentActions, '#demo-document');
|
||||
```
|
||||
|
||||
### Messaging FAB
|
||||
|
||||
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
|
||||
<div id="demo-messaging" class="bg-base-100 p-6 rounded-xl border border-base-300 min-h-[300px] relative"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const MessagingFAB = () => {
|
||||
const unread = $(3);
|
||||
|
||||
return Div({ class: 'relative h-[300px] w-full bg-base-100 rounded-lg overflow-hidden' }, [
|
||||
Div({ class: 'absolute inset-0 flex flex-col items-center justify-center' }, [
|
||||
Div({ class: 'text-6xl mb-4' }, '💬'),
|
||||
Div({ class: 'text-sm opacity-70' }, 'Messages'),
|
||||
() => unread() > 0 ? Div({ class: 'badge badge-error mt-2' }, `${unread()} unread`) : null
|
||||
]),
|
||||
Fab({
|
||||
icon: () => `💬${unread() > 0 ? ` ${unread()}` : ''}`,
|
||||
class: 'btn-primary',
|
||||
actions: [
|
||||
{
|
||||
icon: '👤',
|
||||
label: 'New Message',
|
||||
onclick: () => Toast('Start new conversation', 'alert-info', 2000)
|
||||
},
|
||||
{
|
||||
icon: '👥',
|
||||
label: 'Group Chat',
|
||||
onclick: () => Toast('Create group', 'alert-info', 2000)
|
||||
},
|
||||
{
|
||||
icon: '📞',
|
||||
label: 'Voice Call',
|
||||
onclick: () => Toast('Start call', 'alert-info', 2000)
|
||||
},
|
||||
{
|
||||
icon: '📹',
|
||||
label: 'Video Call',
|
||||
onclick: () => Toast('Start video call', 'alert-info', 2000)
|
||||
},
|
||||
{
|
||||
icon: '🔔',
|
||||
label: () => `Mark as read (${unread()})`,
|
||||
onclick: () => {
|
||||
unread(0);
|
||||
Toast('All messages read', 'alert-success', 2000);
|
||||
}
|
||||
}
|
||||
]
|
||||
})
|
||||
]);
|
||||
};
|
||||
$mount(MessagingFAB, '#demo-messaging');
|
||||
```
|
||||
|
||||
### Flower Style FAB
|
||||
|
||||
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
|
||||
<div id="demo-flower" class="bg-base-100 p-6 rounded-xl border border-base-300 min-h-[300px] relative"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const FlowerDemo = () => {
|
||||
return Div({ class: 'relative h-[300px] w-full bg-base-100 rounded-lg overflow-hidden' }, [
|
||||
Div({ class: 'absolute inset-0 flex items-center justify-center text-sm opacity-50' }, [
|
||||
'Flower style FAB (quarter circle arrangement)'
|
||||
]),
|
||||
Fab({
|
||||
icon: '🌸',
|
||||
class: 'fab-flower',
|
||||
actions: [
|
||||
{ icon: '📷', label: 'Camera', onclick: () => Toast('Camera', 'alert-info', 2000) },
|
||||
{ icon: '🎨', label: 'Gallery', onclick: () => Toast('Gallery', 'alert-info', 2000) },
|
||||
{ icon: '🎤', label: 'Voice', onclick: () => Toast('Voice', 'alert-info', 2000) },
|
||||
{ icon: '📍', label: 'Location', onclick: () => Toast('Location', 'alert-info', 2000) }
|
||||
]
|
||||
})
|
||||
]);
|
||||
};
|
||||
$mount(FlowerDemo, '#demo-flower');
|
||||
```
|
||||
|
||||
### All Variants
|
||||
|
||||
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
|
||||
<div id="demo-variants" class="bg-base-100 p-6 rounded-xl border border-base-300 min-h-[400px] relative"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const VariantsDemo = () => {
|
||||
const actions = [
|
||||
{ icon: '⭐', label: 'Favorite', onclick: () => Toast('Favorited', 'alert-info', 2000) },
|
||||
{ icon: '🔔', label: 'Remind', onclick: () => Toast('Reminder set', 'alert-info', 2000) },
|
||||
{ icon: '📅', label: 'Schedule', onclick: () => Toast('Scheduled', 'alert-info', 2000) }
|
||||
];
|
||||
|
||||
return Div({ class: 'relative h-[400px] w-full bg-base-100 rounded-lg overflow-hidden' }, [
|
||||
Div({ class: 'grid grid-cols-2 gap-4 p-4 h-full' }, [
|
||||
Div({ class: 'relative border rounded-lg bg-base-200' }, [
|
||||
Span({ class: 'absolute top-2 left-2 text-xs opacity-50' }, 'Primary'),
|
||||
Fab({ icon: '🔵', class: 'btn-primary', actions, position: 'bottom-6 left-6' })
|
||||
]),
|
||||
Div({ class: 'relative border rounded-lg bg-base-200' }, [
|
||||
Span({ class: 'absolute top-2 left-2 text-xs opacity-50' }, 'Secondary'),
|
||||
Fab({ icon: '🟣', class: 'btn-secondary', actions, position: 'bottom-6 right-6' })
|
||||
]),
|
||||
Div({ class: 'relative border rounded-lg bg-base-200' }, [
|
||||
Span({ class: 'absolute top-2 left-2 text-xs opacity-50' }, 'Accent'),
|
||||
Fab({ icon: '🔴', class: 'btn-accent', actions, position: 'top-6 left-6' })
|
||||
]),
|
||||
Div({ class: 'relative border rounded-lg bg-base-200' }, [
|
||||
Span({ class: 'absolute top-2 left-2 text-xs opacity-50' }, 'Success'),
|
||||
Fab({ icon: '🟢', class: 'btn-success', actions, position: 'top-6 right-6' })
|
||||
])
|
||||
])
|
||||
]);
|
||||
};
|
||||
$mount(VariantsDemo, '#demo-variants');
|
||||
```
|
||||
|
||||
<script>
|
||||
(function() {
|
||||
const initFabExamples = () => {
|
||||
|
||||
// 1. Basic FAB
|
||||
const basicTarget = document.querySelector('#demo-basic');
|
||||
if (basicTarget && !basicTarget.hasChildNodes()) {
|
||||
const BasicDemo = () => {
|
||||
return Div({ class: 'relative h-[300px] w-full bg-base-100 rounded-lg overflow-hidden' }, [
|
||||
Fab({
|
||||
icon: '➕',
|
||||
actions: [
|
||||
{ icon: '📝', label: 'New Note', onclick: () => Toast('Create note', 'alert-info', 2000) },
|
||||
{ icon: '📷', label: 'Take Photo', onclick: () => Toast('Open camera', 'alert-info', 2000) },
|
||||
{ icon: '📎', label: 'Attach File', onclick: () => Toast('Attach file', 'alert-info', 2000) }
|
||||
]
|
||||
})
|
||||
]);
|
||||
};
|
||||
$mount(BasicDemo, basicTarget);
|
||||
}
|
||||
|
||||
// 2. With Label
|
||||
const labelTarget = document.querySelector('#demo-label');
|
||||
if (labelTarget && !labelTarget.hasChildNodes()) {
|
||||
const LabelDemo = () => {
|
||||
return Div({ class: 'relative h-[300px] w-full bg-base-100 rounded-lg overflow-hidden' }, [
|
||||
Fab({
|
||||
label: 'Create',
|
||||
icon: '✨',
|
||||
actions: [
|
||||
{ icon: '📝', label: 'Document', onclick: () => Toast('New document', 'alert-success', 2000) },
|
||||
{ icon: '🎨', label: 'Design', onclick: () => Toast('New design', 'alert-success', 2000) },
|
||||
{ icon: '📊', label: 'Spreadsheet', onclick: () => Toast('New spreadsheet', 'alert-success', 2000) }
|
||||
]
|
||||
})
|
||||
]);
|
||||
};
|
||||
$mount(LabelDemo, labelTarget);
|
||||
}
|
||||
|
||||
// 3. Different Positions
|
||||
const positionsTarget = document.querySelector('#demo-positions');
|
||||
if (positionsTarget && !positionsTarget.hasChildNodes()) {
|
||||
const PositionsDemo = () => {
|
||||
const position = $('bottom-6 right-6');
|
||||
|
||||
return Div({ class: 'relative h-[500px] w-full bg-base-100 rounded-lg overflow-hidden' }, [
|
||||
Div({ class: 'absolute top-4 left-4 z-20 bg-base-200 p-2 rounded-lg shadow' }, [
|
||||
Select({
|
||||
value: position,
|
||||
options: [
|
||||
{ value: 'bottom-6 right-6', label: 'Bottom Right' },
|
||||
{ value: 'bottom-6 left-6', label: 'Bottom Left' },
|
||||
{ value: 'top-6 right-6', label: 'Top Right' },
|
||||
{ value: 'top-6 left-6', label: 'Top Left' }
|
||||
],
|
||||
onchange: (e) => position(e.target.value)
|
||||
})
|
||||
]),
|
||||
Div({ class: 'absolute inset-0 flex items-center justify-center text-sm opacity-50 pointer-events-none' }, [
|
||||
'FAB position changes relative to this container'
|
||||
]),
|
||||
Fab({
|
||||
position: () => position(),
|
||||
icon: '🧭',
|
||||
actions: [
|
||||
{ icon: '⬅️', label: 'Bottom Left', onclick: () => position('bottom-6 left-6') },
|
||||
{ icon: '➡️', label: 'Bottom Right', onclick: () => position('bottom-6 right-6') },
|
||||
{ icon: '⬆️', label: 'Top Right', onclick: () => position('top-6 right-6') },
|
||||
{ icon: '⬇️', label: 'Top Left', onclick: () => position('top-6 left-6') }
|
||||
]
|
||||
})
|
||||
]);
|
||||
};
|
||||
$mount(PositionsDemo, positionsTarget);
|
||||
}
|
||||
|
||||
// 4. Color Variants
|
||||
const colorsTarget = document.querySelector('#demo-colors');
|
||||
if (colorsTarget && !colorsTarget.hasChildNodes()) {
|
||||
const ColorsDemo = () => {
|
||||
const variant = $('primary');
|
||||
|
||||
const variants = {
|
||||
primary: { class: 'btn-primary', icon: '🔵' },
|
||||
secondary: { class: 'btn-secondary', icon: '🟣' },
|
||||
accent: { class: 'btn-accent', icon: '🔴' },
|
||||
info: { class: 'btn-info', icon: '🔷' },
|
||||
success: { class: 'btn-success', icon: '🟢' },
|
||||
warning: { class: 'btn-warning', icon: '🟡' },
|
||||
error: { class: 'btn-error', icon: '🔴' }
|
||||
};
|
||||
|
||||
return Div({ class: 'relative h-[300px] w-full bg-base-100 rounded-lg overflow-hidden' }, [
|
||||
Div({ class: 'absolute top-4 left-4 z-20 bg-base-200 p-2 rounded-lg shadow' }, [
|
||||
Select({
|
||||
value: variant,
|
||||
options: Object.keys(variants).map(v => ({ value: v, label: v.charAt(0).toUpperCase() + v.slice(1) })),
|
||||
onchange: (e) => variant(e.target.value)
|
||||
})
|
||||
]),
|
||||
Fab({
|
||||
class: variants[variant()].class,
|
||||
icon: variants[variant()].icon,
|
||||
actions: [
|
||||
{ icon: '📝', label: 'Action 1', onclick: () => Toast('Action 1', 'alert-info', 2000) },
|
||||
{ icon: '🎨', label: 'Action 2', onclick: () => Toast('Action 2', 'alert-info', 2000) },
|
||||
{ icon: '⚙️', label: 'Action 3', onclick: () => Toast('Action 3', 'alert-info', 2000) }
|
||||
]
|
||||
})
|
||||
]);
|
||||
};
|
||||
$mount(ColorsDemo, colorsTarget);
|
||||
}
|
||||
|
||||
// 5. Reactive Actions
|
||||
const reactiveTarget = document.querySelector('#demo-reactive');
|
||||
if (reactiveTarget && !reactiveTarget.hasChildNodes()) {
|
||||
const ReactiveActions = () => {
|
||||
const count = $(0);
|
||||
|
||||
const actions = () => [
|
||||
{
|
||||
icon: '🔢',
|
||||
label: `Count: ${count()}`,
|
||||
onclick: () => {}
|
||||
},
|
||||
{
|
||||
icon: '➕',
|
||||
label: 'Increment',
|
||||
onclick: () => count(count() + 1)
|
||||
},
|
||||
{
|
||||
icon: '➖',
|
||||
label: 'Decrement',
|
||||
onclick: () => count(count() - 1)
|
||||
},
|
||||
{
|
||||
icon: '🔄',
|
||||
label: 'Reset',
|
||||
onclick: () => count(0)
|
||||
}
|
||||
];
|
||||
|
||||
return Div({ class: 'relative h-[300px] w-full bg-base-100 rounded-lg overflow-hidden' }, [
|
||||
Fab({
|
||||
icon: () => count() > 0 ? `🔢 ${count()}` : '🎛️',
|
||||
actions: actions
|
||||
})
|
||||
]);
|
||||
};
|
||||
$mount(ReactiveActions, reactiveTarget);
|
||||
}
|
||||
|
||||
// 6. Document Actions
|
||||
const documentTarget = document.querySelector('#demo-document');
|
||||
if (documentTarget && !documentTarget.hasChildNodes()) {
|
||||
const DocumentActions = () => {
|
||||
const saved = $(false);
|
||||
|
||||
const handleSave = () => {
|
||||
saved(true);
|
||||
Toast('Document saved!', 'alert-success', 2000);
|
||||
setTimeout(() => saved(false), 3000);
|
||||
};
|
||||
|
||||
return Div({ class: 'relative h-[300px] w-full bg-base-100 rounded-lg overflow-hidden' }, [
|
||||
Div({ class: 'absolute inset-0 flex flex-col items-center justify-center' }, [
|
||||
Div({ class: 'text-6xl mb-4' }, '📄'),
|
||||
Div({ class: 'text-sm opacity-70' }, 'Untitled Document'),
|
||||
() => saved() ? Div({ class: 'mt-4' }, Alert({ type: 'success', message: '✓ Saved successfully' })) : null
|
||||
]),
|
||||
Fab({
|
||||
icon: '✏️',
|
||||
actions: [
|
||||
{ icon: '💾', label: 'Save', onclick: handleSave },
|
||||
{ icon: '📋', label: 'Copy', onclick: () => Toast('Copied!', 'alert-info', 2000) },
|
||||
{ icon: '✂️', label: 'Cut', onclick: () => Toast('Cut!', 'alert-info', 2000) },
|
||||
{ icon: '📎', label: 'Share', onclick: () => Toast('Share dialog', 'alert-info', 2000) }
|
||||
]
|
||||
})
|
||||
]);
|
||||
};
|
||||
$mount(DocumentActions, documentTarget);
|
||||
}
|
||||
|
||||
// 7. Messaging FAB
|
||||
const messagingTarget = document.querySelector('#demo-messaging');
|
||||
if (messagingTarget && !messagingTarget.hasChildNodes()) {
|
||||
const MessagingFAB = () => {
|
||||
const unread = $(3);
|
||||
|
||||
return Div({ class: 'relative h-[300px] w-full bg-base-100 rounded-lg overflow-hidden' }, [
|
||||
Div({ class: 'absolute inset-0 flex flex-col items-center justify-center' }, [
|
||||
Div({ class: 'text-6xl mb-4' }, '💬'),
|
||||
Div({ class: 'text-sm opacity-70' }, 'Messages'),
|
||||
() => unread() > 0 ? Div({ class: 'badge badge-error mt-2' }, `${unread()} unread`) : null
|
||||
]),
|
||||
Fab({
|
||||
icon: () => `💬${unread() > 0 ? ` ${unread()}` : ''}`,
|
||||
class: 'btn-primary',
|
||||
actions: [
|
||||
{
|
||||
icon: '👤',
|
||||
label: 'New Message',
|
||||
onclick: () => Toast('Start new conversation', 'alert-info', 2000)
|
||||
},
|
||||
{
|
||||
icon: '👥',
|
||||
label: 'Group Chat',
|
||||
onclick: () => Toast('Create group', 'alert-info', 2000)
|
||||
},
|
||||
{
|
||||
icon: '📞',
|
||||
label: 'Voice Call',
|
||||
onclick: () => Toast('Start call', 'alert-info', 2000)
|
||||
},
|
||||
{
|
||||
icon: '📹',
|
||||
label: 'Video Call',
|
||||
onclick: () => Toast('Start video call', 'alert-info', 2000)
|
||||
},
|
||||
{
|
||||
icon: '🔔',
|
||||
label: () => `Mark as read (${unread()})`,
|
||||
onclick: () => {
|
||||
unread(0);
|
||||
Toast('All messages read', 'alert-success', 2000);
|
||||
}
|
||||
}
|
||||
]
|
||||
})
|
||||
]);
|
||||
};
|
||||
$mount(MessagingFAB, messagingTarget);
|
||||
}
|
||||
|
||||
// 8. Flower Style FAB
|
||||
const flowerTarget = document.querySelector('#demo-flower');
|
||||
if (flowerTarget && !flowerTarget.hasChildNodes()) {
|
||||
const FlowerDemo = () => {
|
||||
return Div({ class: 'relative h-[300px] w-full bg-base-100 rounded-lg overflow-hidden' }, [
|
||||
Div({ class: 'absolute inset-0 flex items-center justify-center text-sm opacity-50' }, [
|
||||
'Flower style FAB (quarter circle arrangement)'
|
||||
]),
|
||||
Fab({
|
||||
icon: '🌸',
|
||||
class: 'fab-flower',
|
||||
actions: [
|
||||
{ icon: '📷', label: 'Camera', onclick: () => Toast('Camera', 'alert-info', 2000) },
|
||||
{ icon: '🎨', label: 'Gallery', onclick: () => Toast('Gallery', 'alert-info', 2000) },
|
||||
{ icon: '🎤', label: 'Voice', onclick: () => Toast('Voice', 'alert-info', 2000) },
|
||||
{ icon: '📍', label: 'Location', onclick: () => Toast('Location', 'alert-info', 2000) }
|
||||
]
|
||||
})
|
||||
]);
|
||||
};
|
||||
$mount(FlowerDemo, flowerTarget);
|
||||
}
|
||||
|
||||
// 9. All Variants
|
||||
const variantsTarget = document.querySelector('#demo-variants');
|
||||
if (variantsTarget && !variantsTarget.hasChildNodes()) {
|
||||
const VariantsDemo = () => {
|
||||
const actions = [
|
||||
{ icon: '⭐', label: 'Favorite', onclick: () => Toast('Favorited', 'alert-info', 2000) },
|
||||
{ icon: '🔔', label: 'Remind', onclick: () => Toast('Reminder set', 'alert-info', 2000) },
|
||||
{ icon: '📅', label: 'Schedule', onclick: () => Toast('Scheduled', 'alert-info', 2000) }
|
||||
];
|
||||
|
||||
return Div({ class: 'relative h-[400px] w-full bg-base-100 rounded-lg overflow-hidden' }, [
|
||||
Div({ class: 'grid grid-cols-2 gap-4 p-4 h-full' }, [
|
||||
Div({ class: 'relative border rounded-lg bg-base-200' }, [
|
||||
Span({ class: 'absolute top-2 left-2 text-xs opacity-50' }, 'Primary'),
|
||||
Fab({ icon: '🔵', class: 'btn-primary', actions, position: 'bottom-6 left-6' })
|
||||
]),
|
||||
Div({ class: 'relative border rounded-lg bg-base-200' }, [
|
||||
Span({ class: 'absolute top-2 left-2 text-xs opacity-50' }, 'Secondary'),
|
||||
Fab({ icon: '🟣', class: 'btn-secondary', actions, position: 'bottom-6 right-6' })
|
||||
]),
|
||||
Div({ class: 'relative border rounded-lg bg-base-200' }, [
|
||||
Span({ class: 'absolute top-2 left-2 text-xs opacity-50' }, 'Accent'),
|
||||
Fab({ icon: '🔴', class: 'btn-accent', actions, position: 'top-6 left-6' })
|
||||
]),
|
||||
Div({ class: 'relative border rounded-lg bg-base-200' }, [
|
||||
Span({ class: 'absolute top-2 left-2 text-xs opacity-50' }, 'Success'),
|
||||
Fab({ icon: '🟢', class: 'btn-success', actions, position: 'top-6 right-6' })
|
||||
])
|
||||
])
|
||||
]);
|
||||
};
|
||||
$mount(VariantsDemo, variantsTarget);
|
||||
}
|
||||
};
|
||||
|
||||
initFabExamples();
|
||||
|
||||
if (window.$docsify) {
|
||||
window.$docsify.plugins = [].concat(window.$docsify.plugins || [], (hook) => {
|
||||
hook.doneEach(initFabExamples);
|
||||
});
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
549
docs/components/fieldset.md
Normal file
549
docs/components/fieldset.md
Normal file
@@ -0,0 +1,549 @@
|
||||
# Fieldset
|
||||
|
||||
Fieldset component for grouping form fields with optional legend and consistent styling.
|
||||
|
||||
## Tag
|
||||
|
||||
`Fieldset`
|
||||
|
||||
## Props
|
||||
|
||||
| Prop | Type | Default | Description |
|
||||
| :----------- | :--------------------------- | :---------- | :----------------------------------------------- |
|
||||
| `legend` | `string \| VNode \| Signal` | `-` | Fieldset legend/title |
|
||||
| `class` | `string` | `''` | Additional CSS classes (DaisyUI + Tailwind) |
|
||||
| `children` | `VNode \| Array<VNode>` | Required | Form fields or content inside the fieldset |
|
||||
|
||||
## Live Examples
|
||||
|
||||
### Basic Fieldset
|
||||
|
||||
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
|
||||
<div id="demo-basic" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const BasicDemo = () => {
|
||||
return Fieldset({
|
||||
legend: 'User Information',
|
||||
class: 'w-full max-w-md mx-auto'
|
||||
}, [
|
||||
Div({ class: 'space-y-4' }, [
|
||||
Input({ label: 'Full Name', placeholder: 'Enter your name' }),
|
||||
Input({ label: 'Email', type: 'email', placeholder: 'user@example.com' }),
|
||||
Input({ label: 'Phone', type: 'tel', placeholder: '+1 234 567 890' })
|
||||
])
|
||||
]);
|
||||
};
|
||||
$mount(BasicDemo, '#demo-basic');
|
||||
```
|
||||
|
||||
### With Reactive Legend
|
||||
|
||||
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
|
||||
<div id="demo-reactive" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const ReactiveDemo = () => {
|
||||
const name = $('');
|
||||
const email = $('');
|
||||
const isValid = () => name().length > 0 && email().includes('@');
|
||||
|
||||
return Fieldset({
|
||||
legend: () => isValid() ? '✓ Valid Form' : '✗ Incomplete Form',
|
||||
class: 'w-full max-w-md mx-auto'
|
||||
}, [
|
||||
Div({ class: 'space-y-4' }, [
|
||||
Input({
|
||||
label: 'Full Name',
|
||||
value: name,
|
||||
oninput: (e) => name(e.target.value),
|
||||
placeholder: 'Enter your name'
|
||||
}),
|
||||
Input({
|
||||
label: 'Email',
|
||||
type: 'email',
|
||||
value: email,
|
||||
oninput: (e) => email(e.target.value),
|
||||
placeholder: 'user@example.com'
|
||||
}),
|
||||
() => isValid()
|
||||
? Alert({ type: 'success', message: 'Form is ready to submit' })
|
||||
: Alert({ type: 'warning', message: 'Please fill all required fields' })
|
||||
])
|
||||
]);
|
||||
};
|
||||
$mount(ReactiveDemo, '#demo-reactive');
|
||||
```
|
||||
|
||||
### Address Form
|
||||
|
||||
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
|
||||
<div id="demo-address" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const AddressDemo = () => {
|
||||
const address = $('');
|
||||
const city = $('');
|
||||
const zip = $('');
|
||||
const country = $('us');
|
||||
|
||||
return Fieldset({
|
||||
legend: Span({ class: 'flex items-center gap-2' }, ['📍', 'Shipping Address']),
|
||||
class: 'w-full max-w-md mx-auto'
|
||||
}, [
|
||||
Div({ class: 'space-y-4' }, [
|
||||
Input({ label: 'Street Address', value: address, placeholder: '123 Main St', oninput: (e) => address(e.target.value) }),
|
||||
Div({ class: 'grid grid-cols-2 gap-4' }, [
|
||||
Input({ label: 'City', value: city, placeholder: 'City', oninput: (e) => city(e.target.value) }),
|
||||
Input({ label: 'ZIP Code', value: zip, placeholder: 'ZIP', oninput: (e) => zip(e.target.value) })
|
||||
]),
|
||||
Select({
|
||||
label: 'Country',
|
||||
value: country,
|
||||
options: [
|
||||
{ value: 'us', label: 'United States' },
|
||||
{ value: 'ca', label: 'Canada' },
|
||||
{ value: 'mx', label: 'Mexico' }
|
||||
],
|
||||
onchange: (e) => country(e.target.value)
|
||||
})
|
||||
])
|
||||
]);
|
||||
};
|
||||
$mount(AddressDemo, '#demo-address');
|
||||
```
|
||||
|
||||
### Payment Method
|
||||
|
||||
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
|
||||
<div id="demo-payment" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const PaymentDemo = () => {
|
||||
const method = $('credit');
|
||||
const cardNumber = $('');
|
||||
const expiry = $('');
|
||||
const cvv = $('');
|
||||
|
||||
return Fieldset({
|
||||
legend: Span({ class: 'flex items-center gap-2' }, ['💳', 'Payment Details']),
|
||||
class: 'w-full max-w-md mx-auto'
|
||||
}, [
|
||||
Div({ class: 'space-y-4' }, [
|
||||
Div({ class: 'flex gap-4' }, [
|
||||
Radio({ label: 'Credit Card', value: method, radioValue: 'credit', onclick: () => method('credit') }),
|
||||
Radio({ label: 'PayPal', value: method, radioValue: 'paypal', onclick: () => method('paypal') }),
|
||||
Radio({ label: 'Bank Transfer', value: method, radioValue: 'bank', onclick: () => method('bank') })
|
||||
]),
|
||||
() => method() === 'credit' ? Div({ class: 'space-y-4' }, [
|
||||
Input({ label: 'Card Number', value: cardNumber, placeholder: '1234 5678 9012 3456', oninput: (e) => cardNumber(e.target.value) }),
|
||||
Div({ class: 'grid grid-cols-2 gap-4' }, [
|
||||
Input({ label: 'Expiry Date', value: expiry, placeholder: 'MM/YY', oninput: (e) => expiry(e.target.value) }),
|
||||
Input({ label: 'CVV', type: 'password', value: cvv, placeholder: '123', oninput: (e) => cvv(e.target.value) })
|
||||
])
|
||||
]) : null,
|
||||
() => method() === 'paypal' ? Alert({ type: 'info', message: 'You will be redirected to PayPal after confirming.' }) : null,
|
||||
() => method() === 'bank' ? Alert({ type: 'warning', message: 'Bank transfer details will be sent via email.' }) : null
|
||||
])
|
||||
]);
|
||||
};
|
||||
$mount(PaymentDemo, '#demo-payment');
|
||||
```
|
||||
|
||||
### Preferences Panel
|
||||
|
||||
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
|
||||
<div id="demo-preferences" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const PreferencesDemo = () => {
|
||||
const theme = $('light');
|
||||
const language = $('en');
|
||||
const notifications = $(true);
|
||||
|
||||
return Fieldset({
|
||||
legend: Span({ class: 'flex items-center gap-2' }, ['⚙️', 'Preferences']),
|
||||
class: 'w-full max-w-md mx-auto'
|
||||
}, [
|
||||
Div({ class: 'space-y-4' }, [
|
||||
Div({ class: 'form-control' }, [
|
||||
Span({ class: 'label-text mb-2' }, 'Theme'),
|
||||
Div({ class: 'flex gap-4' }, [
|
||||
Radio({ label: 'Light', value: theme, radioValue: 'light', onclick: () => theme('light') }),
|
||||
Radio({ label: 'Dark', value: theme, radioValue: 'dark', onclick: () => theme('dark') }),
|
||||
Radio({ label: 'System', value: theme, radioValue: 'system', onclick: () => theme('system') })
|
||||
])
|
||||
]),
|
||||
Select({
|
||||
label: 'Language',
|
||||
value: language,
|
||||
options: [
|
||||
{ value: 'en', label: 'English' },
|
||||
{ value: 'es', label: 'Español' },
|
||||
{ value: 'fr', label: 'Français' }
|
||||
],
|
||||
onchange: (e) => language(e.target.value)
|
||||
}),
|
||||
Checkbox({
|
||||
label: 'Enable notifications',
|
||||
value: notifications,
|
||||
onclick: () => notifications(!notifications())
|
||||
})
|
||||
])
|
||||
]);
|
||||
};
|
||||
$mount(PreferencesDemo, '#demo-preferences');
|
||||
```
|
||||
|
||||
### Registration Form
|
||||
|
||||
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
|
||||
<div id="demo-registration" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const RegistrationDemo = () => {
|
||||
const username = $('');
|
||||
const email = $('');
|
||||
const password = $('');
|
||||
const confirmPassword = $('');
|
||||
const accepted = $(false);
|
||||
|
||||
const passwordsMatch = () => password() === confirmPassword();
|
||||
const isFormValid = () => username() && email().includes('@') && password().length >= 6 && passwordsMatch() && accepted();
|
||||
|
||||
const handleSubmit = () => {
|
||||
if (isFormValid()) {
|
||||
Toast('Registration successful!', 'alert-success', 2000);
|
||||
}
|
||||
};
|
||||
|
||||
return Fieldset({
|
||||
legend: Span({ class: 'flex items-center gap-2' }, ['📝', 'Create Account']),
|
||||
class: 'w-full max-w-md mx-auto'
|
||||
}, [
|
||||
Div({ class: 'space-y-4' }, [
|
||||
Input({ label: 'Username', value: username, placeholder: 'Choose a username', oninput: (e) => username(e.target.value) }),
|
||||
Input({ label: 'Email', type: 'email', value: email, placeholder: 'your@email.com', oninput: (e) => email(e.target.value) }),
|
||||
Input({ label: 'Password', type: 'password', value: password, placeholder: 'Min. 6 characters', oninput: (e) => password(e.target.value) }),
|
||||
Input({
|
||||
label: 'Confirm Password',
|
||||
type: 'password',
|
||||
value: confirmPassword,
|
||||
error: () => confirmPassword() && !passwordsMatch() ? 'Passwords do not match' : '',
|
||||
oninput: (e) => confirmPassword(e.target.value)
|
||||
}),
|
||||
Checkbox({
|
||||
label: 'I accept the Terms and Conditions',
|
||||
value: accepted,
|
||||
onclick: () => accepted(!accepted())
|
||||
}),
|
||||
() => !isFormValid() && (username() || email() || password()) ? Alert({ type: 'warning', message: 'Please complete all fields correctly' }) : null,
|
||||
Button({
|
||||
class: 'btn btn-primary w-full',
|
||||
onclick: handleSubmit,
|
||||
disabled: () => !isFormValid()
|
||||
}, 'Register')
|
||||
])
|
||||
]);
|
||||
};
|
||||
$mount(RegistrationDemo, '#demo-registration');
|
||||
```
|
||||
|
||||
### All Variants
|
||||
|
||||
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
|
||||
<div id="demo-variants" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-col gap-4"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const VariantsDemo = () => {
|
||||
const commonContent = Div({ class: 'space-y-4' }, [
|
||||
Input({ label: 'Field 1', placeholder: 'Enter value' }),
|
||||
Input({ label: 'Field 2', placeholder: 'Enter value' }),
|
||||
Button({ class: 'btn btn-primary' }, 'Submit')
|
||||
]);
|
||||
|
||||
return Div({ class: 'flex flex-col gap-4' }, [
|
||||
Fieldset({ legend: 'Default Fieldset', class: 'w-full' }, [commonContent]),
|
||||
Fieldset({ legend: 'With Shadow', class: 'w-full shadow-lg' }, [commonContent]),
|
||||
Fieldset({ legend: 'With Background', class: 'w-full bg-base-100' }, [commonContent])
|
||||
]);
|
||||
};
|
||||
$mount(VariantsDemo, '#demo-variants');
|
||||
```
|
||||
|
||||
<script>
|
||||
(function() {
|
||||
const initFieldsetExamples = () => {
|
||||
|
||||
// 1. Basic Fieldset
|
||||
const basicTarget = document.querySelector('#demo-basic');
|
||||
if (basicTarget && !basicTarget.hasChildNodes()) {
|
||||
const BasicDemo = () => {
|
||||
return Fieldset({
|
||||
legend: 'User Information',
|
||||
class: 'w-full max-w-md mx-auto'
|
||||
}, [
|
||||
Div({ class: 'space-y-4' }, [
|
||||
Input({ label: 'Full Name', placeholder: 'Enter your name' }),
|
||||
Input({ label: 'Email', type: 'email', placeholder: 'user@example.com' }),
|
||||
Input({ label: 'Phone', type: 'tel', placeholder: '+1 234 567 890' })
|
||||
])
|
||||
]);
|
||||
};
|
||||
$mount(BasicDemo, basicTarget);
|
||||
}
|
||||
|
||||
// 2. With Reactive Legend
|
||||
const reactiveTarget = document.querySelector('#demo-reactive');
|
||||
if (reactiveTarget && !reactiveTarget.hasChildNodes()) {
|
||||
const ReactiveDemo = () => {
|
||||
const name = $('');
|
||||
const email = $('');
|
||||
const isValid = () => name().length > 0 && email().includes('@');
|
||||
|
||||
return Fieldset({
|
||||
legend: () => isValid() ? '✓ Valid Form' : '✗ Incomplete Form',
|
||||
class: 'w-full max-w-md mx-auto'
|
||||
}, [
|
||||
Div({ class: 'space-y-4' }, [
|
||||
Input({
|
||||
label: 'Full Name',
|
||||
value: name,
|
||||
oninput: (e) => name(e.target.value),
|
||||
placeholder: 'Enter your name'
|
||||
}),
|
||||
Input({
|
||||
label: 'Email',
|
||||
type: 'email',
|
||||
value: email,
|
||||
oninput: (e) => email(e.target.value),
|
||||
placeholder: 'user@example.com'
|
||||
}),
|
||||
() => isValid()
|
||||
? Alert({ type: 'success', message: 'Form is ready to submit' })
|
||||
: Alert({ type: 'warning', message: 'Please fill all required fields' })
|
||||
])
|
||||
]);
|
||||
};
|
||||
$mount(ReactiveDemo, reactiveTarget);
|
||||
}
|
||||
|
||||
// 3. Address Form
|
||||
const addressTarget = document.querySelector('#demo-address');
|
||||
if (addressTarget && !addressTarget.hasChildNodes()) {
|
||||
const AddressDemo = () => {
|
||||
const address = $('');
|
||||
const city = $('');
|
||||
const zip = $('');
|
||||
const country = $('us');
|
||||
|
||||
return Fieldset({
|
||||
legend: Span({ class: 'flex items-center gap-2' }, ['📍', 'Shipping Address']),
|
||||
class: 'w-full max-w-md mx-auto'
|
||||
}, [
|
||||
Div({ class: 'space-y-4' }, [
|
||||
Input({ label: 'Street Address', value: address, placeholder: '123 Main St', oninput: (e) => address(e.target.value) }),
|
||||
Div({ class: 'grid grid-cols-2 gap-4' }, [
|
||||
Input({ label: 'City', value: city, placeholder: 'City', oninput: (e) => city(e.target.value) }),
|
||||
Input({ label: 'ZIP Code', value: zip, placeholder: 'ZIP', oninput: (e) => zip(e.target.value) })
|
||||
]),
|
||||
Select({
|
||||
label: 'Country',
|
||||
value: country,
|
||||
options: [
|
||||
{ value: 'us', label: 'United States' },
|
||||
{ value: 'ca', label: 'Canada' },
|
||||
{ value: 'mx', label: 'Mexico' }
|
||||
],
|
||||
onchange: (e) => country(e.target.value)
|
||||
})
|
||||
])
|
||||
]);
|
||||
};
|
||||
$mount(AddressDemo, addressTarget);
|
||||
}
|
||||
|
||||
// 4. Payment Method
|
||||
const paymentTarget = document.querySelector('#demo-payment');
|
||||
if (paymentTarget && !paymentTarget.hasChildNodes()) {
|
||||
const PaymentDemo = () => {
|
||||
const method = $('credit');
|
||||
const cardNumber = $('');
|
||||
const expiry = $('');
|
||||
const cvv = $('');
|
||||
|
||||
return Fieldset({
|
||||
legend: Span({ class: 'flex items-center gap-2' }, ['💳', 'Payment Details']),
|
||||
class: 'w-full max-w-md mx-auto'
|
||||
}, [
|
||||
Div({ class: 'space-y-4' }, [
|
||||
Div({ class: 'flex gap-4' }, [
|
||||
Radio({ label: 'Credit Card', value: method, radioValue: 'credit', onclick: () => method('credit') }),
|
||||
Radio({ label: 'PayPal', value: method, radioValue: 'paypal', onclick: () => method('paypal') }),
|
||||
Radio({ label: 'Bank Transfer', value: method, radioValue: 'bank', onclick: () => method('bank') })
|
||||
]),
|
||||
() => method() === 'credit' ? Div({ class: 'space-y-4' }, [
|
||||
Input({ label: 'Card Number', value: cardNumber, placeholder: '1234 5678 9012 3456', oninput: (e) => cardNumber(e.target.value) }),
|
||||
Div({ class: 'grid grid-cols-2 gap-4' }, [
|
||||
Input({ label: 'Expiry Date', value: expiry, placeholder: 'MM/YY', oninput: (e) => expiry(e.target.value) }),
|
||||
Input({ label: 'CVV', type: 'password', value: cvv, placeholder: '123', oninput: (e) => cvv(e.target.value) })
|
||||
])
|
||||
]) : null,
|
||||
() => method() === 'paypal' ? Alert({ type: 'info', message: 'You will be redirected to PayPal after confirming.' }) : null,
|
||||
() => method() === 'bank' ? Alert({ type: 'warning', message: 'Bank transfer details will be sent via email.' }) : null
|
||||
])
|
||||
]);
|
||||
};
|
||||
$mount(PaymentDemo, paymentTarget);
|
||||
}
|
||||
|
||||
// 5. Preferences Panel
|
||||
const preferencesTarget = document.querySelector('#demo-preferences');
|
||||
if (preferencesTarget && !preferencesTarget.hasChildNodes()) {
|
||||
const PreferencesDemo = () => {
|
||||
const theme = $('light');
|
||||
const language = $('en');
|
||||
const notifications = $(true);
|
||||
|
||||
return Fieldset({
|
||||
legend: Span({ class: 'flex items-center gap-2' }, ['⚙️', 'Preferences']),
|
||||
class: 'w-full max-w-md mx-auto'
|
||||
}, [
|
||||
Div({ class: 'space-y-4' }, [
|
||||
Div({ class: 'form-control' }, [
|
||||
Span({ class: 'label-text mb-2' }, 'Theme'),
|
||||
Div({ class: 'flex gap-4' }, [
|
||||
Radio({ label: 'Light', value: theme, radioValue: 'light', onclick: () => theme('light') }),
|
||||
Radio({ label: 'Dark', value: theme, radioValue: 'dark', onclick: () => theme('dark') }),
|
||||
Radio({ label: 'System', value: theme, radioValue: 'system', onclick: () => theme('system') })
|
||||
])
|
||||
]),
|
||||
Select({
|
||||
label: 'Language',
|
||||
value: language,
|
||||
options: [
|
||||
{ value: 'en', label: 'English' },
|
||||
{ value: 'es', label: 'Español' },
|
||||
{ value: 'fr', label: 'Français' }
|
||||
],
|
||||
onchange: (e) => language(e.target.value)
|
||||
}),
|
||||
Checkbox({
|
||||
label: 'Enable notifications',
|
||||
value: notifications,
|
||||
onclick: () => notifications(!notifications())
|
||||
})
|
||||
])
|
||||
]);
|
||||
};
|
||||
$mount(PreferencesDemo, preferencesTarget);
|
||||
}
|
||||
|
||||
// 6. Registration Form
|
||||
const registrationTarget = document.querySelector('#demo-registration');
|
||||
if (registrationTarget && !registrationTarget.hasChildNodes()) {
|
||||
const RegistrationDemo = () => {
|
||||
const username = $('');
|
||||
const email = $('');
|
||||
const password = $('');
|
||||
const confirmPassword = $('');
|
||||
const accepted = $(false);
|
||||
|
||||
const passwordsMatch = () => password() === confirmPassword();
|
||||
const isFormValid = () => username() && email().includes('@') && password().length >= 6 && passwordsMatch() && accepted();
|
||||
|
||||
const handleSubmit = () => {
|
||||
if (isFormValid()) {
|
||||
Toast('Registration successful!', 'alert-success', 2000);
|
||||
}
|
||||
};
|
||||
|
||||
return Fieldset({
|
||||
legend: Span({ class: 'flex items-center gap-2' }, ['📝', 'Create Account']),
|
||||
class: 'w-full max-w-md mx-auto'
|
||||
}, [
|
||||
Div({ class: 'space-y-4' }, [
|
||||
Input({ label: 'Username', value: username, placeholder: 'Choose a username', oninput: (e) => username(e.target.value) }),
|
||||
Input({ label: 'Email', type: 'email', value: email, placeholder: 'your@email.com', oninput: (e) => email(e.target.value) }),
|
||||
Input({ label: 'Password', type: 'password', value: password, placeholder: 'Min. 6 characters', oninput: (e) => password(e.target.value) }),
|
||||
Input({
|
||||
label: 'Confirm Password',
|
||||
type: 'password',
|
||||
value: confirmPassword,
|
||||
error: () => confirmPassword() && !passwordsMatch() ? 'Passwords do not match' : '',
|
||||
oninput: (e) => confirmPassword(e.target.value)
|
||||
}),
|
||||
Checkbox({
|
||||
label: 'I accept the Terms and Conditions',
|
||||
value: accepted,
|
||||
onclick: () => accepted(!accepted())
|
||||
}),
|
||||
() => !isFormValid() && (username() || email() || password()) ? Alert({ type: 'warning', message: 'Please complete all fields correctly' }) : null,
|
||||
Button({
|
||||
class: 'btn btn-primary w-full',
|
||||
onclick: handleSubmit,
|
||||
disabled: () => !isFormValid()
|
||||
}, 'Register')
|
||||
])
|
||||
]);
|
||||
};
|
||||
$mount(RegistrationDemo, registrationTarget);
|
||||
}
|
||||
|
||||
// 7. All Variants
|
||||
const variantsTarget = document.querySelector('#demo-variants');
|
||||
if (variantsTarget && !variantsTarget.hasChildNodes()) {
|
||||
const VariantsDemo = () => {
|
||||
const commonContent = Div({ class: 'space-y-4' }, [
|
||||
Input({ label: 'Field 1', placeholder: 'Enter value' }),
|
||||
Input({ label: 'Field 2', placeholder: 'Enter value' }),
|
||||
Button({ class: 'btn btn-primary' }, 'Submit')
|
||||
]);
|
||||
|
||||
return Div({ class: 'flex flex-col gap-4' }, [
|
||||
Fieldset({ legend: 'Default Fieldset', class: 'w-full' }, [commonContent]),
|
||||
Fieldset({ legend: 'With Shadow', class: 'w-full shadow-lg' }, [commonContent]),
|
||||
Fieldset({ legend: 'With Background', class: 'w-full bg-base-100' }, [commonContent])
|
||||
]);
|
||||
};
|
||||
$mount(VariantsDemo, variantsTarget);
|
||||
}
|
||||
};
|
||||
|
||||
initFieldsetExamples();
|
||||
|
||||
if (window.$docsify) {
|
||||
window.$docsify.plugins = [].concat(window.$docsify.plugins || [], (hook) => {
|
||||
hook.doneEach(initFieldsetExamples);
|
||||
});
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
597
docs/components/loading.md
Normal file
597
docs/components/loading.md
Normal file
@@ -0,0 +1,597 @@
|
||||
# Loading
|
||||
|
||||
Loading spinner component for indicating loading states with customizable size and colors.
|
||||
|
||||
## Tag
|
||||
|
||||
`Loading`
|
||||
|
||||
## Props
|
||||
|
||||
| Prop | Type | Default | Description |
|
||||
| :----------- | :--------------------------- | :--------------- | :----------------------------------------------- |
|
||||
| `$show` | `boolean \| Signal<boolean>` | `true` | Show/hide the loading spinner |
|
||||
| `class` | `string` | `''` | Additional CSS classes (DaisyUI loading variants)|
|
||||
|
||||
## Live Examples
|
||||
|
||||
### Basic Loading
|
||||
|
||||
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
|
||||
<div id="demo-basic" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-wrap gap-8 justify-center items-center"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const BasicDemo = () => {
|
||||
return Div({ class: 'flex flex-wrap gap-8 justify-center items-center' }, [
|
||||
Loading({ $show: true, class: 'loading-spinner' }),
|
||||
Loading({ $show: true, class: 'loading-dots' }),
|
||||
Loading({ $show: true, class: 'loading-ring' }),
|
||||
Loading({ $show: true, class: 'loading-ball' }),
|
||||
Loading({ $show: true, class: 'loading-bars' }),
|
||||
Loading({ $show: true, class: 'loading-infinity' })
|
||||
]);
|
||||
};
|
||||
$mount(BasicDemo, '#demo-basic');
|
||||
```
|
||||
|
||||
### Loading Sizes
|
||||
|
||||
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
|
||||
<div id="demo-sizes" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-wrap gap-8 justify-center items-center"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const SizesDemo = () => {
|
||||
return Div({ class: 'flex flex-wrap gap-8 justify-center items-center' }, [
|
||||
Div({ class: 'text-center' }, [
|
||||
Loading({ $show: true, class: 'loading-spinner loading-xs' }),
|
||||
Div({ class: 'text-xs mt-2' }, 'Extra Small')
|
||||
]),
|
||||
Div({ class: 'text-center' }, [
|
||||
Loading({ $show: true, class: 'loading-spinner loading-sm' }),
|
||||
Div({ class: 'text-xs mt-2' }, 'Small')
|
||||
]),
|
||||
Div({ class: 'text-center' }, [
|
||||
Loading({ $show: true, class: 'loading-spinner loading-md' }),
|
||||
Div({ class: 'text-xs mt-2' }, 'Medium')
|
||||
]),
|
||||
Div({ class: 'text-center' }, [
|
||||
Loading({ $show: true, class: 'loading-spinner loading-lg' }),
|
||||
Div({ class: 'text-xs mt-2' }, 'Large')
|
||||
])
|
||||
]);
|
||||
};
|
||||
$mount(SizesDemo, '#demo-sizes');
|
||||
```
|
||||
|
||||
### Loading Colors
|
||||
|
||||
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
|
||||
<div id="demo-colors" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-wrap gap-8 justify-center items-center"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const ColorsDemo = () => {
|
||||
return Div({ class: 'flex flex-wrap gap-8 justify-center items-center' }, [
|
||||
Loading({ $show: true, class: 'loading-spinner text-primary' }),
|
||||
Loading({ $show: true, class: 'loading-spinner text-secondary' }),
|
||||
Loading({ $show: true, class: 'loading-spinner text-accent' }),
|
||||
Loading({ $show: true, class: 'loading-spinner text-info' }),
|
||||
Loading({ $show: true, class: 'loading-spinner text-success' }),
|
||||
Loading({ $show: true, class: 'loading-spinner text-warning' }),
|
||||
Loading({ $show: true, class: 'loading-spinner text-error' })
|
||||
]);
|
||||
};
|
||||
$mount(ColorsDemo, '#demo-colors');
|
||||
```
|
||||
|
||||
### Button Loading State
|
||||
|
||||
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
|
||||
<div id="demo-button" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-col gap-4 items-center"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const ButtonDemo = () => {
|
||||
const isLoading = $(false);
|
||||
|
||||
const handleClick = async () => {
|
||||
isLoading(true);
|
||||
await new Promise(resolve => setTimeout(resolve, 2000));
|
||||
isLoading(false);
|
||||
Toast('Operation completed!', 'alert-success', 2000);
|
||||
};
|
||||
|
||||
return Div({ class: 'flex flex-col gap-4 items-center' }, [
|
||||
Button({
|
||||
class: 'btn btn-primary',
|
||||
loading: isLoading,
|
||||
onclick: handleClick
|
||||
}, 'Submit'),
|
||||
Div({ class: 'text-sm opacity-70' }, 'Click the button to see loading state')
|
||||
]);
|
||||
};
|
||||
$mount(ButtonDemo, '#demo-button');
|
||||
```
|
||||
|
||||
### Async Data Loading
|
||||
|
||||
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
|
||||
<div id="demo-async" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const AsyncDemo = () => {
|
||||
const loading = $(false);
|
||||
const data = $(null);
|
||||
const error = $(null);
|
||||
|
||||
const loadData = async () => {
|
||||
loading(true);
|
||||
error(null);
|
||||
data(null);
|
||||
|
||||
try {
|
||||
await new Promise(resolve => setTimeout(resolve, 2000));
|
||||
const result = {
|
||||
users: 1234,
|
||||
posts: 5678,
|
||||
comments: 9012
|
||||
};
|
||||
data(result);
|
||||
Toast('Data loaded successfully!', 'alert-success', 2000);
|
||||
} catch (err) {
|
||||
error('Failed to load data');
|
||||
Toast('Error loading data', 'alert-error', 2000);
|
||||
} finally {
|
||||
loading(false);
|
||||
}
|
||||
};
|
||||
|
||||
return Div({ class: 'flex flex-col gap-4' }, [
|
||||
Div({ class: 'flex justify-center' }, [
|
||||
Button({
|
||||
class: 'btn btn-primary',
|
||||
onclick: loadData,
|
||||
disabled: () => loading()
|
||||
}, loading() ? 'Loading...' : 'Load Data')
|
||||
]),
|
||||
Div({ class: 'relative min-h-[200px] flex items-center justify-center' }, [
|
||||
() => loading() ? Loading({ $show: true, class: 'loading-spinner loading-lg' }) : null,
|
||||
() => data() ? Div({ class: 'grid grid-cols-3 gap-4 w-full' }, [
|
||||
Div({ class: 'stat' }, [
|
||||
Div({ class: 'stat-title' }, 'Users'),
|
||||
Div({ class: 'stat-value' }, data().users)
|
||||
]),
|
||||
Div({ class: 'stat' }, [
|
||||
Div({ class: 'stat-title' }, 'Posts'),
|
||||
Div({ class: 'stat-value' }, data().posts)
|
||||
]),
|
||||
Div({ class: 'stat' }, [
|
||||
Div({ class: 'stat-title' }, 'Comments'),
|
||||
Div({ class: 'stat-value' }, data().comments)
|
||||
])
|
||||
]) : null,
|
||||
() => error() ? Alert({ type: 'error', message: error() }) : null
|
||||
])
|
||||
]);
|
||||
};
|
||||
$mount(AsyncDemo, '#demo-async');
|
||||
```
|
||||
|
||||
### Full Page Loading
|
||||
|
||||
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
|
||||
<div id="demo-fullpage" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const FullpageDemo = () => {
|
||||
const isLoading = $(false);
|
||||
|
||||
const simulatePageLoad = () => {
|
||||
isLoading(true);
|
||||
setTimeout(() => {
|
||||
isLoading(false);
|
||||
Toast('Page loaded!', 'alert-success', 2000);
|
||||
}, 2000);
|
||||
};
|
||||
|
||||
return Div({ class: 'relative' }, [
|
||||
Div({ class: 'flex justify-center p-8' }, [
|
||||
Button({
|
||||
class: 'btn btn-primary',
|
||||
onclick: simulatePageLoad
|
||||
}, 'Simulate Page Load')
|
||||
]),
|
||||
() => isLoading() ? Loading({ $show: true, class: 'loading-spinner loading-lg' }) : null
|
||||
]);
|
||||
};
|
||||
$mount(FullpageDemo, '#demo-fullpage');
|
||||
```
|
||||
|
||||
### Conditional Loading
|
||||
|
||||
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
|
||||
<div id="demo-conditional" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const ConditionalDemo = () => {
|
||||
const loadingState = $('idle');
|
||||
const content = $('');
|
||||
|
||||
const simulateAction = (action) => {
|
||||
loadingState('loading');
|
||||
setTimeout(() => {
|
||||
content(`Action: ${action} completed at ${new Date().toLocaleTimeString()}`);
|
||||
loadingState('success');
|
||||
setTimeout(() => loadingState('idle'), 1500);
|
||||
}, 1500);
|
||||
};
|
||||
|
||||
const loadingStates = {
|
||||
idle: null,
|
||||
loading: Loading({ $show: true, class: 'loading-spinner text-primary' }),
|
||||
success: Alert({ type: 'success', message: '✓ Done!' })
|
||||
};
|
||||
|
||||
return Div({ class: 'flex flex-col gap-4' }, [
|
||||
Div({ class: 'flex gap-2 justify-center' }, [
|
||||
Button({
|
||||
class: 'btn btn-sm',
|
||||
onclick: () => simulateAction('Save')
|
||||
}, 'Save'),
|
||||
Button({
|
||||
class: 'btn btn-sm',
|
||||
onclick: () => simulateAction('Update')
|
||||
}, 'Update'),
|
||||
Button({
|
||||
class: 'btn btn-sm',
|
||||
onclick: () => simulateAction('Delete')
|
||||
}, 'Delete')
|
||||
]),
|
||||
Div({ class: 'flex justify-center min-h-[100px] items-center' }, [
|
||||
() => loadingStates[loadingState()],
|
||||
() => content() && loadingState() === 'idle' ? Div({ class: 'text-center' }, content()) : null
|
||||
])
|
||||
]);
|
||||
};
|
||||
$mount(ConditionalDemo, '#demo-conditional');
|
||||
```
|
||||
|
||||
### All Variants
|
||||
|
||||
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
|
||||
<div id="demo-variants" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-col gap-6"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const VariantsDemo = () => {
|
||||
return Div({ class: 'flex flex-col gap-6' }, [
|
||||
Div({ class: 'text-center' }, [
|
||||
Div({ class: 'text-sm font-bold mb-2' }, 'Spinner'),
|
||||
Div({ class: 'flex gap-4 justify-center' }, [
|
||||
Loading({ $show: true, class: 'loading-spinner loading-xs' }),
|
||||
Loading({ $show: true, class: 'loading-spinner loading-sm' }),
|
||||
Loading({ $show: true, class: 'loading-spinner loading-md' }),
|
||||
Loading({ $show: true, class: 'loading-spinner loading-lg' })
|
||||
])
|
||||
]),
|
||||
Div({ class: 'text-center' }, [
|
||||
Div({ class: 'text-sm font-bold mb-2' }, 'Dots'),
|
||||
Div({ class: 'flex gap-4 justify-center' }, [
|
||||
Loading({ $show: true, class: 'loading-dots loading-xs' }),
|
||||
Loading({ $show: true, class: 'loading-dots loading-sm' }),
|
||||
Loading({ $show: true, class: 'loading-dots loading-md' }),
|
||||
Loading({ $show: true, class: 'loading-dots loading-lg' })
|
||||
])
|
||||
]),
|
||||
Div({ class: 'text-center' }, [
|
||||
Div({ class: 'text-sm font-bold mb-2' }, 'Ring'),
|
||||
Div({ class: 'flex gap-4 justify-center' }, [
|
||||
Loading({ $show: true, class: 'loading-ring loading-xs' }),
|
||||
Loading({ $show: true, class: 'loading-ring loading-sm' }),
|
||||
Loading({ $show: true, class: 'loading-ring loading-md' }),
|
||||
Loading({ $show: true, class: 'loading-ring loading-lg' })
|
||||
])
|
||||
])
|
||||
]);
|
||||
};
|
||||
$mount(VariantsDemo, '#demo-variants');
|
||||
```
|
||||
|
||||
<script>
|
||||
(function() {
|
||||
const initLoadingExamples = () => {
|
||||
|
||||
// 1. Basic Loading
|
||||
const basicTarget = document.querySelector('#demo-basic');
|
||||
if (basicTarget && !basicTarget.hasChildNodes()) {
|
||||
const BasicDemo = () => {
|
||||
return Div({ class: 'flex flex-wrap gap-8 justify-center items-center' }, [
|
||||
Loading({ $show: true, class: 'loading-spinner' }),
|
||||
Loading({ $show: true, class: 'loading-dots' }),
|
||||
Loading({ $show: true, class: 'loading-ring' }),
|
||||
Loading({ $show: true, class: 'loading-ball' }),
|
||||
Loading({ $show: true, class: 'loading-bars' }),
|
||||
Loading({ $show: true, class: 'loading-infinity' })
|
||||
]);
|
||||
};
|
||||
$mount(BasicDemo, basicTarget);
|
||||
}
|
||||
|
||||
// 2. Loading Sizes
|
||||
const sizesTarget = document.querySelector('#demo-sizes');
|
||||
if (sizesTarget && !sizesTarget.hasChildNodes()) {
|
||||
const SizesDemo = () => {
|
||||
return Div({ class: 'flex flex-wrap gap-8 justify-center items-center' }, [
|
||||
Div({ class: 'text-center' }, [
|
||||
Loading({ $show: true, class: 'loading-spinner loading-xs' }),
|
||||
Div({ class: 'text-xs mt-2' }, 'Extra Small')
|
||||
]),
|
||||
Div({ class: 'text-center' }, [
|
||||
Loading({ $show: true, class: 'loading-spinner loading-sm' }),
|
||||
Div({ class: 'text-xs mt-2' }, 'Small')
|
||||
]),
|
||||
Div({ class: 'text-center' }, [
|
||||
Loading({ $show: true, class: 'loading-spinner loading-md' }),
|
||||
Div({ class: 'text-xs mt-2' }, 'Medium')
|
||||
]),
|
||||
Div({ class: 'text-center' }, [
|
||||
Loading({ $show: true, class: 'loading-spinner loading-lg' }),
|
||||
Div({ class: 'text-xs mt-2' }, 'Large')
|
||||
])
|
||||
]);
|
||||
};
|
||||
$mount(SizesDemo, sizesTarget);
|
||||
}
|
||||
|
||||
// 3. Loading Colors
|
||||
const colorsTarget = document.querySelector('#demo-colors');
|
||||
if (colorsTarget && !colorsTarget.hasChildNodes()) {
|
||||
const ColorsDemo = () => {
|
||||
return Div({ class: 'flex flex-wrap gap-8 justify-center items-center' }, [
|
||||
Loading({ $show: true, class: 'loading-spinner text-primary' }),
|
||||
Loading({ $show: true, class: 'loading-spinner text-secondary' }),
|
||||
Loading({ $show: true, class: 'loading-spinner text-accent' }),
|
||||
Loading({ $show: true, class: 'loading-spinner text-info' }),
|
||||
Loading({ $show: true, class: 'loading-spinner text-success' }),
|
||||
Loading({ $show: true, class: 'loading-spinner text-warning' }),
|
||||
Loading({ $show: true, class: 'loading-spinner text-error' })
|
||||
]);
|
||||
};
|
||||
$mount(ColorsDemo, colorsTarget);
|
||||
}
|
||||
|
||||
// 4. Button Loading State
|
||||
const buttonTarget = document.querySelector('#demo-button');
|
||||
if (buttonTarget && !buttonTarget.hasChildNodes()) {
|
||||
const ButtonDemo = () => {
|
||||
const isLoading = $(false);
|
||||
|
||||
const handleClick = async () => {
|
||||
isLoading(true);
|
||||
await new Promise(resolve => setTimeout(resolve, 2000));
|
||||
isLoading(false);
|
||||
Toast('Operation completed!', 'alert-success', 2000);
|
||||
};
|
||||
|
||||
return Div({ class: 'flex flex-col gap-4 items-center' }, [
|
||||
Button({
|
||||
class: 'btn btn-primary',
|
||||
loading: isLoading,
|
||||
onclick: handleClick
|
||||
}, 'Submit'),
|
||||
Div({ class: 'text-sm opacity-70' }, 'Click the button to see loading state')
|
||||
]);
|
||||
};
|
||||
$mount(ButtonDemo, buttonTarget);
|
||||
}
|
||||
|
||||
// 5. Async Data Loading
|
||||
const asyncTarget = document.querySelector('#demo-async');
|
||||
if (asyncTarget && !asyncTarget.hasChildNodes()) {
|
||||
const AsyncDemo = () => {
|
||||
const loading = $(false);
|
||||
const data = $(null);
|
||||
const error = $(null);
|
||||
|
||||
const loadData = async () => {
|
||||
loading(true);
|
||||
error(null);
|
||||
data(null);
|
||||
|
||||
try {
|
||||
await new Promise(resolve => setTimeout(resolve, 2000));
|
||||
const result = {
|
||||
users: 1234,
|
||||
posts: 5678,
|
||||
comments: 9012
|
||||
};
|
||||
data(result);
|
||||
Toast('Data loaded successfully!', 'alert-success', 2000);
|
||||
} catch (err) {
|
||||
error('Failed to load data');
|
||||
Toast('Error loading data', 'alert-error', 2000);
|
||||
} finally {
|
||||
loading(false);
|
||||
}
|
||||
};
|
||||
|
||||
return Div({ class: 'flex flex-col gap-4' }, [
|
||||
Div({ class: 'flex justify-center' }, [
|
||||
Button({
|
||||
class: 'btn btn-primary',
|
||||
onclick: loadData,
|
||||
disabled: () => loading()
|
||||
}, loading() ? 'Loading...' : 'Load Data')
|
||||
]),
|
||||
Div({ class: 'relative min-h-[200px] flex items-center justify-center' }, [
|
||||
() => loading() ? Loading({ $show: true, class: 'loading-spinner loading-lg' }) : null,
|
||||
() => data() ? Div({ class: 'grid grid-cols-3 gap-4 w-full' }, [
|
||||
Div({ class: 'stat' }, [
|
||||
Div({ class: 'stat-title' }, 'Users'),
|
||||
Div({ class: 'stat-value' }, data().users)
|
||||
]),
|
||||
Div({ class: 'stat' }, [
|
||||
Div({ class: 'stat-title' }, 'Posts'),
|
||||
Div({ class: 'stat-value' }, data().posts)
|
||||
]),
|
||||
Div({ class: 'stat' }, [
|
||||
Div({ class: 'stat-title' }, 'Comments'),
|
||||
Div({ class: 'stat-value' }, data().comments)
|
||||
])
|
||||
]) : null,
|
||||
() => error() ? Alert({ type: 'error', message: error() }) : null
|
||||
])
|
||||
]);
|
||||
};
|
||||
$mount(AsyncDemo, asyncTarget);
|
||||
}
|
||||
|
||||
// 6. Full Page Loading
|
||||
const fullpageTarget = document.querySelector('#demo-fullpage');
|
||||
if (fullpageTarget && !fullpageTarget.hasChildNodes()) {
|
||||
const FullpageDemo = () => {
|
||||
const isLoading = $(false);
|
||||
|
||||
const simulatePageLoad = () => {
|
||||
isLoading(true);
|
||||
setTimeout(() => {
|
||||
isLoading(false);
|
||||
Toast('Page loaded!', 'alert-success', 2000);
|
||||
}, 2000);
|
||||
};
|
||||
|
||||
return Div({ class: 'relative' }, [
|
||||
Div({ class: 'flex justify-center p-8' }, [
|
||||
Button({
|
||||
class: 'btn btn-primary',
|
||||
onclick: simulatePageLoad
|
||||
}, 'Simulate Page Load')
|
||||
]),
|
||||
() => isLoading() ? Loading({ $show: true, class: 'loading-spinner loading-lg' }) : null
|
||||
]);
|
||||
};
|
||||
$mount(FullpageDemo, fullpageTarget);
|
||||
}
|
||||
|
||||
// 7. Conditional Loading
|
||||
const conditionalTarget = document.querySelector('#demo-conditional');
|
||||
if (conditionalTarget && !conditionalTarget.hasChildNodes()) {
|
||||
const ConditionalDemo = () => {
|
||||
const loadingState = $('idle');
|
||||
const content = $('');
|
||||
|
||||
const simulateAction = (action) => {
|
||||
loadingState('loading');
|
||||
setTimeout(() => {
|
||||
content(`Action: ${action} completed at ${new Date().toLocaleTimeString()}`);
|
||||
loadingState('success');
|
||||
setTimeout(() => loadingState('idle'), 1500);
|
||||
}, 1500);
|
||||
};
|
||||
|
||||
const loadingStates = {
|
||||
idle: null,
|
||||
loading: Loading({ $show: true, class: 'loading-spinner text-primary' }),
|
||||
success: Alert({ type: 'success', message: '✓ Done!' })
|
||||
};
|
||||
|
||||
return Div({ class: 'flex flex-col gap-4' }, [
|
||||
Div({ class: 'flex gap-2 justify-center' }, [
|
||||
Button({
|
||||
class: 'btn btn-sm',
|
||||
onclick: () => simulateAction('Save')
|
||||
}, 'Save'),
|
||||
Button({
|
||||
class: 'btn btn-sm',
|
||||
onclick: () => simulateAction('Update')
|
||||
}, 'Update'),
|
||||
Button({
|
||||
class: 'btn btn-sm',
|
||||
onclick: () => simulateAction('Delete')
|
||||
}, 'Delete')
|
||||
]),
|
||||
Div({ class: 'flex justify-center min-h-[100px] items-center' }, [
|
||||
() => loadingStates[loadingState()],
|
||||
() => content() && loadingState() === 'idle' ? Div({ class: 'text-center' }, content()) : null
|
||||
])
|
||||
]);
|
||||
};
|
||||
$mount(ConditionalDemo, conditionalTarget);
|
||||
}
|
||||
|
||||
// 8. All Variants
|
||||
const variantsTarget = document.querySelector('#demo-variants');
|
||||
if (variantsTarget && !variantsTarget.hasChildNodes()) {
|
||||
const VariantsDemo = () => {
|
||||
return Div({ class: 'flex flex-col gap-6' }, [
|
||||
Div({ class: 'text-center' }, [
|
||||
Div({ class: 'text-sm font-bold mb-2' }, 'Spinner'),
|
||||
Div({ class: 'flex gap-4 justify-center' }, [
|
||||
Loading({ $show: true, class: 'loading-spinner loading-xs' }),
|
||||
Loading({ $show: true, class: 'loading-spinner loading-sm' }),
|
||||
Loading({ $show: true, class: 'loading-spinner loading-md' }),
|
||||
Loading({ $show: true, class: 'loading-spinner loading-lg' })
|
||||
])
|
||||
]),
|
||||
Div({ class: 'text-center' }, [
|
||||
Div({ class: 'text-sm font-bold mb-2' }, 'Dots'),
|
||||
Div({ class: 'flex gap-4 justify-center' }, [
|
||||
Loading({ $show: true, class: 'loading-dots loading-xs' }),
|
||||
Loading({ $show: true, class: 'loading-dots loading-sm' }),
|
||||
Loading({ $show: true, class: 'loading-dots loading-md' }),
|
||||
Loading({ $show: true, class: 'loading-dots loading-lg' })
|
||||
])
|
||||
]),
|
||||
Div({ class: 'text-center' }, [
|
||||
Div({ class: 'text-sm font-bold mb-2' }, 'Ring'),
|
||||
Div({ class: 'flex gap-4 justify-center' }, [
|
||||
Loading({ $show: true, class: 'loading-ring loading-xs' }),
|
||||
Loading({ $show: true, class: 'loading-ring loading-sm' }),
|
||||
Loading({ $show: true, class: 'loading-ring loading-md' }),
|
||||
Loading({ $show: true, class: 'loading-ring loading-lg' })
|
||||
])
|
||||
])
|
||||
]);
|
||||
};
|
||||
$mount(VariantsDemo, variantsTarget);
|
||||
}
|
||||
};
|
||||
|
||||
initLoadingExamples();
|
||||
|
||||
if (window.$docsify) {
|
||||
window.$docsify.plugins = [].concat(window.$docsify.plugins || [], (hook) => {
|
||||
hook.doneEach(initLoadingExamples);
|
||||
});
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
760
docs/components/menu.md
Normal file
760
docs/components/menu.md
Normal file
@@ -0,0 +1,760 @@
|
||||
# Menu
|
||||
|
||||
Menu component for creating navigation menus, sidebars, and dropdowns with support for nested items, icons, and active states.
|
||||
|
||||
## Tag
|
||||
|
||||
`Menu`
|
||||
|
||||
## Props
|
||||
|
||||
| Prop | Type | Default | Description |
|
||||
| :----------- | :-------------------------------------- | :---------- | :----------------------------------------------- |
|
||||
| `items` | `Array<MenuItem>` | `[]` | Menu items configuration |
|
||||
| `class` | `string` | `''` | Additional CSS classes (DaisyUI + Tailwind) |
|
||||
|
||||
### MenuItem Structure
|
||||
|
||||
| Property | Type | Description |
|
||||
| :---------- | :--------------------------- | :----------------------------------------------- |
|
||||
| `label` | `string \| VNode` | Menu item text or content |
|
||||
| `icon` | `string \| VNode` | Optional icon to display |
|
||||
| `active` | `boolean \| Signal<boolean>` | Active state highlighting |
|
||||
| `onclick` | `function` | Click handler |
|
||||
| `children` | `Array<MenuItem>` | Nested submenu items |
|
||||
| `open` | `boolean` | Whether submenu is open (for nested items) |
|
||||
|
||||
## Live Examples
|
||||
|
||||
### Basic Menu
|
||||
|
||||
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
|
||||
<div id="demo-basic" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const BasicDemo = () => {
|
||||
const activeItem = $('home');
|
||||
|
||||
return Menu({
|
||||
items: [
|
||||
{
|
||||
label: 'Home',
|
||||
active: () => activeItem() === 'home',
|
||||
onclick: () => activeItem('home')
|
||||
},
|
||||
{
|
||||
label: 'About',
|
||||
active: () => activeItem() === 'about',
|
||||
onclick: () => activeItem('about')
|
||||
},
|
||||
{
|
||||
label: 'Contact',
|
||||
active: () => activeItem() === 'contact',
|
||||
onclick: () => activeItem('contact')
|
||||
}
|
||||
]
|
||||
});
|
||||
};
|
||||
$mount(BasicDemo, '#demo-basic');
|
||||
```
|
||||
|
||||
### With Icons
|
||||
|
||||
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
|
||||
<div id="demo-icons" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const IconsDemo = () => {
|
||||
const activeItem = $('dashboard');
|
||||
|
||||
return Menu({
|
||||
items: [
|
||||
{
|
||||
icon: '🏠',
|
||||
label: 'Dashboard',
|
||||
active: () => activeItem() === 'dashboard',
|
||||
onclick: () => activeItem('dashboard')
|
||||
},
|
||||
{
|
||||
icon: '📊',
|
||||
label: 'Analytics',
|
||||
active: () => activeItem() === 'analytics',
|
||||
onclick: () => activeItem('analytics')
|
||||
},
|
||||
{
|
||||
icon: '⚙️',
|
||||
label: 'Settings',
|
||||
active: () => activeItem() === 'settings',
|
||||
onclick: () => activeItem('settings')
|
||||
},
|
||||
{
|
||||
icon: '👤',
|
||||
label: 'Profile',
|
||||
active: () => activeItem() === 'profile',
|
||||
onclick: () => activeItem('profile')
|
||||
}
|
||||
]
|
||||
});
|
||||
};
|
||||
$mount(IconsDemo, '#demo-icons');
|
||||
```
|
||||
|
||||
### Nested Menu
|
||||
|
||||
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
|
||||
<div id="demo-nested" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const NestedDemo = () => {
|
||||
const activeItem = $('products');
|
||||
|
||||
return Menu({
|
||||
items: [
|
||||
{
|
||||
label: 'Dashboard',
|
||||
onclick: () => activeItem('dashboard'),
|
||||
active: () => activeItem() === 'dashboard'
|
||||
},
|
||||
{
|
||||
label: 'Products',
|
||||
icon: '📦',
|
||||
open: true,
|
||||
children: [
|
||||
{
|
||||
label: 'All Products',
|
||||
onclick: () => activeItem('all-products'),
|
||||
active: () => activeItem() === 'all-products'
|
||||
},
|
||||
{
|
||||
label: 'Add New',
|
||||
onclick: () => activeItem('add-product'),
|
||||
active: () => activeItem() === 'add-product'
|
||||
},
|
||||
{
|
||||
label: 'Categories',
|
||||
children: [
|
||||
{
|
||||
label: 'Electronics',
|
||||
onclick: () => activeItem('electronics'),
|
||||
active: () => activeItem() === 'electronics'
|
||||
},
|
||||
{
|
||||
label: 'Clothing',
|
||||
onclick: () => activeItem('clothing'),
|
||||
active: () => activeItem() === 'clothing'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Orders',
|
||||
icon: '📋',
|
||||
onclick: () => activeItem('orders'),
|
||||
active: () => activeItem() === 'orders'
|
||||
},
|
||||
{
|
||||
label: 'Settings',
|
||||
icon: '⚙️',
|
||||
onclick: () => activeItem('settings'),
|
||||
active: () => activeItem() === 'settings'
|
||||
}
|
||||
]
|
||||
});
|
||||
};
|
||||
$mount(NestedDemo, '#demo-nested');
|
||||
```
|
||||
|
||||
### Horizontal Menu
|
||||
|
||||
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
|
||||
<div id="demo-horizontal" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const HorizontalDemo = () => {
|
||||
const activeItem = $('home');
|
||||
|
||||
return Menu({
|
||||
class: 'menu-horizontal rounded-box',
|
||||
items: [
|
||||
{
|
||||
label: 'Home',
|
||||
active: () => activeItem() === 'home',
|
||||
onclick: () => activeItem('home')
|
||||
},
|
||||
{
|
||||
label: 'Products',
|
||||
children: [
|
||||
{ label: 'Electronics', onclick: () => activeItem('electronics') },
|
||||
{ label: 'Clothing', onclick: () => activeItem('clothing') },
|
||||
{ label: 'Books', onclick: () => activeItem('books') }
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'About',
|
||||
onclick: () => activeItem('about'),
|
||||
active: () => activeItem() === 'about'
|
||||
},
|
||||
{
|
||||
label: 'Contact',
|
||||
onclick: () => activeItem('contact'),
|
||||
active: () => activeItem() === 'contact'
|
||||
}
|
||||
]
|
||||
});
|
||||
};
|
||||
$mount(HorizontalDemo, '#demo-horizontal');
|
||||
```
|
||||
|
||||
### Sidebar Menu
|
||||
|
||||
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
|
||||
<div id="demo-sidebar" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const SidebarDemo = () => {
|
||||
const activeItem = $('dashboard');
|
||||
|
||||
return Div({ class: 'flex' }, [
|
||||
Div({ class: 'w-64' }, [
|
||||
Menu({
|
||||
class: 'rounded-box w-full',
|
||||
items: [
|
||||
{
|
||||
icon: '📊',
|
||||
label: 'Dashboard',
|
||||
active: () => activeItem() === 'dashboard',
|
||||
onclick: () => activeItem('dashboard')
|
||||
},
|
||||
{
|
||||
icon: '👥',
|
||||
label: 'Users',
|
||||
children: [
|
||||
{
|
||||
label: 'All Users',
|
||||
onclick: () => activeItem('all-users'),
|
||||
active: () => activeItem() === 'all-users'
|
||||
},
|
||||
{
|
||||
label: 'Add User',
|
||||
onclick: () => activeItem('add-user'),
|
||||
active: () => activeItem() === 'add-user'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
icon: '📁',
|
||||
label: 'Files',
|
||||
onclick: () => activeItem('files'),
|
||||
active: () => activeItem() === 'files'
|
||||
},
|
||||
{
|
||||
icon: '⚙️',
|
||||
label: 'Settings',
|
||||
onclick: () => activeItem('settings'),
|
||||
active: () => activeItem() === 'settings'
|
||||
}
|
||||
]
|
||||
})
|
||||
]),
|
||||
Div({ class: 'flex-1 p-4' }, [
|
||||
Div({ class: 'alert alert-info' }, () => `Current page: ${activeItem()}`)
|
||||
])
|
||||
]);
|
||||
};
|
||||
$mount(SidebarDemo, '#demo-sidebar');
|
||||
```
|
||||
|
||||
### Account Menu
|
||||
|
||||
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
|
||||
<div id="demo-account" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const AccountDemo = () => {
|
||||
const [notifications, setNotifications] = $(3);
|
||||
|
||||
return Menu({
|
||||
class: 'rounded-box w-56',
|
||||
items: [
|
||||
{
|
||||
icon: '👤',
|
||||
label: 'My Profile',
|
||||
onclick: () => Toast('Profile clicked', 'alert-info', 2000)
|
||||
},
|
||||
{
|
||||
icon: '📧',
|
||||
label: 'Messages',
|
||||
badge: '3',
|
||||
onclick: () => Toast('Messages opened', 'alert-info', 2000)
|
||||
},
|
||||
{
|
||||
icon: '🔔',
|
||||
label: 'Notifications',
|
||||
badge: () => notifications(),
|
||||
onclick: () => {
|
||||
setNotifications(0);
|
||||
Toast('Notifications cleared', 'alert-success', 2000);
|
||||
}
|
||||
},
|
||||
{
|
||||
icon: '⚙️',
|
||||
label: 'Settings',
|
||||
onclick: () => Toast('Settings opened', 'alert-info', 2000)
|
||||
},
|
||||
{
|
||||
icon: '🚪',
|
||||
label: 'Logout',
|
||||
onclick: () => Toast('Logged out', 'alert-warning', 2000)
|
||||
}
|
||||
]
|
||||
});
|
||||
};
|
||||
$mount(AccountDemo, '#demo-account');
|
||||
```
|
||||
|
||||
### Collapsible Sidebar
|
||||
|
||||
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
|
||||
<div id="demo-collapsible" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const CollapsibleDemo = () => {
|
||||
const collapsed = $(false);
|
||||
const activeItem = $('dashboard');
|
||||
|
||||
return Div({ class: 'flex gap-4' }, [
|
||||
Div({ class: `transition-all duration-300 ${collapsed() ? 'w-16' : 'w-64'}` }, [
|
||||
Button({
|
||||
class: 'btn btn-ghost btn-sm mb-2 w-full',
|
||||
onclick: () => collapsed(!collapsed())
|
||||
}, collapsed() ? '→' : '←'),
|
||||
Menu({
|
||||
class: `rounded-box ${collapsed() ? 'menu-compact' : ''}`,
|
||||
items: [
|
||||
{ icon: '📊', label: collapsed() ? '' : 'Dashboard', active: () => activeItem() === 'dashboard', onclick: () => activeItem('dashboard') },
|
||||
{ icon: '👥', label: collapsed() ? '' : 'Users', active: () => activeItem() === 'users', onclick: () => activeItem('users') },
|
||||
{ icon: '📁', label: collapsed() ? '' : 'Files', active: () => activeItem() === 'files', onclick: () => activeItem('files') },
|
||||
{ icon: '⚙️', label: collapsed() ? '' : 'Settings', active: () => activeItem() === 'settings', onclick: () => activeItem('settings') }
|
||||
]
|
||||
})
|
||||
]),
|
||||
Div({ class: 'flex-1' }, [
|
||||
Div({ class: 'alert alert-info' }, () => `Selected: ${activeItem()}`)
|
||||
])
|
||||
]);
|
||||
};
|
||||
$mount(CollapsibleDemo, '#demo-collapsible');
|
||||
```
|
||||
|
||||
### All Variants
|
||||
|
||||
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
|
||||
<div id="demo-variants" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-wrap gap-8"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const VariantsDemo = () => {
|
||||
const items = [
|
||||
{ label: 'Item 1' },
|
||||
{ label: 'Item 2' },
|
||||
{ label: 'Item 3', children: [
|
||||
{ label: 'Subitem 1' },
|
||||
{ label: 'Subitem 2' }
|
||||
]}
|
||||
];
|
||||
|
||||
return Div({ class: 'flex flex-wrap gap-8' }, [
|
||||
Div({ class: 'w-48' }, [
|
||||
Div({ class: 'text-sm font-bold mb-2' }, 'Default'),
|
||||
Menu({ items })
|
||||
]),
|
||||
Div({ class: 'w-48' }, [
|
||||
Div({ class: 'text-sm font-bold mb-2' }, 'Compact'),
|
||||
Menu({ items, class: 'menu-compact' })
|
||||
]),
|
||||
Div({ class: 'w-48' }, [
|
||||
Div({ class: 'text-sm font-bold mb-2' }, 'With Shadow'),
|
||||
Menu({ items, class: 'shadow-lg' })
|
||||
])
|
||||
]);
|
||||
};
|
||||
$mount(VariantsDemo, '#demo-variants');
|
||||
```
|
||||
|
||||
<script>
|
||||
(function() {
|
||||
const initMenuExamples = () => {
|
||||
|
||||
// 1. Basic Menu
|
||||
const basicTarget = document.querySelector('#demo-basic');
|
||||
if (basicTarget && !basicTarget.hasChildNodes()) {
|
||||
const BasicDemo = () => {
|
||||
const activeItem = $('home');
|
||||
|
||||
return Menu({
|
||||
items: [
|
||||
{
|
||||
label: 'Home',
|
||||
active: () => activeItem() === 'home',
|
||||
onclick: () => activeItem('home')
|
||||
},
|
||||
{
|
||||
label: 'About',
|
||||
active: () => activeItem() === 'about',
|
||||
onclick: () => activeItem('about')
|
||||
},
|
||||
{
|
||||
label: 'Contact',
|
||||
active: () => activeItem() === 'contact',
|
||||
onclick: () => activeItem('contact')
|
||||
}
|
||||
]
|
||||
});
|
||||
};
|
||||
$mount(BasicDemo, basicTarget);
|
||||
}
|
||||
|
||||
// 2. With Icons
|
||||
const iconsTarget = document.querySelector('#demo-icons');
|
||||
if (iconsTarget && !iconsTarget.hasChildNodes()) {
|
||||
const IconsDemo = () => {
|
||||
const activeItem = $('dashboard');
|
||||
|
||||
return Menu({
|
||||
items: [
|
||||
{
|
||||
icon: '🏠',
|
||||
label: 'Dashboard',
|
||||
active: () => activeItem() === 'dashboard',
|
||||
onclick: () => activeItem('dashboard')
|
||||
},
|
||||
{
|
||||
icon: '📊',
|
||||
label: 'Analytics',
|
||||
active: () => activeItem() === 'analytics',
|
||||
onclick: () => activeItem('analytics')
|
||||
},
|
||||
{
|
||||
icon: '⚙️',
|
||||
label: 'Settings',
|
||||
active: () => activeItem() === 'settings',
|
||||
onclick: () => activeItem('settings')
|
||||
},
|
||||
{
|
||||
icon: '👤',
|
||||
label: 'Profile',
|
||||
active: () => activeItem() === 'profile',
|
||||
onclick: () => activeItem('profile')
|
||||
}
|
||||
]
|
||||
});
|
||||
};
|
||||
$mount(IconsDemo, iconsTarget);
|
||||
}
|
||||
|
||||
// 3. Nested Menu
|
||||
const nestedTarget = document.querySelector('#demo-nested');
|
||||
if (nestedTarget && !nestedTarget.hasChildNodes()) {
|
||||
const NestedDemo = () => {
|
||||
const activeItem = $('products');
|
||||
|
||||
return Menu({
|
||||
items: [
|
||||
{
|
||||
label: 'Dashboard',
|
||||
onclick: () => activeItem('dashboard'),
|
||||
active: () => activeItem() === 'dashboard'
|
||||
},
|
||||
{
|
||||
label: 'Products',
|
||||
icon: '📦',
|
||||
open: true,
|
||||
children: [
|
||||
{
|
||||
label: 'All Products',
|
||||
onclick: () => activeItem('all-products'),
|
||||
active: () => activeItem() === 'all-products'
|
||||
},
|
||||
{
|
||||
label: 'Add New',
|
||||
onclick: () => activeItem('add-product'),
|
||||
active: () => activeItem() === 'add-product'
|
||||
},
|
||||
{
|
||||
label: 'Categories',
|
||||
children: [
|
||||
{
|
||||
label: 'Electronics',
|
||||
onclick: () => activeItem('electronics'),
|
||||
active: () => activeItem() === 'electronics'
|
||||
},
|
||||
{
|
||||
label: 'Clothing',
|
||||
onclick: () => activeItem('clothing'),
|
||||
active: () => activeItem() === 'clothing'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Orders',
|
||||
icon: '📋',
|
||||
onclick: () => activeItem('orders'),
|
||||
active: () => activeItem() === 'orders'
|
||||
},
|
||||
{
|
||||
label: 'Settings',
|
||||
icon: '⚙️',
|
||||
onclick: () => activeItem('settings'),
|
||||
active: () => activeItem() === 'settings'
|
||||
}
|
||||
]
|
||||
});
|
||||
};
|
||||
$mount(NestedDemo, nestedTarget);
|
||||
}
|
||||
|
||||
// 4. Horizontal Menu
|
||||
const horizontalTarget = document.querySelector('#demo-horizontal');
|
||||
if (horizontalTarget && !horizontalTarget.hasChildNodes()) {
|
||||
const HorizontalDemo = () => {
|
||||
const activeItem = $('home');
|
||||
|
||||
return Menu({
|
||||
class: 'menu-horizontal rounded-box',
|
||||
items: [
|
||||
{
|
||||
label: 'Home',
|
||||
active: () => activeItem() === 'home',
|
||||
onclick: () => activeItem('home')
|
||||
},
|
||||
{
|
||||
label: 'Products',
|
||||
children: [
|
||||
{ label: 'Electronics', onclick: () => activeItem('electronics') },
|
||||
{ label: 'Clothing', onclick: () => activeItem('clothing') },
|
||||
{ label: 'Books', onclick: () => activeItem('books') }
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'About',
|
||||
onclick: () => activeItem('about'),
|
||||
active: () => activeItem() === 'about'
|
||||
},
|
||||
{
|
||||
label: 'Contact',
|
||||
onclick: () => activeItem('contact'),
|
||||
active: () => activeItem() === 'contact'
|
||||
}
|
||||
]
|
||||
});
|
||||
};
|
||||
$mount(HorizontalDemo, horizontalTarget);
|
||||
}
|
||||
|
||||
// 5. Sidebar Menu
|
||||
const sidebarTarget = document.querySelector('#demo-sidebar');
|
||||
if (sidebarTarget && !sidebarTarget.hasChildNodes()) {
|
||||
const SidebarDemo = () => {
|
||||
const activeItem = $('dashboard');
|
||||
|
||||
return Div({ class: 'flex' }, [
|
||||
Div({ class: 'w-64' }, [
|
||||
Menu({
|
||||
class: 'rounded-box w-full',
|
||||
items: [
|
||||
{
|
||||
icon: '📊',
|
||||
label: 'Dashboard',
|
||||
active: () => activeItem() === 'dashboard',
|
||||
onclick: () => activeItem('dashboard')
|
||||
},
|
||||
{
|
||||
icon: '👥',
|
||||
label: 'Users',
|
||||
children: [
|
||||
{
|
||||
label: 'All Users',
|
||||
onclick: () => activeItem('all-users'),
|
||||
active: () => activeItem() === 'all-users'
|
||||
},
|
||||
{
|
||||
label: 'Add User',
|
||||
onclick: () => activeItem('add-user'),
|
||||
active: () => activeItem() === 'add-user'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
icon: '📁',
|
||||
label: 'Files',
|
||||
onclick: () => activeItem('files'),
|
||||
active: () => activeItem() === 'files'
|
||||
},
|
||||
{
|
||||
icon: '⚙️',
|
||||
label: 'Settings',
|
||||
onclick: () => activeItem('settings'),
|
||||
active: () => activeItem() === 'settings'
|
||||
}
|
||||
]
|
||||
})
|
||||
]),
|
||||
Div({ class: 'flex-1 p-4' }, [
|
||||
Div({ class: 'alert alert-info' }, () => `Current page: ${activeItem()}`)
|
||||
])
|
||||
]);
|
||||
};
|
||||
$mount(SidebarDemo, sidebarTarget);
|
||||
}
|
||||
|
||||
// 6. Account Menu
|
||||
const accountTarget = document.querySelector('#demo-account');
|
||||
if (accountTarget && !accountTarget.hasChildNodes()) {
|
||||
const AccountDemo = () => {
|
||||
const [notifications, setNotifications] = $(3);
|
||||
|
||||
return Menu({
|
||||
class: 'rounded-box w-56',
|
||||
items: [
|
||||
{
|
||||
icon: '👤',
|
||||
label: 'My Profile',
|
||||
onclick: () => Toast('Profile clicked', 'alert-info', 2000)
|
||||
},
|
||||
{
|
||||
icon: '📧',
|
||||
label: 'Messages',
|
||||
badge: '3',
|
||||
onclick: () => Toast('Messages opened', 'alert-info', 2000)
|
||||
},
|
||||
{
|
||||
icon: '🔔',
|
||||
label: 'Notifications',
|
||||
badge: () => notifications(),
|
||||
onclick: () => {
|
||||
setNotifications(0);
|
||||
Toast('Notifications cleared', 'alert-success', 2000);
|
||||
}
|
||||
},
|
||||
{
|
||||
icon: '⚙️',
|
||||
label: 'Settings',
|
||||
onclick: () => Toast('Settings opened', 'alert-info', 2000)
|
||||
},
|
||||
{
|
||||
icon: '🚪',
|
||||
label: 'Logout',
|
||||
onclick: () => Toast('Logged out', 'alert-warning', 2000)
|
||||
}
|
||||
]
|
||||
});
|
||||
};
|
||||
$mount(AccountDemo, accountTarget);
|
||||
}
|
||||
|
||||
// 7. Collapsible Sidebar
|
||||
const collapsibleTarget = document.querySelector('#demo-collapsible');
|
||||
if (collapsibleTarget && !collapsibleTarget.hasChildNodes()) {
|
||||
const CollapsibleDemo = () => {
|
||||
const collapsed = $(false);
|
||||
const activeItem = $('dashboard');
|
||||
|
||||
return Div({ class: 'flex gap-4' }, [
|
||||
Div({ class: `transition-all duration-300 ${collapsed() ? 'w-16' : 'w-64'}` }, [
|
||||
Button({
|
||||
class: 'btn btn-ghost btn-sm mb-2 w-full',
|
||||
onclick: () => collapsed(!collapsed())
|
||||
}, collapsed() ? '→' : '←'),
|
||||
Menu({
|
||||
class: `rounded-box ${collapsed() ? 'menu-compact' : ''}`,
|
||||
items: [
|
||||
{ icon: '📊', label: collapsed() ? '' : 'Dashboard', active: () => activeItem() === 'dashboard', onclick: () => activeItem('dashboard') },
|
||||
{ icon: '👥', label: collapsed() ? '' : 'Users', active: () => activeItem() === 'users', onclick: () => activeItem('users') },
|
||||
{ icon: '📁', label: collapsed() ? '' : 'Files', active: () => activeItem() === 'files', onclick: () => activeItem('files') },
|
||||
{ icon: '⚙️', label: collapsed() ? '' : 'Settings', active: () => activeItem() === 'settings', onclick: () => activeItem('settings') }
|
||||
]
|
||||
})
|
||||
]),
|
||||
Div({ class: 'flex-1' }, [
|
||||
Div({ class: 'alert alert-info' }, () => `Selected: ${activeItem()}`)
|
||||
])
|
||||
]);
|
||||
};
|
||||
$mount(CollapsibleDemo, collapsibleTarget);
|
||||
}
|
||||
|
||||
// 8. All Variants
|
||||
const variantsTarget = document.querySelector('#demo-variants');
|
||||
if (variantsTarget && !variantsTarget.hasChildNodes()) {
|
||||
const VariantsDemo = () => {
|
||||
const items = [
|
||||
{ label: 'Item 1' },
|
||||
{ label: 'Item 2' },
|
||||
{ label: 'Item 3', children: [
|
||||
{ label: 'Subitem 1' },
|
||||
{ label: 'Subitem 2' }
|
||||
]}
|
||||
];
|
||||
|
||||
return Div({ class: 'flex flex-wrap gap-8' }, [
|
||||
Div({ class: 'w-48' }, [
|
||||
Div({ class: 'text-sm font-bold mb-2' }, 'Default'),
|
||||
Menu({ items })
|
||||
]),
|
||||
Div({ class: 'w-48' }, [
|
||||
Div({ class: 'text-sm font-bold mb-2' }, 'Compact'),
|
||||
Menu({ items, class: 'menu-compact' })
|
||||
]),
|
||||
Div({ class: 'w-48' }, [
|
||||
Div({ class: 'text-sm font-bold mb-2' }, 'With Shadow'),
|
||||
Menu({ items, class: 'shadow-lg' })
|
||||
])
|
||||
]);
|
||||
};
|
||||
$mount(VariantsDemo, variantsTarget);
|
||||
}
|
||||
};
|
||||
|
||||
initMenuExamples();
|
||||
|
||||
if (window.$docsify) {
|
||||
window.$docsify.plugins = [].concat(window.$docsify.plugins || [], (hook) => {
|
||||
hook.doneEach(initMenuExamples);
|
||||
});
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
551
docs/components/navbar.md
Normal file
551
docs/components/navbar.md
Normal file
@@ -0,0 +1,551 @@
|
||||
# Navbar
|
||||
|
||||
Navigation bar component for creating responsive headers with logo, navigation links, and actions.
|
||||
|
||||
## Tag
|
||||
|
||||
`Navbar`
|
||||
|
||||
## Props
|
||||
|
||||
| Prop | Type | Default | Description |
|
||||
| :----------- | :--------------------------- | :---------- | :----------------------------------------------- |
|
||||
| `class` | `string` | `''` | Additional CSS classes (DaisyUI + Tailwind) |
|
||||
| `children` | `VNode \| Array<VNode>` | `-` | Navbar content (should contain left, center, right sections) |
|
||||
|
||||
## Live Examples
|
||||
|
||||
### Basic Navbar
|
||||
|
||||
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
|
||||
<div id="demo-basic" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const BasicDemo = () => {
|
||||
return Navbar({ class: 'rounded-box' }, [
|
||||
Div({ class: 'navbar-start' }, [
|
||||
Span({ class: 'text-xl font-bold' }, 'Logo')
|
||||
]),
|
||||
Div({ class: 'navbar-center hidden lg:flex' }, [
|
||||
Span({ class: 'text-sm' }, 'Navigation Items')
|
||||
]),
|
||||
Div({ class: 'navbar-end' }, [
|
||||
Button({ class: 'btn btn-ghost btn-sm' }, 'Login')
|
||||
])
|
||||
]);
|
||||
};
|
||||
$mount(BasicDemo, '#demo-basic');
|
||||
```
|
||||
|
||||
### With Navigation Links
|
||||
|
||||
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
|
||||
<div id="demo-links" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const LinksDemo = () => {
|
||||
const active = $('home');
|
||||
|
||||
return Navbar({ class: 'rounded-box' }, [
|
||||
Div({ class: 'navbar-start' }, [
|
||||
Span({ class: 'text-xl font-bold' }, 'MyApp')
|
||||
]),
|
||||
Div({ class: 'navbar-center hidden lg:flex' }, [
|
||||
Div({ class: 'menu menu-horizontal px-1' }, [
|
||||
Button({
|
||||
class: `btn btn-ghost btn-sm ${active() === 'home' ? 'btn-active' : ''}`,
|
||||
onclick: () => active('home')
|
||||
}, 'Home'),
|
||||
Button({
|
||||
class: `btn btn-ghost btn-sm ${active() === 'about' ? 'btn-active' : ''}`,
|
||||
onclick: () => active('about')
|
||||
}, 'About'),
|
||||
Button({
|
||||
class: `btn btn-ghost btn-sm ${active() === 'contact' ? 'btn-active' : ''}`,
|
||||
onclick: () => active('contact')
|
||||
}, 'Contact')
|
||||
])
|
||||
]),
|
||||
Div({ class: 'navbar-end' }, [
|
||||
Button({ class: 'btn btn-primary btn-sm' }, 'Sign Up')
|
||||
])
|
||||
]);
|
||||
};
|
||||
$mount(LinksDemo, '#demo-links');
|
||||
```
|
||||
|
||||
### With Dropdown Menu
|
||||
|
||||
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
|
||||
<div id="demo-dropdown" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const DropdownDemo = () => {
|
||||
return Navbar({ class: 'rounded-box' }, [
|
||||
Div({ class: 'navbar-start' }, [
|
||||
Div({ class: 'dropdown' }, [
|
||||
Div({ tabindex: 0, role: 'button', class: 'btn btn-ghost lg:hidden' }, [
|
||||
Span({ class: 'sr-only' }, 'Open menu'),
|
||||
Icons.iconInfo
|
||||
]),
|
||||
Div({ tabindex: 0, class: 'dropdown-content menu bg-base-100 rounded-box z-[1] w-52 p-2 shadow' }, [
|
||||
Div({ class: 'menu-item' }, 'Home'),
|
||||
Div({ class: 'menu-item' }, 'About'),
|
||||
Div({ class: 'menu-item' }, 'Contact')
|
||||
])
|
||||
]),
|
||||
Span({ class: 'text-xl font-bold' }, 'MyApp')
|
||||
]),
|
||||
Div({ class: 'navbar-center hidden lg:flex' }, [
|
||||
Div({ class: 'menu menu-horizontal px-1' }, [
|
||||
Div({ class: 'menu-item' }, 'Home'),
|
||||
Div({ class: 'menu-item' }, 'About'),
|
||||
Div({ class: 'menu-item' }, 'Contact')
|
||||
])
|
||||
]),
|
||||
Div({ class: 'navbar-end' }, [
|
||||
Button({ class: 'btn btn-primary btn-sm' }, 'Login')
|
||||
])
|
||||
]);
|
||||
};
|
||||
$mount(DropdownDemo, '#demo-dropdown');
|
||||
```
|
||||
|
||||
### With Search
|
||||
|
||||
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
|
||||
<div id="demo-search" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const SearchDemo = () => {
|
||||
const searchQuery = $('');
|
||||
|
||||
return Navbar({ class: 'rounded-box' }, [
|
||||
Div({ class: 'navbar-start' }, [
|
||||
Span({ class: 'text-xl font-bold' }, 'MyApp')
|
||||
]),
|
||||
Div({ class: 'navbar-center' }, [
|
||||
Div({ class: 'form-control' }, [
|
||||
Input({
|
||||
placeholder: 'Search...',
|
||||
value: searchQuery,
|
||||
class: 'input input-bordered w-48 md:w-auto',
|
||||
oninput: (e) => searchQuery(e.target.value)
|
||||
})
|
||||
])
|
||||
]),
|
||||
Div({ class: 'navbar-end' }, [
|
||||
Button({ class: 'btn btn-ghost btn-circle' }, '🔔'),
|
||||
Button({ class: 'btn btn-ghost btn-circle' }, '👤')
|
||||
])
|
||||
]);
|
||||
};
|
||||
$mount(SearchDemo, '#demo-search');
|
||||
```
|
||||
|
||||
### With Avatar and Dropdown
|
||||
|
||||
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
|
||||
<div id="demo-avatar" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const AvatarDemo = () => {
|
||||
return Navbar({ class: 'rounded-box' }, [
|
||||
Div({ class: 'navbar-start' }, [
|
||||
Span({ class: 'text-xl font-bold' }, 'MyApp')
|
||||
]),
|
||||
Div({ class: 'navbar-center hidden lg:flex' }, [
|
||||
Div({ class: 'menu menu-horizontal px-1' }, [
|
||||
Div({ class: 'menu-item' }, 'Dashboard'),
|
||||
Div({ class: 'menu-item' }, 'Projects'),
|
||||
Div({ class: 'menu-item' }, 'Tasks')
|
||||
])
|
||||
]),
|
||||
Div({ class: 'navbar-end' }, [
|
||||
Div({ class: 'dropdown dropdown-end' }, [
|
||||
Div({ tabindex: 0, role: 'button', class: 'btn btn-ghost btn-circle avatar' }, [
|
||||
Div({ class: 'w-8 rounded-full bg-primary text-primary-content flex items-center justify-center' }, 'JD')
|
||||
]),
|
||||
Div({ tabindex: 0, class: 'dropdown-content menu bg-base-100 rounded-box z-[1] w-52 p-2 shadow' }, [
|
||||
Div({ class: 'menu-item' }, 'Profile'),
|
||||
Div({ class: 'menu-item' }, 'Settings'),
|
||||
Div({ class: 'menu-item' }, 'Logout')
|
||||
])
|
||||
])
|
||||
])
|
||||
]);
|
||||
};
|
||||
$mount(AvatarDemo, '#demo-avatar');
|
||||
```
|
||||
|
||||
### Responsive Navbar
|
||||
|
||||
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
|
||||
<div id="demo-responsive" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const ResponsiveDemo = () => {
|
||||
const isOpen = $(false);
|
||||
|
||||
return Div({ class: 'flex flex-col' }, [
|
||||
Navbar({ class: 'rounded-box' }, [
|
||||
Div({ class: 'navbar-start' }, [
|
||||
Button({
|
||||
class: 'btn btn-ghost btn-circle lg:hidden',
|
||||
onclick: () => isOpen(!isOpen())
|
||||
}, '☰')
|
||||
]),
|
||||
Div({ class: 'navbar-center' }, [
|
||||
Span({ class: 'text-xl font-bold' }, 'MyApp')
|
||||
]),
|
||||
Div({ class: 'navbar-end' }, [
|
||||
Button({ class: 'btn btn-ghost btn-circle' }, '🔔')
|
||||
])
|
||||
]),
|
||||
() => isOpen() ? Div({ class: 'flex flex-col gap-2 p-4 bg-base-200 rounded-box mt-2' }, [
|
||||
Button({ class: 'btn btn-ghost justify-start' }, 'Home'),
|
||||
Button({ class: 'btn btn-ghost justify-start' }, 'About'),
|
||||
Button({ class: 'btn btn-ghost justify-start' }, 'Services'),
|
||||
Button({ class: 'btn btn-ghost justify-start' }, 'Contact')
|
||||
]) : null
|
||||
]);
|
||||
};
|
||||
$mount(ResponsiveDemo, '#demo-responsive');
|
||||
```
|
||||
|
||||
### With Brand and Actions
|
||||
|
||||
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
|
||||
<div id="demo-brand" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const BrandDemo = () => {
|
||||
return Navbar({ class: 'rounded-box bg-primary text-primary-content' }, [
|
||||
Div({ class: 'navbar-start' }, [
|
||||
Span({ class: 'text-xl font-bold' }, 'Brand')
|
||||
]),
|
||||
Div({ class: 'navbar-center hidden lg:flex' }, [
|
||||
Div({ class: 'menu menu-horizontal px-1' }, [
|
||||
Span({ class: 'text-sm' }, 'Features'),
|
||||
Span({ class: 'text-sm' }, 'Pricing'),
|
||||
Span({ class: 'text-sm' }, 'About')
|
||||
])
|
||||
]),
|
||||
Div({ class: 'navbar-end' }, [
|
||||
Button({ class: 'btn btn-ghost btn-sm' }, 'Login'),
|
||||
Button({ class: 'btn btn-outline btn-sm ml-2' }, 'Sign Up')
|
||||
])
|
||||
]);
|
||||
};
|
||||
$mount(BrandDemo, '#demo-brand');
|
||||
```
|
||||
|
||||
### All Variants
|
||||
|
||||
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
|
||||
<div id="demo-variants" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-col gap-4"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const VariantsDemo = () => {
|
||||
return Div({ class: 'flex flex-col gap-4' }, [
|
||||
Div({ class: 'text-sm font-bold' }, 'Default Navbar'),
|
||||
Navbar({ class: 'rounded-box' }, [
|
||||
Div({ class: 'navbar-start' }, [Span({}, 'Start')]),
|
||||
Div({ class: 'navbar-center' }, [Span({}, 'Center')]),
|
||||
Div({ class: 'navbar-end' }, [Span({}, 'End')])
|
||||
]),
|
||||
|
||||
Div({ class: 'text-sm font-bold mt-2' }, 'With Shadow'),
|
||||
Navbar({ class: 'rounded-box shadow-lg' }, [
|
||||
Div({ class: 'navbar-start' }, [Span({}, 'Logo')]),
|
||||
Div({ class: 'navbar-end' }, [Button({ class: 'btn btn-sm' }, 'Button')])
|
||||
]),
|
||||
|
||||
Div({ class: 'text-sm font-bold mt-2' }, 'With Background'),
|
||||
Navbar({ class: 'rounded-box bg-base-300' }, [
|
||||
Div({ class: 'navbar-start' }, [Span({ class: 'font-bold' }, 'Colored')]),
|
||||
Div({ class: 'navbar-end' }, [Span({ class: 'text-sm' }, 'Info')])
|
||||
])
|
||||
]);
|
||||
};
|
||||
$mount(VariantsDemo, '#demo-variants');
|
||||
```
|
||||
|
||||
<script>
|
||||
(function() {
|
||||
const initNavbarExamples = () => {
|
||||
|
||||
// 1. Basic Navbar
|
||||
const basicTarget = document.querySelector('#demo-basic');
|
||||
if (basicTarget && !basicTarget.hasChildNodes()) {
|
||||
const BasicDemo = () => {
|
||||
return Navbar({ class: 'rounded-box' }, [
|
||||
Div({ class: 'navbar-start' }, [
|
||||
Span({ class: 'text-xl font-bold' }, 'Logo')
|
||||
]),
|
||||
Div({ class: 'navbar-center hidden lg:flex' }, [
|
||||
Span({ class: 'text-sm' }, 'Navigation Items')
|
||||
]),
|
||||
Div({ class: 'navbar-end' }, [
|
||||
Button({ class: 'btn btn-ghost btn-sm' }, 'Login')
|
||||
])
|
||||
]);
|
||||
};
|
||||
$mount(BasicDemo, basicTarget);
|
||||
}
|
||||
|
||||
// 2. With Navigation Links
|
||||
const linksTarget = document.querySelector('#demo-links');
|
||||
if (linksTarget && !linksTarget.hasChildNodes()) {
|
||||
const LinksDemo = () => {
|
||||
const active = $('home');
|
||||
|
||||
return Navbar({ class: 'rounded-box' }, [
|
||||
Div({ class: 'navbar-start' }, [
|
||||
Span({ class: 'text-xl font-bold' }, 'MyApp')
|
||||
]),
|
||||
Div({ class: 'navbar-center hidden lg:flex' }, [
|
||||
Div({ class: 'menu menu-horizontal px-1' }, [
|
||||
Button({
|
||||
class: `btn btn-ghost btn-sm ${active() === 'home' ? 'btn-active' : ''}`,
|
||||
onclick: () => active('home')
|
||||
}, 'Home'),
|
||||
Button({
|
||||
class: `btn btn-ghost btn-sm ${active() === 'about' ? 'btn-active' : ''}`,
|
||||
onclick: () => active('about')
|
||||
}, 'About'),
|
||||
Button({
|
||||
class: `btn btn-ghost btn-sm ${active() === 'contact' ? 'btn-active' : ''}`,
|
||||
onclick: () => active('contact')
|
||||
}, 'Contact')
|
||||
])
|
||||
]),
|
||||
Div({ class: 'navbar-end' }, [
|
||||
Button({ class: 'btn btn-primary btn-sm' }, 'Sign Up')
|
||||
])
|
||||
]);
|
||||
};
|
||||
$mount(LinksDemo, linksTarget);
|
||||
}
|
||||
|
||||
// 3. With Dropdown Menu
|
||||
const dropdownTarget = document.querySelector('#demo-dropdown');
|
||||
if (dropdownTarget && !dropdownTarget.hasChildNodes()) {
|
||||
const DropdownDemo = () => {
|
||||
return Navbar({ class: 'rounded-box' }, [
|
||||
Div({ class: 'navbar-start' }, [
|
||||
Div({ class: 'dropdown' }, [
|
||||
Div({ tabindex: 0, role: 'button', class: 'btn btn-ghost lg:hidden' }, [
|
||||
Span({ class: 'sr-only' }, 'Open menu'),
|
||||
Icons.iconInfo
|
||||
]),
|
||||
Div({ tabindex: 0, class: 'dropdown-content menu bg-base-100 rounded-box z-[1] w-52 p-2 shadow' }, [
|
||||
Div({ class: 'menu-item' }, 'Home'),
|
||||
Div({ class: 'menu-item' }, 'About'),
|
||||
Div({ class: 'menu-item' }, 'Contact')
|
||||
])
|
||||
]),
|
||||
Span({ class: 'text-xl font-bold' }, 'MyApp')
|
||||
]),
|
||||
Div({ class: 'navbar-center hidden lg:flex' }, [
|
||||
Div({ class: 'menu menu-horizontal px-1' }, [
|
||||
Div({ class: 'menu-item' }, 'Home'),
|
||||
Div({ class: 'menu-item' }, 'About'),
|
||||
Div({ class: 'menu-item' }, 'Contact')
|
||||
])
|
||||
]),
|
||||
Div({ class: 'navbar-end' }, [
|
||||
Button({ class: 'btn btn-primary btn-sm' }, 'Login')
|
||||
])
|
||||
]);
|
||||
};
|
||||
$mount(DropdownDemo, dropdownTarget);
|
||||
}
|
||||
|
||||
// 4. With Search
|
||||
const searchTarget = document.querySelector('#demo-search');
|
||||
if (searchTarget && !searchTarget.hasChildNodes()) {
|
||||
const SearchDemo = () => {
|
||||
const searchQuery = $('');
|
||||
|
||||
return Navbar({ class: 'rounded-box' }, [
|
||||
Div({ class: 'navbar-start' }, [
|
||||
Span({ class: 'text-xl font-bold' }, 'MyApp')
|
||||
]),
|
||||
Div({ class: 'navbar-center' }, [
|
||||
Div({ class: 'form-control' }, [
|
||||
Input({
|
||||
placeholder: 'Search...',
|
||||
value: searchQuery,
|
||||
class: 'input input-bordered w-48 md:w-auto',
|
||||
oninput: (e) => searchQuery(e.target.value)
|
||||
})
|
||||
])
|
||||
]),
|
||||
Div({ class: 'navbar-end' }, [
|
||||
Button({ class: 'btn btn-ghost btn-circle' }, '🔔'),
|
||||
Button({ class: 'btn btn-ghost btn-circle' }, '👤')
|
||||
])
|
||||
]);
|
||||
};
|
||||
$mount(SearchDemo, searchTarget);
|
||||
}
|
||||
|
||||
// 5. With Avatar and Dropdown
|
||||
const avatarTarget = document.querySelector('#demo-avatar');
|
||||
if (avatarTarget && !avatarTarget.hasChildNodes()) {
|
||||
const AvatarDemo = () => {
|
||||
return Navbar({ class: 'rounded-box' }, [
|
||||
Div({ class: 'navbar-start' }, [
|
||||
Span({ class: 'text-xl font-bold' }, 'MyApp')
|
||||
]),
|
||||
Div({ class: 'navbar-center hidden lg:flex' }, [
|
||||
Div({ class: 'menu menu-horizontal px-1' }, [
|
||||
Div({ class: 'menu-item' }, 'Dashboard'),
|
||||
Div({ class: 'menu-item' }, 'Projects'),
|
||||
Div({ class: 'menu-item' }, 'Tasks')
|
||||
])
|
||||
]),
|
||||
Div({ class: 'navbar-end' }, [
|
||||
Div({ class: 'dropdown dropdown-end' }, [
|
||||
Div({ tabindex: 0, role: 'button', class: 'btn btn-ghost btn-circle avatar' }, [
|
||||
Div({ class: 'w-8 rounded-full bg-primary text-primary-content flex items-center justify-center' }, 'JD')
|
||||
]),
|
||||
Div({ tabindex: 0, class: 'dropdown-content menu bg-base-100 rounded-box z-[1] w-52 p-2 shadow' }, [
|
||||
Div({ class: 'menu-item' }, 'Profile'),
|
||||
Div({ class: 'menu-item' }, 'Settings'),
|
||||
Div({ class: 'menu-item' }, 'Logout')
|
||||
])
|
||||
])
|
||||
])
|
||||
]);
|
||||
};
|
||||
$mount(AvatarDemo, avatarTarget);
|
||||
}
|
||||
|
||||
// 6. Responsive Navbar
|
||||
const responsiveTarget = document.querySelector('#demo-responsive');
|
||||
if (responsiveTarget && !responsiveTarget.hasChildNodes()) {
|
||||
const ResponsiveDemo = () => {
|
||||
const isOpen = $(false);
|
||||
|
||||
return Div({ class: 'flex flex-col' }, [
|
||||
Navbar({ class: 'rounded-box' }, [
|
||||
Div({ class: 'navbar-start' }, [
|
||||
Button({
|
||||
class: 'btn btn-ghost btn-circle lg:hidden',
|
||||
onclick: () => isOpen(!isOpen())
|
||||
}, '☰')
|
||||
]),
|
||||
Div({ class: 'navbar-center' }, [
|
||||
Span({ class: 'text-xl font-bold' }, 'MyApp')
|
||||
]),
|
||||
Div({ class: 'navbar-end' }, [
|
||||
Button({ class: 'btn btn-ghost btn-circle' }, '🔔')
|
||||
])
|
||||
]),
|
||||
() => isOpen() ? Div({ class: 'flex flex-col gap-2 p-4 bg-base-200 rounded-box mt-2' }, [
|
||||
Button({ class: 'btn btn-ghost justify-start' }, 'Home'),
|
||||
Button({ class: 'btn btn-ghost justify-start' }, 'About'),
|
||||
Button({ class: 'btn btn-ghost justify-start' }, 'Services'),
|
||||
Button({ class: 'btn btn-ghost justify-start' }, 'Contact')
|
||||
]) : null
|
||||
]);
|
||||
};
|
||||
$mount(ResponsiveDemo, responsiveTarget);
|
||||
}
|
||||
|
||||
// 7. With Brand and Actions
|
||||
const brandTarget = document.querySelector('#demo-brand');
|
||||
if (brandTarget && !brandTarget.hasChildNodes()) {
|
||||
const BrandDemo = () => {
|
||||
return Navbar({ class: 'rounded-box bg-primary text-primary-content' }, [
|
||||
Div({ class: 'navbar-start' }, [
|
||||
Span({ class: 'text-xl font-bold' }, 'Brand')
|
||||
]),
|
||||
Div({ class: 'navbar-center hidden lg:flex' }, [
|
||||
Div({ class: 'menu menu-horizontal px-1' }, [
|
||||
Span({ class: 'text-sm' }, 'Features'),
|
||||
Span({ class: 'text-sm' }, 'Pricing'),
|
||||
Span({ class: 'text-sm' }, 'About')
|
||||
])
|
||||
]),
|
||||
Div({ class: 'navbar-end' }, [
|
||||
Button({ class: 'btn btn-ghost btn-sm' }, 'Login'),
|
||||
Button({ class: 'btn btn-outline btn-sm ml-2' }, 'Sign Up')
|
||||
])
|
||||
]);
|
||||
};
|
||||
$mount(BrandDemo, brandTarget);
|
||||
}
|
||||
|
||||
// 8. All Variants
|
||||
const variantsTarget = document.querySelector('#demo-variants');
|
||||
if (variantsTarget && !variantsTarget.hasChildNodes()) {
|
||||
const VariantsDemo = () => {
|
||||
return Div({ class: 'flex flex-col gap-4' }, [
|
||||
Div({ class: 'text-sm font-bold' }, 'Default Navbar'),
|
||||
Navbar({ class: 'rounded-box' }, [
|
||||
Div({ class: 'navbar-start' }, [Span({}, 'Start')]),
|
||||
Div({ class: 'navbar-center' }, [Span({}, 'Center')]),
|
||||
Div({ class: 'navbar-end' }, [Span({}, 'End')])
|
||||
]),
|
||||
|
||||
Div({ class: 'text-sm font-bold mt-2' }, 'With Shadow'),
|
||||
Navbar({ class: 'rounded-box shadow-lg' }, [
|
||||
Div({ class: 'navbar-start' }, [Span({}, 'Logo')]),
|
||||
Div({ class: 'navbar-end' }, [Button({ class: 'btn btn-sm' }, 'Button')])
|
||||
]),
|
||||
|
||||
Div({ class: 'text-sm font-bold mt-2' }, 'With Background'),
|
||||
Navbar({ class: 'rounded-box bg-base-300' }, [
|
||||
Div({ class: 'navbar-start' }, [Span({ class: 'font-bold' }, 'Colored')]),
|
||||
Div({ class: 'navbar-end' }, [Span({ class: 'text-sm' }, 'Info')])
|
||||
])
|
||||
]);
|
||||
};
|
||||
$mount(VariantsDemo, variantsTarget);
|
||||
}
|
||||
};
|
||||
|
||||
initNavbarExamples();
|
||||
|
||||
if (window.$docsify) {
|
||||
window.$docsify.plugins = [].concat(window.$docsify.plugins || [], (hook) => {
|
||||
hook.doneEach(initNavbarExamples);
|
||||
});
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
677
docs/components/tabs.md
Normal file
677
docs/components/tabs.md
Normal file
@@ -0,0 +1,677 @@
|
||||
# Tabs
|
||||
|
||||
Tabs component for organizing content into separate panels with tab navigation.
|
||||
|
||||
## Tag
|
||||
|
||||
`Tabs`
|
||||
|
||||
## Props
|
||||
|
||||
| Prop | Type | Default | Description |
|
||||
| :----------- | :-------------------------------------- | :---------- | :----------------------------------------------- |
|
||||
| `items` | `Array<TabItem> \| Signal<Array>` | `[]` | Array of tab items |
|
||||
| `class` | `string` | `''` | Additional CSS classes (DaisyUI + Tailwind) |
|
||||
|
||||
### TabItem Structure
|
||||
|
||||
| Property | Type | Description |
|
||||
| :---------- | :--------------------------- | :----------------------------------------------- |
|
||||
| `label` | `string \| VNode` | Tab button label |
|
||||
| `content` | `VNode \| function` | Content to display when tab is active |
|
||||
| `active` | `boolean \| Signal<boolean>` | Whether this tab is active (only one per group) |
|
||||
| `disabled` | `boolean` | Whether tab is disabled |
|
||||
| `tip` | `string` | Tooltip text for the tab |
|
||||
| `onclick` | `function` | Click handler (optional, overrides default) |
|
||||
|
||||
## Live Examples
|
||||
|
||||
### Basic Tabs
|
||||
|
||||
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
|
||||
<div id="demo-basic" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const BasicDemo = () => {
|
||||
const activeTab = $('tab1');
|
||||
|
||||
return Tabs({
|
||||
items: [
|
||||
{
|
||||
label: 'Tab 1',
|
||||
active: () => activeTab() === 'tab1',
|
||||
onclick: () => activeTab('tab1'),
|
||||
content: Div({ class: 'p-4' }, 'Content for Tab 1')
|
||||
},
|
||||
{
|
||||
label: 'Tab 2',
|
||||
active: () => activeTab() === 'tab2',
|
||||
onclick: () => activeTab('tab2'),
|
||||
content: Div({ class: 'p-4' }, 'Content for Tab 2')
|
||||
},
|
||||
{
|
||||
label: 'Tab 3',
|
||||
active: () => activeTab() === 'tab3',
|
||||
onclick: () => activeTab('tab3'),
|
||||
content: Div({ class: 'p-4' }, 'Content for Tab 3')
|
||||
}
|
||||
]
|
||||
});
|
||||
};
|
||||
$mount(BasicDemo, '#demo-basic');
|
||||
```
|
||||
|
||||
### With Icons
|
||||
|
||||
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
|
||||
<div id="demo-icons" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const IconsDemo = () => {
|
||||
const activeTab = $('home');
|
||||
|
||||
return Tabs({
|
||||
items: [
|
||||
{
|
||||
label: Span({ class: 'flex items-center gap-2' }, ['🏠', 'Home']),
|
||||
active: () => activeTab() === 'home',
|
||||
onclick: () => activeTab('home'),
|
||||
content: Div({ class: 'p-4' }, 'Welcome to the Home tab!')
|
||||
},
|
||||
{
|
||||
label: Span({ class: 'flex items-center gap-2' }, ['⭐', 'Favorites']),
|
||||
active: () => activeTab() === 'favorites',
|
||||
onclick: () => activeTab('favorites'),
|
||||
content: Div({ class: 'p-4' }, 'Your favorite items appear here.')
|
||||
},
|
||||
{
|
||||
label: Span({ class: 'flex items-center gap-2' }, ['⚙️', 'Settings']),
|
||||
active: () => activeTab() === 'settings',
|
||||
onclick: () => activeTab('settings'),
|
||||
content: Div({ class: 'p-4' }, 'Configure your preferences.')
|
||||
}
|
||||
]
|
||||
});
|
||||
};
|
||||
$mount(IconsDemo, '#demo-icons');
|
||||
```
|
||||
|
||||
### With Tooltips
|
||||
|
||||
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
|
||||
<div id="demo-tooltips" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const TooltipsDemo = () => {
|
||||
const activeTab = $('profile');
|
||||
|
||||
return Tabs({
|
||||
items: [
|
||||
{
|
||||
label: 'Profile',
|
||||
tip: 'View your profile information',
|
||||
active: () => activeTab() === 'profile',
|
||||
onclick: () => activeTab('profile'),
|
||||
content: Div({ class: 'p-4' }, 'Profile information here.')
|
||||
},
|
||||
{
|
||||
label: 'Settings',
|
||||
tip: 'Adjust your preferences',
|
||||
active: () => activeTab() === 'settings',
|
||||
onclick: () => activeTab('settings'),
|
||||
content: Div({ class: 'p-4' }, 'Settings configuration.')
|
||||
},
|
||||
{
|
||||
label: 'Notifications',
|
||||
tip: 'Manage notifications',
|
||||
active: () => activeTab() === 'notifications',
|
||||
onclick: () => activeTab('notifications'),
|
||||
content: Div({ class: 'p-4' }, 'Notification settings.')
|
||||
}
|
||||
]
|
||||
});
|
||||
};
|
||||
$mount(TooltipsDemo, '#demo-tooltips');
|
||||
```
|
||||
|
||||
### Disabled Tab
|
||||
|
||||
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
|
||||
<div id="demo-disabled" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const DisabledDemo = () => {
|
||||
const activeTab = $('basic');
|
||||
|
||||
return Tabs({
|
||||
items: [
|
||||
{
|
||||
label: 'Basic',
|
||||
active: () => activeTab() === 'basic',
|
||||
onclick: () => activeTab('basic'),
|
||||
content: Div({ class: 'p-4' }, 'Basic features available.')
|
||||
},
|
||||
{
|
||||
label: 'Premium',
|
||||
disabled: true,
|
||||
tip: 'Upgrade to access',
|
||||
content: Div({ class: 'p-4' }, 'Premium content (locked)')
|
||||
},
|
||||
{
|
||||
label: 'Pro',
|
||||
disabled: true,
|
||||
tip: 'Coming soon',
|
||||
content: Div({ class: 'p-4' }, 'Pro features (coming soon)')
|
||||
}
|
||||
]
|
||||
});
|
||||
};
|
||||
$mount(DisabledDemo, '#demo-disabled');
|
||||
```
|
||||
|
||||
### Reactive Content
|
||||
|
||||
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
|
||||
<div id="demo-reactive" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const ReactiveDemo = () => {
|
||||
const activeTab = $('counter');
|
||||
const count = $(0);
|
||||
|
||||
return Tabs({
|
||||
items: [
|
||||
{
|
||||
label: 'Counter',
|
||||
active: () => activeTab() === 'counter',
|
||||
onclick: () => activeTab('counter'),
|
||||
content: Div({ class: 'p-4 text-center' }, [
|
||||
Div({ class: 'text-4xl font-bold mb-4' }, () => count()),
|
||||
Button({
|
||||
class: 'btn btn-primary',
|
||||
onclick: () => count(count() + 1)
|
||||
}, 'Increment')
|
||||
])
|
||||
},
|
||||
{
|
||||
label: 'Timer',
|
||||
active: () => activeTab() === 'timer',
|
||||
onclick: () => activeTab('timer'),
|
||||
content: Div({ class: 'p-4' }, () => `Current time: ${new Date().toLocaleTimeString()}`)
|
||||
},
|
||||
{
|
||||
label: 'Status',
|
||||
active: () => activeTab() === 'status',
|
||||
onclick: () => activeTab('status'),
|
||||
content: Div({ class: 'p-4' }, () => `Counter value: ${count()}, Last updated: ${new Date().toLocaleTimeString()}`)
|
||||
}
|
||||
]
|
||||
});
|
||||
};
|
||||
$mount(ReactiveDemo, '#demo-reactive');
|
||||
```
|
||||
|
||||
### Form Tabs
|
||||
|
||||
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
|
||||
<div id="demo-form" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const FormTabs = () => {
|
||||
const activeTab = $('personal');
|
||||
const formData = $({
|
||||
name: '',
|
||||
email: '',
|
||||
address: '',
|
||||
city: '',
|
||||
notifications: true,
|
||||
newsletter: false
|
||||
});
|
||||
|
||||
const updateField = (field, value) => {
|
||||
formData({ ...formData(), [field]: value });
|
||||
};
|
||||
|
||||
const handleSubmit = () => {
|
||||
Toast('Form submitted!', 'alert-success', 2000);
|
||||
console.log(formData());
|
||||
};
|
||||
|
||||
return Div({ class: 'flex flex-col gap-4' }, [
|
||||
Tabs({
|
||||
items: [
|
||||
{
|
||||
label: 'Personal Info',
|
||||
active: () => activeTab() === 'personal',
|
||||
onclick: () => activeTab('personal'),
|
||||
content: Div({ class: 'p-4 space-y-4' }, [
|
||||
Input({
|
||||
label: 'Name',
|
||||
value: () => formData().name,
|
||||
placeholder: 'Enter your name',
|
||||
oninput: (e) => updateField('name', e.target.value)
|
||||
}),
|
||||
Input({
|
||||
label: 'Email',
|
||||
type: 'email',
|
||||
value: () => formData().email,
|
||||
placeholder: 'email@example.com',
|
||||
oninput: (e) => updateField('email', e.target.value)
|
||||
})
|
||||
])
|
||||
},
|
||||
{
|
||||
label: 'Address',
|
||||
active: () => activeTab() === 'address',
|
||||
onclick: () => activeTab('address'),
|
||||
content: Div({ class: 'p-4 space-y-4' }, [
|
||||
Input({
|
||||
label: 'Address',
|
||||
value: () => formData().address,
|
||||
placeholder: 'Street address',
|
||||
oninput: (e) => updateField('address', e.target.value)
|
||||
}),
|
||||
Input({
|
||||
label: 'City',
|
||||
value: () => formData().city,
|
||||
placeholder: 'City',
|
||||
oninput: (e) => updateField('city', e.target.value)
|
||||
})
|
||||
])
|
||||
},
|
||||
{
|
||||
label: 'Preferences',
|
||||
active: () => activeTab() === 'prefs',
|
||||
onclick: () => activeTab('prefs'),
|
||||
content: Div({ class: 'p-4 space-y-4' }, [
|
||||
Checkbox({
|
||||
label: 'Email notifications',
|
||||
value: () => formData().notifications,
|
||||
onclick: () => updateField('notifications', !formData().notifications)
|
||||
}),
|
||||
Checkbox({
|
||||
label: 'Newsletter subscription',
|
||||
value: () => formData().newsletter,
|
||||
onclick: () => updateField('newsletter', !formData().newsletter)
|
||||
})
|
||||
])
|
||||
}
|
||||
]
|
||||
}),
|
||||
Div({ class: 'flex justify-end mt-4' }, [
|
||||
Button({
|
||||
class: 'btn btn-primary',
|
||||
onclick: handleSubmit
|
||||
}, 'Submit')
|
||||
])
|
||||
]);
|
||||
};
|
||||
$mount(FormTabs, '#demo-form');
|
||||
```
|
||||
|
||||
### All Variants
|
||||
|
||||
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
|
||||
<div id="demo-variants" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-col gap-6"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const VariantsDemo = () => {
|
||||
const items = [
|
||||
{ label: 'Tab 1', content: 'Content 1' },
|
||||
{ label: 'Tab 2', content: 'Content 2' },
|
||||
{ label: 'Tab 3', content: 'Content 3' }
|
||||
].map((tab, idx) => ({
|
||||
...tab,
|
||||
active: () => idx === 0,
|
||||
content: Div({ class: 'p-4' }, tab.content)
|
||||
}));
|
||||
|
||||
return Div({ class: 'flex flex-col gap-6' }, [
|
||||
Div({ class: 'text-sm font-bold' }, 'Default Tabs'),
|
||||
Tabs({ items }),
|
||||
|
||||
Div({ class: 'text-sm font-bold mt-4' }, 'Boxed Tabs'),
|
||||
Tabs({ items, class: 'tabs-box' }),
|
||||
|
||||
Div({ class: 'text-sm font-bold mt-4' }, 'Lifted Tabs'),
|
||||
Tabs({ items, class: 'tabs-lifted' })
|
||||
]);
|
||||
};
|
||||
$mount(VariantsDemo, '#demo-variants');
|
||||
```
|
||||
|
||||
<script>
|
||||
(function() {
|
||||
const initTabsExamples = () => {
|
||||
|
||||
// 1. Basic Tabs
|
||||
const basicTarget = document.querySelector('#demo-basic');
|
||||
if (basicTarget && !basicTarget.hasChildNodes()) {
|
||||
const BasicDemo = () => {
|
||||
const activeTab = $('tab1');
|
||||
|
||||
return Tabs({
|
||||
items: [
|
||||
{
|
||||
label: 'Tab 1',
|
||||
active: () => activeTab() === 'tab1',
|
||||
onclick: () => activeTab('tab1'),
|
||||
content: Div({ class: 'p-4' }, 'Content for Tab 1')
|
||||
},
|
||||
{
|
||||
label: 'Tab 2',
|
||||
active: () => activeTab() === 'tab2',
|
||||
onclick: () => activeTab('tab2'),
|
||||
content: Div({ class: 'p-4' }, 'Content for Tab 2')
|
||||
},
|
||||
{
|
||||
label: 'Tab 3',
|
||||
active: () => activeTab() === 'tab3',
|
||||
onclick: () => activeTab('tab3'),
|
||||
content: Div({ class: 'p-4' }, 'Content for Tab 3')
|
||||
}
|
||||
]
|
||||
});
|
||||
};
|
||||
$mount(BasicDemo, basicTarget);
|
||||
}
|
||||
|
||||
// 2. With Icons
|
||||
const iconsTarget = document.querySelector('#demo-icons');
|
||||
if (iconsTarget && !iconsTarget.hasChildNodes()) {
|
||||
const IconsDemo = () => {
|
||||
const activeTab = $('home');
|
||||
|
||||
return Tabs({
|
||||
items: [
|
||||
{
|
||||
label: Span({ class: 'flex items-center gap-2' }, ['🏠', 'Home']),
|
||||
active: () => activeTab() === 'home',
|
||||
onclick: () => activeTab('home'),
|
||||
content: Div({ class: 'p-4' }, 'Welcome to the Home tab!')
|
||||
},
|
||||
{
|
||||
label: Span({ class: 'flex items-center gap-2' }, ['⭐', 'Favorites']),
|
||||
active: () => activeTab() === 'favorites',
|
||||
onclick: () => activeTab('favorites'),
|
||||
content: Div({ class: 'p-4' }, 'Your favorite items appear here.')
|
||||
},
|
||||
{
|
||||
label: Span({ class: 'flex items-center gap-2' }, ['⚙️', 'Settings']),
|
||||
active: () => activeTab() === 'settings',
|
||||
onclick: () => activeTab('settings'),
|
||||
content: Div({ class: 'p-4' }, 'Configure your preferences.')
|
||||
}
|
||||
]
|
||||
});
|
||||
};
|
||||
$mount(IconsDemo, iconsTarget);
|
||||
}
|
||||
|
||||
// 3. With Tooltips
|
||||
const tooltipsTarget = document.querySelector('#demo-tooltips');
|
||||
if (tooltipsTarget && !tooltipsTarget.hasChildNodes()) {
|
||||
const TooltipsDemo = () => {
|
||||
const activeTab = $('profile');
|
||||
|
||||
return Tabs({
|
||||
items: [
|
||||
{
|
||||
label: 'Profile',
|
||||
tip: 'View your profile information',
|
||||
active: () => activeTab() === 'profile',
|
||||
onclick: () => activeTab('profile'),
|
||||
content: Div({ class: 'p-4' }, 'Profile information here.')
|
||||
},
|
||||
{
|
||||
label: 'Settings',
|
||||
tip: 'Adjust your preferences',
|
||||
active: () => activeTab() === 'settings',
|
||||
onclick: () => activeTab('settings'),
|
||||
content: Div({ class: 'p-4' }, 'Settings configuration.')
|
||||
},
|
||||
{
|
||||
label: 'Notifications',
|
||||
tip: 'Manage notifications',
|
||||
active: () => activeTab() === 'notifications',
|
||||
onclick: () => activeTab('notifications'),
|
||||
content: Div({ class: 'p-4' }, 'Notification settings.')
|
||||
}
|
||||
]
|
||||
});
|
||||
};
|
||||
$mount(TooltipsDemo, tooltipsTarget);
|
||||
}
|
||||
|
||||
// 4. Disabled Tab
|
||||
const disabledTarget = document.querySelector('#demo-disabled');
|
||||
if (disabledTarget && !disabledTarget.hasChildNodes()) {
|
||||
const DisabledDemo = () => {
|
||||
const activeTab = $('basic');
|
||||
|
||||
return Tabs({
|
||||
items: [
|
||||
{
|
||||
label: 'Basic',
|
||||
active: () => activeTab() === 'basic',
|
||||
onclick: () => activeTab('basic'),
|
||||
content: Div({ class: 'p-4' }, 'Basic features available.')
|
||||
},
|
||||
{
|
||||
label: 'Premium',
|
||||
disabled: true,
|
||||
tip: 'Upgrade to access',
|
||||
content: Div({ class: 'p-4' }, 'Premium content (locked)')
|
||||
},
|
||||
{
|
||||
label: 'Pro',
|
||||
disabled: true,
|
||||
tip: 'Coming soon',
|
||||
content: Div({ class: 'p-4' }, 'Pro features (coming soon)')
|
||||
}
|
||||
]
|
||||
});
|
||||
};
|
||||
$mount(DisabledDemo, disabledTarget);
|
||||
}
|
||||
|
||||
// 5. Reactive Content
|
||||
const reactiveTarget = document.querySelector('#demo-reactive');
|
||||
if (reactiveTarget && !reactiveTarget.hasChildNodes()) {
|
||||
const ReactiveDemo = () => {
|
||||
const activeTab = $('counter');
|
||||
const count = $(0);
|
||||
|
||||
return Tabs({
|
||||
items: [
|
||||
{
|
||||
label: 'Counter',
|
||||
active: () => activeTab() === 'counter',
|
||||
onclick: () => activeTab('counter'),
|
||||
content: Div({ class: 'p-4 text-center' }, [
|
||||
Div({ class: 'text-4xl font-bold mb-4' }, () => count()),
|
||||
Button({
|
||||
class: 'btn btn-primary',
|
||||
onclick: () => count(count() + 1)
|
||||
}, 'Increment')
|
||||
])
|
||||
},
|
||||
{
|
||||
label: 'Timer',
|
||||
active: () => activeTab() === 'timer',
|
||||
onclick: () => activeTab('timer'),
|
||||
content: Div({ class: 'p-4' }, () => `Current time: ${new Date().toLocaleTimeString()}`)
|
||||
},
|
||||
{
|
||||
label: 'Status',
|
||||
active: () => activeTab() === 'status',
|
||||
onclick: () => activeTab('status'),
|
||||
content: Div({ class: 'p-4' }, () => `Counter value: ${count()}, Last updated: ${new Date().toLocaleTimeString()}`)
|
||||
}
|
||||
]
|
||||
});
|
||||
};
|
||||
$mount(ReactiveDemo, reactiveTarget);
|
||||
}
|
||||
|
||||
// 6. Form Tabs
|
||||
const formTarget = document.querySelector('#demo-form');
|
||||
if (formTarget && !formTarget.hasChildNodes()) {
|
||||
const FormTabs = () => {
|
||||
const activeTab = $('personal');
|
||||
const formData = $({
|
||||
name: '',
|
||||
email: '',
|
||||
address: '',
|
||||
city: '',
|
||||
notifications: true,
|
||||
newsletter: false
|
||||
});
|
||||
|
||||
const updateField = (field, value) => {
|
||||
formData({ ...formData(), [field]: value });
|
||||
};
|
||||
|
||||
const handleSubmit = () => {
|
||||
Toast('Form submitted!', 'alert-success', 2000);
|
||||
console.log(formData());
|
||||
};
|
||||
|
||||
return Div({ class: 'flex flex-col gap-4' }, [
|
||||
Tabs({
|
||||
items: [
|
||||
{
|
||||
label: 'Personal Info',
|
||||
active: () => activeTab() === 'personal',
|
||||
onclick: () => activeTab('personal'),
|
||||
content: Div({ class: 'p-4 space-y-4' }, [
|
||||
Input({
|
||||
label: 'Name',
|
||||
value: () => formData().name,
|
||||
placeholder: 'Enter your name',
|
||||
oninput: (e) => updateField('name', e.target.value)
|
||||
}),
|
||||
Input({
|
||||
label: 'Email',
|
||||
type: 'email',
|
||||
value: () => formData().email,
|
||||
placeholder: 'email@example.com',
|
||||
oninput: (e) => updateField('email', e.target.value)
|
||||
})
|
||||
])
|
||||
},
|
||||
{
|
||||
label: 'Address',
|
||||
active: () => activeTab() === 'address',
|
||||
onclick: () => activeTab('address'),
|
||||
content: Div({ class: 'p-4 space-y-4' }, [
|
||||
Input({
|
||||
label: 'Address',
|
||||
value: () => formData().address,
|
||||
placeholder: 'Street address',
|
||||
oninput: (e) => updateField('address', e.target.value)
|
||||
}),
|
||||
Input({
|
||||
label: 'City',
|
||||
value: () => formData().city,
|
||||
placeholder: 'City',
|
||||
oninput: (e) => updateField('city', e.target.value)
|
||||
})
|
||||
])
|
||||
},
|
||||
{
|
||||
label: 'Preferences',
|
||||
active: () => activeTab() === 'prefs',
|
||||
onclick: () => activeTab('prefs'),
|
||||
content: Div({ class: 'p-4 space-y-4' }, [
|
||||
Checkbox({
|
||||
label: 'Email notifications',
|
||||
value: () => formData().notifications,
|
||||
onclick: () => updateField('notifications', !formData().notifications)
|
||||
}),
|
||||
Checkbox({
|
||||
label: 'Newsletter subscription',
|
||||
value: () => formData().newsletter,
|
||||
onclick: () => updateField('newsletter', !formData().newsletter)
|
||||
})
|
||||
])
|
||||
}
|
||||
]
|
||||
}),
|
||||
Div({ class: 'flex justify-end mt-4' }, [
|
||||
Button({
|
||||
class: 'btn btn-primary',
|
||||
onclick: handleSubmit
|
||||
}, 'Submit')
|
||||
])
|
||||
]);
|
||||
};
|
||||
$mount(FormTabs, formTarget);
|
||||
}
|
||||
|
||||
// 7. All Variants
|
||||
const variantsTarget = document.querySelector('#demo-variants');
|
||||
if (variantsTarget && !variantsTarget.hasChildNodes()) {
|
||||
const VariantsDemo = () => {
|
||||
const items = [
|
||||
{ label: 'Tab 1', content: 'Content 1' },
|
||||
{ label: 'Tab 2', content: 'Content 2' },
|
||||
{ label: 'Tab 3', content: 'Content 3' }
|
||||
].map((tab, idx) => ({
|
||||
...tab,
|
||||
active: () => idx === 0,
|
||||
content: Div({ class: 'p-4' }, tab.content)
|
||||
}));
|
||||
|
||||
return Div({ class: 'flex flex-col gap-6' }, [
|
||||
Div({ class: 'text-sm font-bold' }, 'Default Tabs'),
|
||||
Tabs({ items }),
|
||||
|
||||
Div({ class: 'text-sm font-bold mt-4' }, 'Boxed Tabs'),
|
||||
Tabs({ items, class: 'tabs-box' }),
|
||||
|
||||
Div({ class: 'text-sm font-bold mt-4' }, 'Lifted Tabs'),
|
||||
Tabs({ items, class: 'tabs-lifted' })
|
||||
]);
|
||||
};
|
||||
$mount(VariantsDemo, variantsTarget);
|
||||
}
|
||||
};
|
||||
|
||||
initTabsExamples();
|
||||
|
||||
if (window.$docsify) {
|
||||
window.$docsify.plugins = [].concat(window.$docsify.plugins || [], (hook) => {
|
||||
hook.doneEach(initTabsExamples);
|
||||
});
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
554
docs/components/tooltip.md
Normal file
554
docs/components/tooltip.md
Normal file
@@ -0,0 +1,554 @@
|
||||
# Tooltip
|
||||
|
||||
Tooltip component for displaying helpful hints and additional information on hover.
|
||||
|
||||
## Tag
|
||||
|
||||
`Tooltip`
|
||||
|
||||
## Props
|
||||
|
||||
| Prop | Type | Default | Description |
|
||||
| :----------- | :--------------------------- | :---------- | :----------------------------------------------- |
|
||||
| `tip` | `string \| VNode \| Signal` | `-` | Tooltip content to display on hover |
|
||||
| `class` | `string` | `''` | Additional CSS classes (DaisyUI + Tailwind) |
|
||||
| `children` | `VNode` | `-` | Element to attach the tooltip to |
|
||||
|
||||
## Live Examples
|
||||
|
||||
### Basic Tooltip
|
||||
|
||||
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
|
||||
<div id="demo-basic" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-wrap gap-4 justify-center"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const BasicDemo = () => {
|
||||
return Div({ class: 'flex flex-wrap gap-4 justify-center' }, [
|
||||
Tooltip({ tip: 'This is a tooltip' }, [
|
||||
Button({ class: 'btn btn-primary' }, 'Hover me')
|
||||
]),
|
||||
Tooltip({ tip: 'Tooltips can be placed on any element' }, [
|
||||
Span({ class: 'text-sm cursor-help border-b border-dashed' }, 'Help text')
|
||||
]),
|
||||
Tooltip({ tip: 'Icons can also have tooltips' }, [
|
||||
Icons.iconInfo
|
||||
])
|
||||
]);
|
||||
};
|
||||
$mount(BasicDemo, '#demo-basic');
|
||||
```
|
||||
|
||||
### Tooltip Positions
|
||||
|
||||
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
|
||||
<div id="demo-positions" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-wrap gap-8 justify-center"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const PositionsDemo = () => {
|
||||
return Div({ class: 'flex flex-wrap gap-8 justify-center' }, [
|
||||
Tooltip({ tip: 'Top tooltip', class: 'tooltip-top' }, [
|
||||
Button({ class: 'btn btn-sm' }, 'Top')
|
||||
]),
|
||||
Tooltip({ tip: 'Bottom tooltip', class: 'tooltip-bottom' }, [
|
||||
Button({ class: 'btn btn-sm' }, 'Bottom')
|
||||
]),
|
||||
Tooltip({ tip: 'Left tooltip', class: 'tooltip-left' }, [
|
||||
Button({ class: 'btn btn-sm' }, 'Left')
|
||||
]),
|
||||
Tooltip({ tip: 'Right tooltip', class: 'tooltip-right' }, [
|
||||
Button({ class: 'btn btn-sm' }, 'Right')
|
||||
])
|
||||
]);
|
||||
};
|
||||
$mount(PositionsDemo, '#demo-positions');
|
||||
```
|
||||
|
||||
### Tooltip with Icons
|
||||
|
||||
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
|
||||
<div id="demo-icons" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-wrap gap-8 justify-center"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const IconsDemo = () => {
|
||||
return Div({ class: 'flex flex-wrap gap-8 justify-center' }, [
|
||||
Tooltip({ tip: 'Save document' }, [
|
||||
Button({ class: 'btn btn-ghost btn-circle' }, '💾')
|
||||
]),
|
||||
Tooltip({ tip: 'Edit item' }, [
|
||||
Button({ class: 'btn btn-ghost btn-circle' }, '✏️')
|
||||
]),
|
||||
Tooltip({ tip: 'Delete permanently' }, [
|
||||
Button({ class: 'btn btn-ghost btn-circle text-error' }, '🗑️')
|
||||
]),
|
||||
Tooltip({ tip: 'Settings' }, [
|
||||
Button({ class: 'btn btn-ghost btn-circle' }, '⚙️')
|
||||
])
|
||||
]);
|
||||
};
|
||||
$mount(IconsDemo, '#demo-icons');
|
||||
```
|
||||
|
||||
### Form Field Tooltips
|
||||
|
||||
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
|
||||
<div id="demo-form" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const FormDemo = () => {
|
||||
const username = $('');
|
||||
const email = $('');
|
||||
|
||||
return Div({ class: 'flex flex-col gap-4 max-w-md mx-auto' }, [
|
||||
Div({ class: 'flex items-center gap-2' }, [
|
||||
Input({
|
||||
label: 'Username',
|
||||
value: username,
|
||||
placeholder: 'Choose a username',
|
||||
oninput: (e) => username(e.target.value)
|
||||
}),
|
||||
Tooltip({ tip: 'Must be at least 3 characters, letters and numbers only' }, [
|
||||
Span({ class: 'cursor-help text-info' }, '?')
|
||||
])
|
||||
]),
|
||||
Div({ class: 'flex items-center gap-2' }, [
|
||||
Input({
|
||||
label: 'Email',
|
||||
type: 'email',
|
||||
value: email,
|
||||
placeholder: 'Enter your email',
|
||||
oninput: (e) => email(e.target.value)
|
||||
}),
|
||||
Tooltip({ tip: 'We\'ll never share your email with anyone' }, [
|
||||
Span({ class: 'cursor-help text-info' }, '?')
|
||||
])
|
||||
])
|
||||
]);
|
||||
};
|
||||
$mount(FormDemo, '#demo-form');
|
||||
```
|
||||
|
||||
### Interactive Tooltip
|
||||
|
||||
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
|
||||
<div id="demo-interactive" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const InteractiveDemo = () => {
|
||||
const showTip = $(false);
|
||||
const tooltipText = $('Hover over the button!');
|
||||
|
||||
const updateTooltip = (text) => {
|
||||
tooltipText(text);
|
||||
setTimeout(() => {
|
||||
tooltipText('Hover over the button!');
|
||||
}, 2000);
|
||||
};
|
||||
|
||||
return Div({ class: 'flex flex-col gap-4 items-center' }, [
|
||||
Tooltip({ tip: () => tooltipText() }, [
|
||||
Button({
|
||||
class: 'btn btn-primary btn-lg',
|
||||
onclick: () => Toast('Button clicked!', 'alert-info', 2000)
|
||||
}, 'Interactive Button')
|
||||
]),
|
||||
Div({ class: 'flex gap-2 flex-wrap justify-center mt-4' }, [
|
||||
Button({
|
||||
class: 'btn btn-xs',
|
||||
onclick: () => updateTooltip('You clicked the button!')
|
||||
}, 'Change Tooltip'),
|
||||
Button({
|
||||
class: 'btn btn-xs',
|
||||
onclick: () => updateTooltip('Try hovering now!')
|
||||
}, 'Change Again')
|
||||
])
|
||||
]);
|
||||
};
|
||||
$mount(InteractiveDemo, '#demo-interactive');
|
||||
```
|
||||
|
||||
### Rich Tooltip Content
|
||||
|
||||
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
|
||||
<div id="demo-rich" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-wrap gap-4 justify-center"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const RichDemo = () => {
|
||||
return Div({ class: 'flex flex-wrap gap-4 justify-center' }, [
|
||||
Tooltip({
|
||||
tip: Div({ class: 'text-left p-1' }, [
|
||||
Div({ class: 'font-bold' }, 'User Info'),
|
||||
Div({ class: 'text-xs' }, 'John Doe'),
|
||||
Div({ class: 'text-xs' }, 'john@example.com'),
|
||||
Div({ class: 'badge badge-xs badge-primary mt-1' }, 'Admin')
|
||||
])
|
||||
}, [
|
||||
Button({ class: 'btn btn-outline' }, 'User Profile')
|
||||
]),
|
||||
Tooltip({
|
||||
tip: Div({ class: 'text-left p-1' }, [
|
||||
Div({ class: 'font-bold flex items-center gap-1' }, [
|
||||
Icons.iconWarning,
|
||||
Span({}, 'System Status')
|
||||
]),
|
||||
Div({ class: 'text-xs' }, 'All systems operational'),
|
||||
Div({ class: 'text-xs text-success' }, '✓ 99.9% uptime')
|
||||
])
|
||||
}, [
|
||||
Button({ class: 'btn btn-outline' }, 'System Status')
|
||||
])
|
||||
]);
|
||||
};
|
||||
$mount(RichDemo, '#demo-rich');
|
||||
```
|
||||
|
||||
### Color Variants
|
||||
|
||||
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
|
||||
<div id="demo-colors" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-wrap gap-4 justify-center"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const ColorsDemo = () => {
|
||||
return Div({ class: 'flex flex-wrap gap-4 justify-center' }, [
|
||||
Tooltip({ tip: 'Primary tooltip', class: 'tooltip-primary' }, [
|
||||
Button({ class: 'btn btn-primary btn-sm' }, 'Primary')
|
||||
]),
|
||||
Tooltip({ tip: 'Secondary tooltip', class: 'tooltip-secondary' }, [
|
||||
Button({ class: 'btn btn-secondary btn-sm' }, 'Secondary')
|
||||
]),
|
||||
Tooltip({ tip: 'Accent tooltip', class: 'tooltip-accent' }, [
|
||||
Button({ class: 'btn btn-accent btn-sm' }, 'Accent')
|
||||
]),
|
||||
Tooltip({ tip: 'Info tooltip', class: 'tooltip-info' }, [
|
||||
Button({ class: 'btn btn-info btn-sm' }, 'Info')
|
||||
]),
|
||||
Tooltip({ tip: 'Success tooltip', class: 'tooltip-success' }, [
|
||||
Button({ class: 'btn btn-success btn-sm' }, 'Success')
|
||||
]),
|
||||
Tooltip({ tip: 'Warning tooltip', class: 'tooltip-warning' }, [
|
||||
Button({ class: 'btn btn-warning btn-sm' }, 'Warning')
|
||||
]),
|
||||
Tooltip({ tip: 'Error tooltip', class: 'tooltip-error' }, [
|
||||
Button({ class: 'btn btn-error btn-sm' }, 'Error')
|
||||
])
|
||||
]);
|
||||
};
|
||||
$mount(ColorsDemo, '#demo-colors');
|
||||
```
|
||||
|
||||
### All Tooltip Positions
|
||||
|
||||
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
|
||||
<div id="demo-all-positions" class="bg-base-100 p-6 rounded-xl border border-base-300 grid grid-cols-3 gap-4 justify-items-center"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const AllPositionsDemo = () => {
|
||||
return Div({ class: 'grid grid-cols-3 gap-4 justify-items-center' }, [
|
||||
Div({ class: 'col-start-2' }, [
|
||||
Tooltip({ tip: 'Top tooltip', class: 'tooltip-top' }, [
|
||||
Button({ class: 'btn btn-sm w-24' }, 'Top')
|
||||
])
|
||||
]),
|
||||
Div({ class: 'col-start-1 row-start-2' }, [
|
||||
Tooltip({ tip: 'Left tooltip', class: 'tooltip-left' }, [
|
||||
Button({ class: 'btn btn-sm w-24' }, 'Left')
|
||||
])
|
||||
]),
|
||||
Div({ class: 'col-start-2 row-start-2' }, [
|
||||
Tooltip({ tip: 'Center tooltip', class: 'tooltip' }, [
|
||||
Button({ class: 'btn btn-sm w-24' }, 'Center')
|
||||
])
|
||||
]),
|
||||
Div({ class: 'col-start-3 row-start-2' }, [
|
||||
Tooltip({ tip: 'Right tooltip', class: 'tooltip-right' }, [
|
||||
Button({ class: 'btn btn-sm w-24' }, 'Right')
|
||||
])
|
||||
]),
|
||||
Div({ class: 'col-start-2 row-start-3' }, [
|
||||
Tooltip({ tip: 'Bottom tooltip', class: 'tooltip-bottom' }, [
|
||||
Button({ class: 'btn btn-sm w-24' }, 'Bottom')
|
||||
])
|
||||
])
|
||||
]);
|
||||
};
|
||||
$mount(AllPositionsDemo, '#demo-all-positions');
|
||||
```
|
||||
|
||||
<script>
|
||||
(function() {
|
||||
const initTooltipExamples = () => {
|
||||
|
||||
// 1. Basic Tooltip
|
||||
const basicTarget = document.querySelector('#demo-basic');
|
||||
if (basicTarget && !basicTarget.hasChildNodes()) {
|
||||
const BasicDemo = () => {
|
||||
return Div({ class: 'flex flex-wrap gap-4 justify-center' }, [
|
||||
Tooltip({ tip: 'This is a tooltip' }, [
|
||||
Button({ class: 'btn btn-primary' }, 'Hover me')
|
||||
]),
|
||||
Tooltip({ tip: 'Tooltips can be placed on any element' }, [
|
||||
Span({ class: 'text-sm cursor-help border-b border-dashed' }, 'Help text')
|
||||
]),
|
||||
Tooltip({ tip: 'Icons can also have tooltips' }, [
|
||||
Icons.iconInfo
|
||||
])
|
||||
]);
|
||||
};
|
||||
$mount(BasicDemo, basicTarget);
|
||||
}
|
||||
|
||||
// 2. Tooltip Positions
|
||||
const positionsTarget = document.querySelector('#demo-positions');
|
||||
if (positionsTarget && !positionsTarget.hasChildNodes()) {
|
||||
const PositionsDemo = () => {
|
||||
return Div({ class: 'flex flex-wrap gap-8 justify-center' }, [
|
||||
Tooltip({ tip: 'Top tooltip', class: 'tooltip-top' }, [
|
||||
Button({ class: 'btn btn-sm' }, 'Top')
|
||||
]),
|
||||
Tooltip({ tip: 'Bottom tooltip', class: 'tooltip-bottom' }, [
|
||||
Button({ class: 'btn btn-sm' }, 'Bottom')
|
||||
]),
|
||||
Tooltip({ tip: 'Left tooltip', class: 'tooltip-left' }, [
|
||||
Button({ class: 'btn btn-sm' }, 'Left')
|
||||
]),
|
||||
Tooltip({ tip: 'Right tooltip', class: 'tooltip-right' }, [
|
||||
Button({ class: 'btn btn-sm' }, 'Right')
|
||||
])
|
||||
]);
|
||||
};
|
||||
$mount(PositionsDemo, positionsTarget);
|
||||
}
|
||||
|
||||
// 3. Tooltip with Icons
|
||||
const iconsTarget = document.querySelector('#demo-icons');
|
||||
if (iconsTarget && !iconsTarget.hasChildNodes()) {
|
||||
const IconsDemo = () => {
|
||||
return Div({ class: 'flex flex-wrap gap-8 justify-center' }, [
|
||||
Tooltip({ tip: 'Save document' }, [
|
||||
Button({ class: 'btn btn-ghost btn-circle' }, '💾')
|
||||
]),
|
||||
Tooltip({ tip: 'Edit item' }, [
|
||||
Button({ class: 'btn btn-ghost btn-circle' }, '✏️')
|
||||
]),
|
||||
Tooltip({ tip: 'Delete permanently' }, [
|
||||
Button({ class: 'btn btn-ghost btn-circle text-error' }, '🗑️')
|
||||
]),
|
||||
Tooltip({ tip: 'Settings' }, [
|
||||
Button({ class: 'btn btn-ghost btn-circle' }, '⚙️')
|
||||
])
|
||||
]);
|
||||
};
|
||||
$mount(IconsDemo, iconsTarget);
|
||||
}
|
||||
|
||||
// 4. Form Field Tooltips
|
||||
const formTarget = document.querySelector('#demo-form');
|
||||
if (formTarget && !formTarget.hasChildNodes()) {
|
||||
const FormDemo = () => {
|
||||
const username = $('');
|
||||
const email = $('');
|
||||
|
||||
return Div({ class: 'flex flex-col gap-4 max-w-md mx-auto' }, [
|
||||
Div({ class: 'flex items-center gap-2' }, [
|
||||
Input({
|
||||
label: 'Username',
|
||||
value: username,
|
||||
placeholder: 'Choose a username',
|
||||
oninput: (e) => username(e.target.value)
|
||||
}),
|
||||
Tooltip({ tip: 'Must be at least 3 characters, letters and numbers only' }, [
|
||||
Span({ class: 'cursor-help text-info' }, '?')
|
||||
])
|
||||
]),
|
||||
Div({ class: 'flex items-center gap-2' }, [
|
||||
Input({
|
||||
label: 'Email',
|
||||
type: 'email',
|
||||
value: email,
|
||||
placeholder: 'Enter your email',
|
||||
oninput: (e) => email(e.target.value)
|
||||
}),
|
||||
Tooltip({ tip: 'We\'ll never share your email with anyone' }, [
|
||||
Span({ class: 'cursor-help text-info' }, '?')
|
||||
])
|
||||
])
|
||||
]);
|
||||
};
|
||||
$mount(FormDemo, formTarget);
|
||||
}
|
||||
|
||||
// 5. Interactive Tooltip
|
||||
const interactiveTarget = document.querySelector('#demo-interactive');
|
||||
if (interactiveTarget && !interactiveTarget.hasChildNodes()) {
|
||||
const InteractiveDemo = () => {
|
||||
const showTip = $(false);
|
||||
const tooltipText = $('Hover over the button!');
|
||||
|
||||
const updateTooltip = (text) => {
|
||||
tooltipText(text);
|
||||
setTimeout(() => {
|
||||
tooltipText('Hover over the button!');
|
||||
}, 2000);
|
||||
};
|
||||
|
||||
return Div({ class: 'flex flex-col gap-4 items-center' }, [
|
||||
Tooltip({ tip: () => tooltipText() }, [
|
||||
Button({
|
||||
class: 'btn btn-primary btn-lg',
|
||||
onclick: () => Toast('Button clicked!', 'alert-info', 2000)
|
||||
}, 'Interactive Button')
|
||||
]),
|
||||
Div({ class: 'flex gap-2 flex-wrap justify-center mt-4' }, [
|
||||
Button({
|
||||
class: 'btn btn-xs',
|
||||
onclick: () => updateTooltip('You clicked the button!')
|
||||
}, 'Change Tooltip'),
|
||||
Button({
|
||||
class: 'btn btn-xs',
|
||||
onclick: () => updateTooltip('Try hovering now!')
|
||||
}, 'Change Again')
|
||||
])
|
||||
]);
|
||||
};
|
||||
$mount(InteractiveDemo, interactiveTarget);
|
||||
}
|
||||
|
||||
// 6. Rich Tooltip Content
|
||||
const richTarget = document.querySelector('#demo-rich');
|
||||
if (richTarget && !richTarget.hasChildNodes()) {
|
||||
const RichDemo = () => {
|
||||
return Div({ class: 'flex flex-wrap gap-4 justify-center' }, [
|
||||
Tooltip({
|
||||
tip: Div({ class: 'text-left p-1' }, [
|
||||
Div({ class: 'font-bold' }, 'User Info'),
|
||||
Div({ class: 'text-xs' }, 'John Doe'),
|
||||
Div({ class: 'text-xs' }, 'john@example.com'),
|
||||
Div({ class: 'badge badge-xs badge-primary mt-1' }, 'Admin')
|
||||
])
|
||||
}, [
|
||||
Button({ class: 'btn btn-outline' }, 'User Profile')
|
||||
]),
|
||||
Tooltip({
|
||||
tip: Div({ class: 'text-left p-1' }, [
|
||||
Div({ class: 'font-bold flex items-center gap-1' }, [
|
||||
Icons.iconWarning,
|
||||
Span({}, 'System Status')
|
||||
]),
|
||||
Div({ class: 'text-xs' }, 'All systems operational'),
|
||||
Div({ class: 'text-xs text-success' }, '✓ 99.9% uptime')
|
||||
])
|
||||
}, [
|
||||
Button({ class: 'btn btn-outline' }, 'System Status')
|
||||
])
|
||||
]);
|
||||
};
|
||||
$mount(RichDemo, richTarget);
|
||||
}
|
||||
|
||||
// 7. Color Variants
|
||||
const colorsTarget = document.querySelector('#demo-colors');
|
||||
if (colorsTarget && !colorsTarget.hasChildNodes()) {
|
||||
const ColorsDemo = () => {
|
||||
return Div({ class: 'flex flex-wrap gap-4 justify-center' }, [
|
||||
Tooltip({ tip: 'Primary tooltip', class: 'tooltip-primary' }, [
|
||||
Button({ class: 'btn btn-primary btn-sm' }, 'Primary')
|
||||
]),
|
||||
Tooltip({ tip: 'Secondary tooltip', class: 'tooltip-secondary' }, [
|
||||
Button({ class: 'btn btn-secondary btn-sm' }, 'Secondary')
|
||||
]),
|
||||
Tooltip({ tip: 'Accent tooltip', class: 'tooltip-accent' }, [
|
||||
Button({ class: 'btn btn-accent btn-sm' }, 'Accent')
|
||||
]),
|
||||
Tooltip({ tip: 'Info tooltip', class: 'tooltip-info' }, [
|
||||
Button({ class: 'btn btn-info btn-sm' }, 'Info')
|
||||
]),
|
||||
Tooltip({ tip: 'Success tooltip', class: 'tooltip-success' }, [
|
||||
Button({ class: 'btn btn-success btn-sm' }, 'Success')
|
||||
]),
|
||||
Tooltip({ tip: 'Warning tooltip', class: 'tooltip-warning' }, [
|
||||
Button({ class: 'btn btn-warning btn-sm' }, 'Warning')
|
||||
]),
|
||||
Tooltip({ tip: 'Error tooltip', class: 'tooltip-error' }, [
|
||||
Button({ class: 'btn btn-error btn-sm' }, 'Error')
|
||||
])
|
||||
]);
|
||||
};
|
||||
$mount(ColorsDemo, colorsTarget);
|
||||
}
|
||||
|
||||
// 8. All Tooltip Positions
|
||||
const allPositionsTarget = document.querySelector('#demo-all-positions');
|
||||
if (allPositionsTarget && !allPositionsTarget.hasChildNodes()) {
|
||||
const AllPositionsDemo = () => {
|
||||
return Div({ class: 'grid grid-cols-3 gap-4 justify-items-center' }, [
|
||||
Div({ class: 'col-start-2' }, [
|
||||
Tooltip({ tip: 'Top tooltip', class: 'tooltip-top' }, [
|
||||
Button({ class: 'btn btn-sm w-24' }, 'Top')
|
||||
])
|
||||
]),
|
||||
Div({ class: 'col-start-1 row-start-2' }, [
|
||||
Tooltip({ tip: 'Left tooltip', class: 'tooltip-left' }, [
|
||||
Button({ class: 'btn btn-sm w-24' }, 'Left')
|
||||
])
|
||||
]),
|
||||
Div({ class: 'col-start-2 row-start-2' }, [
|
||||
Tooltip({ tip: 'Center tooltip', class: 'tooltip' }, [
|
||||
Button({ class: 'btn btn-sm w-24' }, 'Center')
|
||||
])
|
||||
]),
|
||||
Div({ class: 'col-start-3 row-start-2' }, [
|
||||
Tooltip({ tip: 'Right tooltip', class: 'tooltip-right' }, [
|
||||
Button({ class: 'btn btn-sm w-24' }, 'Right')
|
||||
])
|
||||
]),
|
||||
Div({ class: 'col-start-2 row-start-3' }, [
|
||||
Tooltip({ tip: 'Bottom tooltip', class: 'tooltip-bottom' }, [
|
||||
Button({ class: 'btn btn-sm w-24' }, 'Bottom')
|
||||
])
|
||||
])
|
||||
]);
|
||||
};
|
||||
$mount(AllPositionsDemo, allPositionsTarget);
|
||||
}
|
||||
};
|
||||
|
||||
initTooltipExamples();
|
||||
|
||||
if (window.$docsify) {
|
||||
window.$docsify.plugins = [].concat(window.$docsify.plugins || [], (hook) => {
|
||||
hook.doneEach(initTooltipExamples);
|
||||
});
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
@@ -40,8 +40,10 @@
|
||||
</script>
|
||||
|
||||
<!-- <script src="https://unpkg.com/sigpro"></script> -->
|
||||
<script src="https://cdn.jsdelivr.net/gh/natxocc/sigpro@main/dist/sigpro.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/gh/natxocc/sigpro-ui@main/dist/sigpro-ui.umd.js"></script>
|
||||
<!-- <script src="https://cdn.jsdelivr.net/gh/natxocc/sigpro@main/dist/sigpro.js"></script> -->
|
||||
<script src="./sigpro.min.js"></script>
|
||||
<script src="./sigpro-ui.umd.min.js"></script>
|
||||
<!-- <script src="https://cdn.jsdelivr.net/gh/natxocc/sigpro-ui@main/dist/sigpro-ui.umd.js"></script> -->
|
||||
<!-- <script src="https://unpkg.com/sigpro-ui"></script> -->
|
||||
<script src="//cdn.jsdelivr.net/npm/docsify/lib/docsify.min.js"></script>
|
||||
<script src="//cdn.jsdelivr.net/npm/docsify-copy-code/dist/docsify-copy-code.min.js"></script>
|
||||
|
||||
1
docs/sigpro-ui.umd.min.js
vendored
Normal file
1
docs/sigpro-ui.umd.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
1
docs/sigpro.min.js
vendored
Normal file
1
docs/sigpro.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
@@ -45,5 +45,18 @@ export default [
|
||||
},
|
||||
plugins: [terser()]
|
||||
}
|
||||
},
|
||||
{
|
||||
input: './index.js',
|
||||
external: ['sigpro'],
|
||||
output: {
|
||||
file: './docs/sigpro-ui.umd.min.js',
|
||||
format: 'iife',
|
||||
name: 'SigProUI',
|
||||
globals: {
|
||||
sigpro: 'SigPro'
|
||||
},
|
||||
plugins: [terser()]
|
||||
}
|
||||
}
|
||||
];
|
||||
@@ -1,37 +1,53 @@
|
||||
import { $html } from "sigpro";
|
||||
import { $html, $for } from "sigpro";
|
||||
import { val } from "../core/utils.js";
|
||||
|
||||
/** DROPDOWN */
|
||||
export const Dropdown = (props, children) => {
|
||||
const { label, icon, ...rest } = props;
|
||||
const { label, icon, items, ...rest } = props;
|
||||
|
||||
return $html(
|
||||
"div",
|
||||
{
|
||||
...rest,
|
||||
class: () => `dropdown ${val(props.class) || props.class || ""}`,
|
||||
},
|
||||
[
|
||||
$html(
|
||||
"div",
|
||||
{
|
||||
tabindex: 0,
|
||||
role: "button",
|
||||
class: "btn m-1 flex items-center gap-2",
|
||||
},
|
||||
[
|
||||
icon ? (typeof icon === "function" ? icon() : icon) : null,
|
||||
label ? (typeof label === "function" ? label() : label) : null
|
||||
],
|
||||
),
|
||||
$html(
|
||||
"ul",
|
||||
{
|
||||
tabindex: 0,
|
||||
class: "dropdown-content z-[50] menu p-2 shadow bg-base-100 rounded-box min-w-max border border-base-300",
|
||||
},
|
||||
[typeof children === "function" ? children() : children],
|
||||
),
|
||||
],
|
||||
);
|
||||
const renderContent = () => {
|
||||
if (items) {
|
||||
const source = typeof items === "function" ? items : () => items;
|
||||
return $html("ul", {
|
||||
tabindex: 0,
|
||||
class: "dropdown-content z-[50] menu p-2 shadow bg-base-100 rounded-box w-52 border border-base-300"
|
||||
}, [
|
||||
$for(source, (item) =>
|
||||
$html("li", {}, [
|
||||
$html("a", {
|
||||
class: item.class || "",
|
||||
onclick: (e) => {
|
||||
if (item.onclick) item.onclick(e);
|
||||
if (document.activeElement) document.activeElement.blur();
|
||||
}
|
||||
}, [
|
||||
item.icon ? $html("span", {}, item.icon) : null,
|
||||
$html("span", {}, item.label)
|
||||
])
|
||||
])
|
||||
)
|
||||
]);
|
||||
}
|
||||
|
||||
return $html("div", {
|
||||
tabindex: 0,
|
||||
class: "dropdown-content z-[50] p-2 shadow bg-base-100 rounded-box min-w-max border border-base-300"
|
||||
}, [
|
||||
typeof children === "function" ? children() : children
|
||||
]);
|
||||
};
|
||||
|
||||
return $html("div", {
|
||||
...rest,
|
||||
class: () => `dropdown ${val(props.class) || ""}`,
|
||||
}, [
|
||||
$html("div", {
|
||||
tabindex: 0,
|
||||
role: "button",
|
||||
class: "btn m-1 flex items-center gap-2",
|
||||
}, [
|
||||
icon ? (typeof icon === "function" ? icon() : icon) : null,
|
||||
label ? (typeof label === "function" ? label() : label) : null
|
||||
]),
|
||||
renderContent()
|
||||
]);
|
||||
};
|
||||
@@ -3,18 +3,15 @@ import { val } from "../core/utils.js";
|
||||
|
||||
/** FAB (Floating Action Button) */
|
||||
export const Fab = (props) => {
|
||||
const { icon, label, actions = [], position = "bottom-6 right-6", ...rest } = props;
|
||||
const { icon, label, actions = [], position = "bottom-6 right-6", class: className = "", ...rest } = props;
|
||||
|
||||
return $html(
|
||||
"div",
|
||||
{
|
||||
...rest,
|
||||
class: () => `fab fixed ${val(position)} flex flex-col-reverse items-end gap-3 z-[100] ${
|
||||
props.class || ""
|
||||
}`,
|
||||
class: `fab absolute ${position} flex flex-col-reverse items-end gap-3 z-[100] ${className}`,
|
||||
},
|
||||
[
|
||||
// Botón principal
|
||||
$html(
|
||||
"div",
|
||||
{
|
||||
@@ -28,7 +25,6 @@ export const Fab = (props) => {
|
||||
],
|
||||
),
|
||||
|
||||
// Acciones secundarias (se despliegan hacia arriba)
|
||||
...val(actions).map((act) =>
|
||||
$html("div", { class: "flex items-center gap-3 transition-all duration-300" }, [
|
||||
act.label ? $html("span", { class: "badge badge-ghost shadow-sm whitespace-nowrap" }, act.label) : null,
|
||||
|
||||
Reference in New Issue
Block a user