natxocc/sigpro-ui
1
1
Fork 0
Code Issues Actions Packages Projects Releases Wiki Activity

adapt new Input
All checks were successful
Deploy Docs to Synology / deploy (push) Successful in 3s
Details

Browse Source
This commit is contained in:
Natxo
2026-04-23 13:22:49 +02:00
parent 59e6d972a8
commit e842ed8041
61 changed files with 2553 additions and 2758 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
docs/components/dropdown.md
View File

@@ -139,9 +139,9 @@ mount(ActionsDemo, '#demo-actions');
```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')
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'
]),
@@ -209,15 +209,15 @@ const NotificationsDropdown = () => {
};
return Dropdown({
label: Span({ class: 'relative' }, [
label: span({ class: 'relative' }, [
'🔔',
() => unreadCount() > 0 ? Span({ class: 'badge badge-xs badge-error absolute -top-1 -right-2' }, unreadCount()) : null
() => unreadCount() > 0 ? span({ class: 'badge badge-xs badge-error absolute -top-1 -right-2' }, unreadCount()) : null
]),
class: 'dropdown-end',
items: () => notifications().map(notif => ({
label: Div({ class: 'flex flex-col' }, [
Span({ class: 'font-medium' }, notif.title),
Span({ class: 'text-xs opacity-60' }, notif.time)
label: div({ class: 'flex flex-col' }, [
span({ class: 'font-medium' }, notif.title),
span({ class: 'text-xs opacity-60' }, notif.time)
]),
class: notif.read ? '' : 'bg-primary/5',
onclick: () => markAsRead(notif.id)
@@ -245,7 +245,7 @@ const VariantsDemo = () => {
{ label: 'Item 3', onclick: () => Toast('Item 3', 'alert-info', 2000) }
];
return Div({ class: 'flex flex-wrap gap-4 justify-center' }, [
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 })