Updateing Docs
This commit is contained in:
@@ -8,15 +8,38 @@ Toggle checkbox component with label, tooltip support, and reactive state manage
|
||||
|
||||
## Props
|
||||
|
||||
| Prop | Type | Default | Description |
|
||||
| :----------- | :--------------------------- | :---------- | :----------------------------------------------- |
|
||||
| `label` | `string` | `-` | Label text for the checkbox |
|
||||
| `value` | `boolean \| Signal<boolean>` | `false` | Checked state |
|
||||
| `tooltip` | `string` | `-` | Tooltip text on hover |
|
||||
| `toggle` | `boolean` | `false` | Display as toggle switch instead of checkbox |
|
||||
| `disabled` | `boolean \| Signal<boolean>` | `false` | Disabled state |
|
||||
| `class` | `string` | `''` | Additional CSS classes (DaisyUI + Tailwind) |
|
||||
| `onclick` | `function` | `-` | Click event handler |
|
||||
| Prop | Type | Default | Description |
|
||||
| :--- | :--- | :--- | :--- |
|
||||
| `label` | `string` | `-` | Label text for the checkbox |
|
||||
| `value` | `boolean \| Signal<boolean>` | `false` | Checked state |
|
||||
| `tooltip` | `string` | `-` | Tooltip text on hover |
|
||||
| `toggle` | `boolean` | `false` | Display as toggle switch instead of checkbox |
|
||||
| `disabled` | `boolean \| Signal<boolean>` | `false` | Disabled state |
|
||||
| `class` | `string` | `''` | Additional CSS classes (DaisyUI + Tailwind) |
|
||||
| `onclick` | `function` | `-` | Click event handler |
|
||||
|
||||
## Styling
|
||||
|
||||
Checkbox supports all **daisyUI Checkbox and Toggle classes**:
|
||||
|
||||
| Category | Keywords | Description |
|
||||
| :--- | :--- | :--- |
|
||||
| Color (Checkbox) | `checkbox-primary`, `checkbox-secondary`, `checkbox-accent`, `checkbox-info`, `checkbox-success`, `checkbox-warning`, `checkbox-error` | Checkbox color variants |
|
||||
| Size (Checkbox) | `checkbox-xs`, `checkbox-sm`, `checkbox-md`, `checkbox-lg` | Checkbox scale |
|
||||
| Color (Toggle) | `toggle-primary`, `toggle-secondary`, `toggle-accent`, `toggle-info`, `toggle-success`, `toggle-warning`, `toggle-error` | Toggle color variants |
|
||||
| Size (Toggle) | `toggle-xs`, `toggle-sm`, `toggle-md`, `toggle-lg` | Toggle scale |
|
||||
|
||||
> For further details, check the [daisyUI Checkbox Documentation](https://daisyui.com/components/checkbox) and [daisyUI Toggle Documentation](https://daisyui.com/components/toggle) – Full reference for CSS classes.
|
||||
|
||||
### Example
|
||||
|
||||
```javascript
|
||||
// Checkbox
|
||||
Checkbox({ class: "checkbox-primary checkbox-lg", label: "Accept terms" });
|
||||
|
||||
// Toggle switch
|
||||
Checkbox({ toggle: true, class: "toggle-success", label: "Enable feature" });
|
||||
```
|
||||
|
||||
## Live Examples
|
||||
|
||||
@@ -264,216 +287,4 @@ const FormDemo = () => {
|
||||
]);
|
||||
};
|
||||
$mount(FormDemo, '#demo-form');
|
||||
```
|
||||
|
||||
<script>
|
||||
(function() {
|
||||
const initCheckboxExamples = () => {
|
||||
|
||||
// 1. Basic Checkbox
|
||||
const basicTarget = document.querySelector('#demo-basic');
|
||||
if (basicTarget && !basicTarget.hasChildNodes()) {
|
||||
const BasicDemo = () => {
|
||||
const accepted = $(false);
|
||||
|
||||
return Checkbox({
|
||||
label: 'I accept the terms and conditions',
|
||||
value: accepted,
|
||||
onclick: () => accepted(!accepted())
|
||||
});
|
||||
};
|
||||
$mount(BasicDemo, basicTarget);
|
||||
}
|
||||
|
||||
// 2. Toggle Switch
|
||||
const toggleTarget = document.querySelector('#demo-toggle');
|
||||
if (toggleTarget && !toggleTarget.hasChildNodes()) {
|
||||
const ToggleDemo = () => {
|
||||
const enabled = $(false);
|
||||
|
||||
return Div({ class: 'flex flex-col gap-4 w-full' }, [
|
||||
Checkbox({
|
||||
label: 'Enable notifications',
|
||||
value: enabled,
|
||||
toggle: true,
|
||||
onclick: () => enabled(!enabled())
|
||||
}),
|
||||
() => enabled()
|
||||
? Div({ class: 'alert alert-success' }, 'Notifications are ON')
|
||||
: Div({ class: 'alert alert-soft' }, 'Notifications are OFF')
|
||||
]);
|
||||
};
|
||||
$mount(ToggleDemo, toggleTarget);
|
||||
}
|
||||
|
||||
// 3. With Tooltip
|
||||
const tooltipTarget = document.querySelector('#demo-tooltip');
|
||||
if (tooltipTarget && !tooltipTarget.hasChildNodes()) {
|
||||
const TooltipDemo = () => {
|
||||
const darkMode = $(false);
|
||||
|
||||
return Checkbox({
|
||||
label: 'Dark mode',
|
||||
value: darkMode,
|
||||
tooltip: 'Enable dark theme preference',
|
||||
onclick: () => darkMode(!darkMode())
|
||||
});
|
||||
};
|
||||
$mount(TooltipDemo, tooltipTarget);
|
||||
}
|
||||
|
||||
// 4. Disabled State
|
||||
const disabledTarget = document.querySelector('#demo-disabled');
|
||||
if (disabledTarget && !disabledTarget.hasChildNodes()) {
|
||||
const DisabledDemo = () => {
|
||||
return Div({ class: 'flex flex-col gap-3' }, [
|
||||
Checkbox({
|
||||
label: 'Checked and disabled',
|
||||
value: true,
|
||||
disabled: true
|
||||
}),
|
||||
Checkbox({
|
||||
label: 'Unchecked and disabled',
|
||||
value: false,
|
||||
disabled: true
|
||||
})
|
||||
]);
|
||||
};
|
||||
$mount(DisabledDemo, disabledTarget);
|
||||
}
|
||||
|
||||
// 5. Reactive Multiple Selection
|
||||
const multipleTarget = document.querySelector('#demo-multiple');
|
||||
if (multipleTarget && !multipleTarget.hasChildNodes()) {
|
||||
const MultipleDemo = () => {
|
||||
const options = [
|
||||
{ id: 1, label: 'Option 1', selected: $(false) },
|
||||
{ id: 2, label: 'Option 2', selected: $(false) },
|
||||
{ id: 3, label: 'Option 3', selected: $(false) }
|
||||
];
|
||||
|
||||
const selectAll = $(false);
|
||||
|
||||
const toggleAll = (value) => {
|
||||
selectAll(value);
|
||||
options.forEach(opt => opt.selected(value));
|
||||
};
|
||||
|
||||
const updateSelectAll = () => {
|
||||
const allSelected = options.every(opt => opt.selected());
|
||||
selectAll(allSelected);
|
||||
};
|
||||
|
||||
return Div({ class: 'flex flex-col gap-3' }, [
|
||||
Checkbox({
|
||||
label: 'Select all',
|
||||
value: selectAll,
|
||||
onclick: () => toggleAll(!selectAll())
|
||||
}),
|
||||
Div({ class: 'divider my-1' }),
|
||||
...options.map(opt => Checkbox({
|
||||
label: opt.label,
|
||||
value: opt.selected,
|
||||
onclick: () => {
|
||||
opt.selected(!opt.selected());
|
||||
updateSelectAll();
|
||||
}
|
||||
})),
|
||||
Div({ class: 'mt-2 text-sm opacity-70' }, () => {
|
||||
const count = options.filter(opt => opt.selected()).length;
|
||||
return `${count} of ${options.length} selected`;
|
||||
})
|
||||
]);
|
||||
};
|
||||
$mount(MultipleDemo, multipleTarget);
|
||||
}
|
||||
|
||||
// 6. All Variants
|
||||
const variantsTarget = document.querySelector('#demo-variants');
|
||||
if (variantsTarget && !variantsTarget.hasChildNodes()) {
|
||||
const VariantsDemo = () => {
|
||||
const variant1 = $(true);
|
||||
const variant2 = $(false);
|
||||
const variant3 = $(true);
|
||||
|
||||
return Div({ class: 'flex flex-col gap-3' }, [
|
||||
Div({ class: 'flex items-center gap-4' }, [
|
||||
Checkbox({
|
||||
label: 'Primary',
|
||||
value: variant1,
|
||||
class: 'checkbox-primary',
|
||||
onclick: () => variant1(!variant1())
|
||||
}),
|
||||
Checkbox({
|
||||
label: 'Secondary',
|
||||
value: variant2,
|
||||
class: 'checkbox-secondary',
|
||||
onclick: () => variant2(!variant2())
|
||||
})
|
||||
]),
|
||||
Div({ class: 'flex items-center gap-4' }, [
|
||||
Checkbox({
|
||||
label: 'Accent',
|
||||
value: variant3,
|
||||
class: 'checkbox-accent',
|
||||
onclick: () => variant3(!variant3())
|
||||
}),
|
||||
Checkbox({
|
||||
label: 'Toggle switch',
|
||||
value: $(false),
|
||||
toggle: true,
|
||||
class: 'toggle-primary'
|
||||
})
|
||||
])
|
||||
]);
|
||||
};
|
||||
$mount(VariantsDemo, variantsTarget);
|
||||
}
|
||||
|
||||
// 7. Form Example
|
||||
const formTarget = document.querySelector('#demo-form');
|
||||
if (formTarget && !formTarget.hasChildNodes()) {
|
||||
const FormDemo = () => {
|
||||
const subscribe = $(false);
|
||||
const weekly = $(false);
|
||||
const monthly = $(true);
|
||||
|
||||
return Div({ class: 'flex flex-col gap-4' }, [
|
||||
Div({ class: 'text-sm font-bold' }, 'Newsletter preferences'),
|
||||
Checkbox({
|
||||
label: 'Subscribe to newsletter',
|
||||
value: subscribe,
|
||||
onclick: () => subscribe(!subscribe())
|
||||
}),
|
||||
() => subscribe() ? Div({ class: 'ml-6 flex flex-col gap-2' }, [
|
||||
Checkbox({
|
||||
label: 'Weekly updates',
|
||||
value: weekly,
|
||||
onclick: () => weekly(!weekly())
|
||||
}),
|
||||
Checkbox({
|
||||
label: 'Monthly digest',
|
||||
value: monthly,
|
||||
onclick: () => monthly(!monthly())
|
||||
})
|
||||
]) : null,
|
||||
() => subscribe() && (weekly() || monthly())
|
||||
? Div({ class: 'alert alert-success text-sm mt-2' }, 'You will receive updates!')
|
||||
: subscribe()
|
||||
? Div({ class: 'alert alert-warning text-sm mt-2' }, 'Select at least one frequency')
|
||||
: null
|
||||
]);
|
||||
};
|
||||
$mount(FormDemo, formTarget);
|
||||
}
|
||||
};
|
||||
|
||||
initCheckboxExamples();
|
||||
|
||||
if (window.$docsify) {
|
||||
window.$docsify.plugins = [].concat(window.$docsify.plugins || [], (hook) => {
|
||||
hook.doneEach(initCheckboxExamples);
|
||||
});
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
```
|
||||
Reference in New Issue
Block a user