natxocc/sigpro-ui
1
1
Fork 0
Code Issues Actions Packages Projects Releases Wiki Activity
Files
b992f4a0a405f99dc7dfc2b8feecd1a81e3904a0
sigpro-ui/docs/quick.md
natxocc 910c6ab3c7
All checks were successful
Deploy Docs to Synology / deploy (push) Successful in 4s
Details
Before repair nav components
2026-04-25 11:24:39 +02:00

610 lines
16 KiB
Markdown
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
# SigPro Components – Quick Reference
All simple components use the pattern `ComponentName(props, children?)` and accept any additional HTML attributes.
## Accordion
`Accordion(props)`
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `items` | array \| signal | `[]` | Array of items. Each item: `{ title, content?, open? }` or a string. |
| `type` | `'radio'` \| `'details'` | `'radio'` | Collapse mode |
| `variant` | string | `''` | `'arrow'` or `'plus'` for an icon variant |
| `name` | string | auto‑generated | Group name for radio inputs |
| `class` | string | - | Extra classes merged with `collapse` |
---
## Alert
`Alert(props, children)`
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `class` | string | - | Extra classes merged with `alert` |
---
## Autocomplete
`Autocomplete(props)`
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `items` | array \| signal | `[]` | Autocomplete items |
| `value` | signal | - | Selected value |
| `onselect` | function | - | Called when an item is selected |
| `placeholder` | string | `'Buscar...'` | Input placeholder |
| `class` | string | - | Extra classes |
| `...props` | | | All other props are passed to the internal `Input` |
---
## Badge
`Badge(props, children)`
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `class` | string | - | Extra classes merged with `badge` |
---
## Button
`Button(props, children)`
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `class` | string | - | Extra classes merged with `button` |
| `disabled` | boolean | - | Standard HTML attribute |
| *any* | | | All other standard `<button>` attributes |
---
## Calendar
`Calendar(props)`
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `value` | signal \| string \| object | - | Selected date(s) |
| `range` | signal \| boolean | `false` | Enable range mode |
| `hour` | boolean | `false` | Show hour sliders |
| `onChange` | function | - | Called when selection changes |
| `class` | string | - | Extra classes |
---
## Card
`Card(props, children)`
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `class` | string | - | Extra classes merged with `card` |
---
## CardActions
`CardActions(props, children)`
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `class` | string | - | Extra classes merged with `card-actions` |
---
## CardBody
`CardBody(props, children)`
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `class` | string | - | Extra classes merged with `card-body` |
---
## CardTitle
`CardTitle(props, children)`
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `class` | string | - | Extra classes merged with `card-title` |
---
## Carousel
`Carousel(props, children)`
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `class` | string | - | Extra classes merged with `carousel` |
---
## CarouselItem
`CarouselItem(props, children)`
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `class` | string | - | Extra classes merged with `carousel-item` |
---
## Chat
`Chat(props, children)`
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `class` | string | - | Extra classes merged with `chat` |
---
## ChatBubble
`ChatBubble(props, children)`
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `class` | string | - | Extra classes merged with `chat-bubble` |
---
## ChatFooter
`ChatFooter(props, children)`
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `class` | string | - | Extra classes merged with `chat-footer` |
---
## ChatHeader
`ChatHeader(props, children)`
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `class` | string | - | Extra classes merged with `chat-header` |
---
## ChatImage
`ChatImage(props, children)`
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `class` | string | - | Extra classes merged with `chat-image avatar` |
| *(children)* | string \| node | - | If a string, used as `src` of an `<img>` inside a rounded `div`; otherwise passed as content. |
---
## Checkbox
`Checkbox(props)`
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `class` | string | - | Extra classes merged with `checkbox` |
| `checked` | boolean \| signal | - | Checked state (can be a signal) |
| `onchange` | function | - | Change handler |
| *any* | | | All standard `<input>` attributes |
---
## Colorpicker
`Colorpicker(props)`
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `value` | signal \| string | `'#000000'` | Selected color |
| `label` | string | - | Optional label inside the trigger |
| `onchange` | function | - | Called when a color is picked (if `value` is not a signal) |
| `class` | string | - | Extra classes |
---
## Datepicker
`Datepicker(props)`
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `value` | signal | - | Selected date(s) |
| `range` | signal \| boolean | `false` | Range mode |
| `hour` | boolean | `false` | Enable hour selection |
| `onChange` | function | - | Change handler (if `value` is not a signal) |
| `placeholder` | string | auto | Placeholder text |
| `class` | string | - | Extra classes |
---
## Divider
`Divider(props)`
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `class` | string | - | Extra classes merged with `divider` |
---
## Drawer
`Drawer(props, children)`
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `open` | signal \| boolean | - | Drawer open state |
| `side` | node \| signal | - | Sidebar content (can be a signal) |
| `id` | string | auto‑generated | Drawer ID |
| `class` | string | - | Extra classes |
**children** – Main content (`.drawer-content`).
---
## Dropdown
`Dropdown(props, children?)`
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `trigger` | node | `'Dropdown'` | Summary content |
| `items` | array \| signal | - | Dropdown items: `{ label, onclick? }` |
| `class` | string | - | Extra classes merged with `dropdown` |
If `children` is provided, it replaces the auto‑generated menu.
---
## Fab
`Fab(props, children)`
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `class` | string | - | Extra classes merged with `fab` |
---
## Fieldset
`Fieldset(props, children)`
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `legend` | string | - | Legend text (rendered as `<legend>`) |
| `class` | string | - | Extra classes merged with `fieldset` |
---
## Fileinput
`Fileinput(props)`
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `max` | number | `2` | Max file size in MB |
| `accept` | string | `'*'` | Accepted file types |
| `onselect` | function | - | Called when files change (receives array) |
| `value` | signal | - | Alternative to `onselect` for signal binding |
| `class` | string | - | Extra classes |
---
## Icon
`Icon(props)`
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `class` | string | - | If the value starts with `icon-`, used as class; otherwise becomes content |
---
## Indicator
`Indicator(props, children)`
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `value` | node | - | Content of the indicator badge |
| `class` | string | - | Extra classes merged with `indicator` |
---
## Input
`Input(props)`
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `label` | string | - | Label text |
| `float` | boolean | `false` | Floating label |
| `left` | node | - | Element on the left |
| `right` | node | - | Element on the right |
| `hint` | string | - | Validation hint |
| `content` | node \| function | - | Content shown when focused (can be a function receiving `isFocused`) |
| `rule` | string | - | Validation pattern |
| `type` | string | `'text'` | Input type (`text`, `password`, etc.) |
| `value` | signal \| string | - | Input value |
| `class` | string | - | Extra classes |
| *any* | | | All other props are passed to the `<input>` |
---
## Kbd
`Kbd(props, children)`
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `class` | string | - | Extra classes merged with `kbd` |
---
## LabelFloat
`LabelFloat(props, children)`
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `class` | string | - | Extra classes merged with `floating-label` |
---
## LabelInput
`LabelInput(props, children)`
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `class` | string | - | Extra classes merged with `input` |
---
## LabelSelect
`LabelSelect(props, children)`
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `class` | string | - | Extra classes merged with `select` |
---
## Loading
`Loading(props)`
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `class` | string | - | Extra classes merged with `loading loading-spinner` |
---
## Menu
`Menu(props)`
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `items` | array \| signal | `[]` | Menu items: `{ label, href?, onclick?, children? }` |
| `keyFn` | function | `(it, idx) => it?.id ?? idx` | Key function for reactivity |
| `class` | string | - | Extra classes |
If `children` is provided, manual mode.
---
## Navbar
`Navbar(props, children)`
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `class` | string | - | Extra classes merged with `navbar` |
---
## Progress
`Progress(props)`
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `class` | string | - | Extra classes merged with `progress` |
---
## Radial
`Radial(props, children)`
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `value` | number | `0` | Progress value (sets CSS `--value` and default text) |
| `style` | string | - | Additional inline styles appended to the defaults |
| `class` | string | - | Extra classes merged with `radial-progress` |
---
## Radio
`Radio(props)`
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `class` | string | - | Extra classes merged with `radio` |
| `checked` | boolean | - | Checked state |
| `onchange` | function | - | Change handler |
---
## Range
`Range(props)`
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `class` | string | - | Extra classes merged with `range` |
| `min` | number | - | Standard range attribute |
| `max` | number | - | Standard range attribute |
| `value` | number | - | Standard range attribute |
---
## Rating
`Rating(props)`
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `value` | number \| signal | - | Selected rating |
| `count` | number | `5` | Number of stars |
| `mask` | string | `'mask-star'` | Shape class (e.g., `'mask-heart'`) |
| `onchange` | function | - | Called when a star is clicked |
| `class` | string | - | Extra classes |
---
## Select
`Select(props, children?)`
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `items` | array \| signal | - | Options list |
| `placeholder` | string | - | Placeholder option text |
| `placeholderDisabled` | boolean | `true` | Whether the placeholder is disabled |
| `label` | string | - | Label text |
| `float` | boolean | `false` | Floating label style |
| `left` | node | - | Element left of select |
| `right` | node | - | Element right of select |
| `hint` | string | - | Validation hint |
| `value` | signal \| string | - | Selected value |
| `keyFn` | function | auto | Key function for reactivity |
| `class` | string | - | Extra classes |
If `children` is provided, manual mode.
---
## Skeleton
`Skeleton(props)`
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `class` | string | - | Extra classes merged with `skeleton` |
---
## SkeletonText
`SkeletonText(props)`
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `class` | string | - | Extra classes merged with `skeleton skeleton-text` |
---
## Stack
`Stack(props, children)`
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `class` | string | - | Extra classes merged with `stack` |
---
## Step
`Step(props, children)`
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `dataContent` | string | - | Value for the `data-content` attribute |
| `class` | string | - | Extra classes merged with `step` |
---
## Steps
`Steps(props, children)`
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `class` | string | - | Extra classes merged with `steps` |
---
## Swap
`Swap(props)`
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `value` | signal \| boolean | - | Checked state (can be a signal) |
| `on` | node | - | Content for the “on” state |
| `off` | node | - | Content for the “off” state |
| `class` | string | - | Extra classes merged with `swap` |
---
## Table
`Table(props)`
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `items` | array \| signal | `[]` | Data rows |
| `columns` | array | `[]` | Column definitions: `{ key?, label?, class?, render? }` |
| `header` | boolean | `true` | Show header row |
| `keyFn` | function | `(item, idx) => item?.id ?? idx` | Key function for reactivity |
| `class` | string | - | Extra classes |
If `children` is provided, manual mode (ignores `items`).
---
## Tabs
`Tabs(props)`
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `items` | array \| signal | `[]` | Tab items: `{ label, content, closable?, class?, contentClass?, onclick? }` |
| `activeIndex` | signal | - | Index of the active tab |
| `onClose` | function | - | Called when a closable tab is closed: `(idx, item)` |
| `class` | string | - | Extra classes |
If `children` is provided, manual mode.
---
## TextRotate
`TextRotate(props)`
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `words` | array \| string | - | Array of words or comma‑separated string |
| `class` | string | - | Extra classes merged with `text-rotate` |
---
## Textarea
`Textarea(props)`
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `class` | string | - | Extra classes merged with `textarea` |
| *any* | | | All standard `<textarea>` attributes |
---
## Timeline
`Timeline(props, children)`
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `vertical` | boolean | `true` | If `false`, horizontal layout |
| `compact` | boolean | `false` | Compact mode |
| `class` | string | - | Extra classes merged with `timeline` |
---
## Toast
`Toast(message, type?, duration?)`
| Parameter | Type | Default | Description |
|-----------|------|---------|-------------|
| `message` | string \| signal | - | Toast text |
| `type` | string | `'alert-success'` | Alert type class |
| `duration` | number | `3500` | Auto‑close time in ms (0 for manual close) |
Returns a `close` function.
---
## Toggle
`Toggle(props)`
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `class` | string | - | Extra classes merged with `toggle` |
| `checked` | boolean \| signal | - | Checked state |
| `onchange` | function | - | Change handler |
---
## Tooltip
`Tooltip(props, children)`
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `tip` | string | - | Tooltip text (sets `data-tip`) |
| `class` | string | - | Extra classes merged with `tooltip` |
Reference in New Issue View Git Blame Copy Permalink