Before repair nav components
All checks were successful
Deploy Docs to Synology / deploy (push) Successful in 4s
All checks were successful
Deploy Docs to Synology / deploy (push) Successful in 4s
This commit is contained in:
201
docs/demo_layout.md
Normal file
201
docs/demo_layout.md
Normal file
@@ -0,0 +1,201 @@
|
||||
# Layout
|
||||
|
||||
## Accordion
|
||||
<div id="demo-accordion"></div>
|
||||
|
||||
```js
|
||||
const accItems = $([
|
||||
{ title: 'What is SigPro?', content: 'A lightweight UI library built on DaisyUI and a fine‑grained reactivity system.' },
|
||||
{ title: 'Why use it?', content: 'No build step, minimal boilerplate, and all components are just JavaScript functions.' },
|
||||
{ title: 'Browser support?', content: 'All modern browsers that support ES2020+' }
|
||||
]);
|
||||
|
||||
mount(
|
||||
div({ class: 'flex flex-col gap-8' }, [
|
||||
// Example 1: radio type with arrow variant
|
||||
Accordion({
|
||||
variant: 'arrow',
|
||||
items: [
|
||||
{ title: 'Radio with arrow', content: 'This uses collapse‑arrow' },
|
||||
{ title: 'Open by default', content: 'This one is open', open: true },
|
||||
'Simple string item (no content)'
|
||||
]
|
||||
}),
|
||||
// Example 2: details type with plus variant
|
||||
Accordion({
|
||||
type: 'details',
|
||||
variant: 'plus',
|
||||
items: [
|
||||
{ title: 'Details with plus', content: 'Uses the native <details> element' },
|
||||
{ title: 'Another detail', content: 'Accordion style but with plus icon' }
|
||||
]
|
||||
}),
|
||||
// Example 3: reactive items (signal)
|
||||
Accordion({ items: accItems })
|
||||
]),
|
||||
'#demo-accordion'
|
||||
);
|
||||
```
|
||||
|
||||
## Drawer
|
||||
<div id="demo-drawer"></div>
|
||||
|
||||
```js
|
||||
const drawerOpen = $(false);
|
||||
|
||||
mount(
|
||||
div({}, [
|
||||
Button({ class: 'btn', onclick: () => drawerOpen(true) }, 'Open Drawer'),
|
||||
Drawer({ open: drawerOpen, side: Menu({ items: [
|
||||
{ label: 'Dashboard', onclick: () => drawerOpen(false) },
|
||||
{ label: 'Settings' },
|
||||
{ label: 'Help' }
|
||||
]}) }, [
|
||||
div({ class: 'p-4' }, [
|
||||
h3({ class: 'text-lg font-bold' }, 'Main Content'),
|
||||
p({}, 'This is the main page. Click the button above to open the drawer.')
|
||||
])
|
||||
])
|
||||
]),
|
||||
'#demo-drawer'
|
||||
);
|
||||
```
|
||||
|
||||
## Dropdown
|
||||
<div id="demo-dropdown"></div>
|
||||
|
||||
```js
|
||||
mount(
|
||||
div({ class: 'flex gap-4' }, [
|
||||
// Example 1: automatic items
|
||||
Dropdown({
|
||||
trigger: 'Options',
|
||||
items: [
|
||||
{ label: 'Edit', onclick: () => console.log('Edit') },
|
||||
{ label: 'Delete', onclick: () => console.log('Delete') },
|
||||
{ label: 'Archive' }
|
||||
]
|
||||
}),
|
||||
// Example 2: custom children (manual)
|
||||
Dropdown({ trigger: 'More' }, [
|
||||
h('ul', { class: 'menu dropdown-content bg-base-100 rounded-box w-40 p-2 shadow' }, [
|
||||
li({}, a({}, 'Profile')),
|
||||
li({}, a({}, 'Logout'))
|
||||
])
|
||||
])
|
||||
]),
|
||||
'#demo-dropdown'
|
||||
);
|
||||
```
|
||||
|
||||
## Fab
|
||||
<div id="demo-fab"></div>
|
||||
|
||||
```js
|
||||
mount(
|
||||
div({ class: 'flex gap-4' }, [
|
||||
Fab({ class: 'fab-bottom-left' }, span({ class: 'icon-[lucide--plus]' })),
|
||||
Fab({ class: 'fab-top-right', style: 'position:relative' }, span({ class: 'icon-[lucide--settings]' }))
|
||||
]),
|
||||
'#demo-fab'
|
||||
);
|
||||
```
|
||||
|
||||
## Fieldset
|
||||
<div id="demo-fieldset"></div>
|
||||
|
||||
```js
|
||||
mount(
|
||||
div({ class: 'flex gap-4' }, [
|
||||
Fieldset({ legend: 'Personal Info' }, [
|
||||
Input({ label: 'Name', float: true, value: $('') }),
|
||||
Select({ label: 'Country', float: true, items: ['Spain', 'France', 'Italy'], value: $('') })
|
||||
]),
|
||||
Fieldset({ class: 'bg-base-200 p-4 rounded-box' }, [
|
||||
div({}, 'Any content without legend')
|
||||
])
|
||||
]),
|
||||
'#demo-fieldset'
|
||||
);
|
||||
```
|
||||
|
||||
## Menu
|
||||
<div id="demo-menu"></div>
|
||||
|
||||
```js
|
||||
const menuItems = $([
|
||||
{ label: 'Home' },
|
||||
{ label: 'Products', children: [
|
||||
{ label: 'Laptops' },
|
||||
{ label: 'Phones' }
|
||||
]},
|
||||
{ label: 'About', onclick: () => console.log('About clicked') }
|
||||
]);
|
||||
|
||||
mount(
|
||||
div({ class: 'flex gap-4' }, [
|
||||
// Example 1: automatic from items (signal)
|
||||
Menu({ items: menuItems, class: 'menu-vertical' }),
|
||||
// Example 2: manual children
|
||||
Menu({ class: 'menu-horizontal bg-base-200 rounded-box' }, [
|
||||
li({}, a({}, 'One')),
|
||||
li({}, a({}, 'Two'))
|
||||
])
|
||||
]),
|
||||
'#demo-menu'
|
||||
);
|
||||
```
|
||||
|
||||
## Navbar
|
||||
<div id="demo-navbar"></div>
|
||||
|
||||
```js
|
||||
mount(
|
||||
Navbar({ class: 'bg-base-200 rounded-box' }, [
|
||||
div({ class: 'flex-1' },
|
||||
a({ class: 'btn btn-ghost text-xl' }, 'SigPro')
|
||||
),
|
||||
div({ class: 'flex-none gap-2' }, [
|
||||
Button({ class: 'btn btn-ghost' }, 'Login'),
|
||||
Button({ class: 'btn btn-primary' }, 'Sign up')
|
||||
])
|
||||
]),
|
||||
'#demo-navbar'
|
||||
);
|
||||
```
|
||||
|
||||
## Tabs
|
||||
<div id="demo-tabs"></div>
|
||||
|
||||
```js
|
||||
const activeTab = $(0);
|
||||
const tabsData = $([
|
||||
{ label: 'Tab A', content: 'Content of tab A' },
|
||||
{ label: 'Tab B', content: 'Content of tab B', closable: true },
|
||||
{ label: 'Tab C', content: 'Content of tab C' }
|
||||
]);
|
||||
|
||||
mount(
|
||||
div({ class: 'flex flex-col gap-4' }, [
|
||||
// Example 1: reactive tabs with closable
|
||||
Tabs({
|
||||
items: tabsData,
|
||||
activeIndex: activeTab,
|
||||
class: "tabs-box",
|
||||
onClose: (idx) => {
|
||||
const newTabs = tabsData().filter((_, i) => i !== idx);
|
||||
tabsData(newTabs);
|
||||
if (activeTab() >= newTabs.length) activeTab(Math.max(0, newTabs.length - 1));
|
||||
}
|
||||
}),
|
||||
// Example 2: manual tabs with custom content
|
||||
Tabs({}, [
|
||||
a({ class: () => `tab ${activeTab() === 0 ? 'tab-active' : ''}`, onclick: () => activeTab(0) }, 'Manual A'),
|
||||
a({ class: () => `tab ${activeTab() === 1 ? 'tab-active' : ''}`, onclick: () => activeTab(1) }, 'Manual B'),
|
||||
div({ class: 'tab-content', style: () => `display:${activeTab() === 0 ? 'block' : 'none'}` }, 'Content for manual A'),
|
||||
div({ class: 'tab-content', style: () => `display:${activeTab() === 1 ? 'block' : 'none'}` }, 'Content for manual B')
|
||||
])
|
||||
]),
|
||||
'#demo-tabs'
|
||||
);
|
||||
```
|
||||
Reference in New Issue
Block a user