785 lines
34 KiB
Markdown
785 lines
34 KiB
Markdown
# WRNexus UI component reference
|
|
|
|
This reference is generated from the 85 packaged `.wrn` component sources. Props marked required have no default; all others show their runtime default.
|
|
|
|
## Advanced-forms
|
|
|
|
### AdvancedSelect
|
|
|
|
Theme-aware, responsive advanced select component.
|
|
|
|
- Mount: `data-component="AdvancedSelect"`
|
|
- Props: `size: string = "default"`, `color: string = "primary"`, `label: string = "Advanced Select"`, `name: string = ""`, `value: string = ""`, `values: string = []`, `options: string = []`, `groups: string = []`, `placeholder: string = "Select an option"`, `placeholderIcon: string = ""`, `searchPlaceholder: string = "Search options…"`, `multiple: boolean = false`, `searchable: boolean = true`, `defaultOpen: boolean = false`, `clearable: boolean = true`, `allowEmpty: boolean = true`, `tags: boolean = false`, `disabled: boolean = false`, `required: boolean = false`, `invalid: boolean = false`, `validationMessage: string = ""`, `helpText: string = ""`, `loading: boolean = false`, `loadingLabel: string = "Loading options…"`, `emptyLabel: string = "No options found"`, `selectedOptionsLabel: string = "Selected options"`, `clearLabel: string = "Clear selection"`, `createLabel: string = "Create"`, `loadMoreLabel: string = "Load more"`, `searchMode: string = "contains"`, `searchFields: string = "label,description"`, `minSearchLength: number = 0`, `searchResultLimit: number = 0`, `maxSelections: number = 0`, `showCounter: boolean = false`, `counterTemplate: string = "{selected} selected"`, `optionTemplate: string = "default"`, `selectedTemplate: string = "default"`, `closeOnSelect: boolean = true`, `scrollToSelected: boolean = true`, `fixed: boolean = false`, `placement: string = "bottom"`, `remote: boolean = false`, `remoteUrl: string = ""`, `remoteQueryParam: string = "q"`, `remoteDebounce: number = 250`, `remoteAutoLoad: boolean = true`, `infinite: boolean = false`, `hasMore: boolean = false`, `page: number = 1`, `class: string = ""`
|
|
- Slots: None
|
|
- Events: `search`, `select`, `change`, `clear`, `open`, `close`, `load`, `error`
|
|
|
|
### ComboBox
|
|
|
|
Editable autocomplete combobox with local and remote suggestions.
|
|
|
|
- Mount: `data-component="ComboBox"`
|
|
- Props: `size: string = "default"`, `color: string = "primary"`, `label: string = "ComboBox"`, `name: string = ""`, `value: string = ""`, `options: string = []`, `groups: string = []`, `placeholder: string = "Search or select an option"`, `searchPlaceholder: string = "Start typing…"`, `clearable: boolean = true`, `allowCustomValue: boolean = false`, `disabled: boolean = false`, `required: boolean = false`, `invalid: boolean = false`, `validationMessage: string = ""`, `helpText: string = ""`, `loading: boolean = false`, `loadingLabel: string = "Loading suggestions…"`, `emptyLabel: string = "No matching options"`, `clearLabel: string = "Clear value"`, `toggleLabel: string = "Toggle suggestions"`, `searchMode: string = "contains"`, `searchFields: string = "label,description"`, `minSearchLength: number = 0`, `searchResultLimit: number = 0`, `optionTemplate: string = "default"`, `defaultOpen: boolean = false`, `closeOnSelect: boolean = true`, `fixed: boolean = false`, `placement: string = "bottom"`, `autocomplete: string = "off"`, `remote: boolean = false`, `remoteUrl: string = ""`, `remoteQueryParam: string = "q"`, `remoteDebounce: number = 250`, `remoteAutoLoad: boolean = true`, `infinite: boolean = false`, `hasMore: boolean = false`, `page: number = 1`, `loadMoreLabel: string = "Load more"`, `class: string = ""`
|
|
- Slots: None
|
|
- Events: `search`, `select`, `change`, `clear`, `open`, `close`, `load`, `error`
|
|
|
|
### CopyMarkup
|
|
|
|
Theme-aware, responsive copy markup component.
|
|
|
|
- Mount: `data-component="CopyMarkup"`
|
|
- Props: `size: string = "default"`, `color: string = "primary"`, `label: string = "Copy Markup"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `min: string = ""`, `max: string = ""`, `step: string = ""`, `disabled: boolean = false`, `required: boolean = false`, `class: string = ""`
|
|
- Slots: None
|
|
- Events: None
|
|
|
|
### InputNumber
|
|
|
|
Theme-aware, responsive input number component.
|
|
|
|
- Mount: `data-component="InputNumber"`
|
|
- Props: `size: string = "default"`, `color: string = "primary"`, `label: string = "Input Number"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "number"`, `min: string = ""`, `max: string = ""`, `step: string = ""`, `disabled: boolean = false`, `required: boolean = false`, `class: string = ""`
|
|
- Slots: None
|
|
- Events: None
|
|
|
|
### PinInput
|
|
|
|
Secure multi-cell PIN and verification-code input with regex and paste support.
|
|
|
|
- Mount: `data-component="PinInput"`
|
|
- Props: `size: string = "default"`, `color: string = "primary"`, `label: string = "Verification code"`, `name: string = "pin"`, `value: string = ""`, `length: number = 4`, `pattern: string = "[0-9]"`, `type: string = "text"`, `inputMode: string = "numeric"`, `placeholder: string = "○"`, `autocomplete: string = "one-time-code"`, `masked: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `required: boolean = false`, `autoFocus: boolean = false`, `autoSubmit: boolean = false`, `allowPaste: boolean = true`, `clearable: boolean = true`, `clearLabel: string = "Clear code"`, `separator: string = ""`, `groupSize: number = 0`, `helpText: string = ""`, `invalid: boolean = false`, `validationMessage: string = ""`, `class: string = ""`
|
|
- Slots: None
|
|
- Events: `input`, `change`, `complete`, `paste`, `clear`, `error`
|
|
|
|
### SearchBox
|
|
|
|
Theme-aware, responsive search box component.
|
|
|
|
- Mount: `data-component="SearchBox"`
|
|
- Props: `size: string = "default"`, `color: string = "primary"`, `label: string = "Search Box"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "search"`, `min: string = ""`, `max: string = ""`, `step: string = ""`, `disabled: boolean = false`, `required: boolean = false`, `class: string = ""`
|
|
- Slots: None
|
|
- Events: None
|
|
|
|
### StrongPassword
|
|
|
|
Theme-aware, responsive strong password component.
|
|
|
|
- Mount: `data-component="StrongPassword"`
|
|
- Props: `size: string = "default"`, `color: string = "primary"`, `label: string = "Password"`, `name: string = "password"`, `value: string = ""`, `placeholder: string = "Create a strong password"`, `autocomplete: string = "new-password"`, `minLength: number = 8`, `specialCharactersSet: string = "!@#$%^&*()_+-=[]{}|;:,.<>?"`, `requireLowercase: boolean = true`, `requireUppercase: boolean = true`, `requireNumber: boolean = true`, `requireSpecialCharacter: boolean = true`, `showRequirements: boolean = true`, `presentation: string = "inline"`, `hintText: string = "Use a unique password you do not use elsewhere."`, `emptyLabel: string = "Enter a password"`, `weakLabel: string = "Weak"`, `fairLabel: string = "Fair"`, `goodLabel: string = "Good"`, `strongLabel: string = "Strong"`, `disabled: boolean = false`, `readonly: boolean = false`, `required: boolean = false`, `invalid: boolean = false`, `validationMessage: string = ""`, `class: string = ""`
|
|
- Slots: None
|
|
- Events: `input`, `change`, `strength`
|
|
|
|
### ToggleCount
|
|
|
|
Theme-aware, responsive toggle count component.
|
|
|
|
- Mount: `data-component="ToggleCount"`
|
|
- Props: `size: string = "default"`, `color: string = "primary"`, `label: string = "Toggle Count"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `min: string = ""`, `max: string = ""`, `step: string = ""`, `disabled: boolean = false`, `required: boolean = false`, `class: string = ""`
|
|
- Slots: None
|
|
- Events: None
|
|
|
|
### TogglePassword
|
|
|
|
Accessible password field with optional show and hide controls.
|
|
|
|
- Mount: `data-component="TogglePassword"`
|
|
- Props: `size: string = "default"`, `color: string = "primary"`, `label: string = "Password"`, `name: string = "password"`, `value: string = ""`, `placeholder: string = "Enter your password"`, `autocomplete: string = "current-password"`, `minlength: string = ""`, `maxlength: string = ""`, `pattern: string = "(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[^A-Za-z0-9]).{8,}"`, `fields: string = []`, `visible: boolean = false`, `toggleable: boolean = true`, `toggleMode: string = "button"`, `checkboxLabel: string = "Show password"`, `showLabel: string = "Show password"`, `hideLabel: string = "Hide password"`, `disabled: boolean = false`, `readonly: boolean = false`, `required: boolean = false`, `invalid: boolean = false`, `helpText: string = ""`, `validationMessage: string = ""`, `class: string = ""`
|
|
- Slots: None
|
|
- Events: `input`, `change`, `toggle`
|
|
|
|
## Base
|
|
|
|
### Accordion
|
|
|
|
Theme-aware, responsive accordion component.
|
|
|
|
- Mount: `data-component="Accordion"`
|
|
- Props: `size: string = "default"`, `color: string = "primary"`, `items: string = []`, `multiple: boolean = false`, `class: string = ""`
|
|
- Slots: `default`
|
|
- Events: None
|
|
|
|
### Alert
|
|
|
|
Theme-aware, responsive alert component.
|
|
|
|
- Mount: `data-component="Alert"`
|
|
- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "Alert"`, `description: string = ""`, `items: string = []`, `variant: string = "default"`, `class: string = ""`
|
|
- Slots: `default`
|
|
- Events: None
|
|
|
|
### Avatar
|
|
|
|
Theme-aware, responsive avatar component.
|
|
|
|
- Mount: `data-component="Avatar"`
|
|
- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "Avatar"`, `description: string = ""`, `items: string = []`, `variant: string = "default"`, `class: string = ""`
|
|
- Slots: `default`
|
|
- Events: None
|
|
|
|
### AvatarGroup
|
|
|
|
Theme-aware, responsive avatar group component.
|
|
|
|
- Mount: `data-component="AvatarGroup"`
|
|
- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "Avatar Group"`, `description: string = ""`, `items: string = []`, `variant: string = "default"`, `class: string = ""`
|
|
- Slots: `default`
|
|
- Events: None
|
|
|
|
### Badge
|
|
|
|
Theme-aware, responsive badge component.
|
|
|
|
- Mount: `data-component="Badge"`
|
|
- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "Badge"`, `description: string = ""`, `items: string = []`, `variant: string = "default"`, `class: string = ""`
|
|
- Slots: `default`
|
|
- Events: None
|
|
|
|
### Blockquote
|
|
|
|
Theme-aware, responsive blockquote component.
|
|
|
|
- Mount: `data-component="Blockquote"`
|
|
- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "Blockquote"`, `description: string = ""`, `items: string = []`, `variant: string = "default"`, `class: string = ""`
|
|
- Slots: `default`
|
|
- Events: None
|
|
|
|
### Button
|
|
|
|
Theme-aware, responsive button component.
|
|
|
|
- Mount: `data-component="Button"`
|
|
- Props: `label: string = "Button"`, `loadingLabel: string = "Loading…"`, `description: string = ""`, `as: string = ""`, `href: string = ""`, `target: string = ""`, `rel: string = ""`, `type: string = "button"`, `variant: string = "default"`, `color: string = "primary"`, `size: string = "default"`, `disabled: boolean = false`, `loading: boolean = false`, `pill: boolean = false`, `fullWidth: boolean = false`, `icon: string = ""`, `iconPosition: string = "start"`, `ariaLabel: string = ""`, `ariaPressed: string = ""`, `ariaExpanded: string = ""`, `ariaControls: string = ""`, `title: string = ""`, `autofocus: boolean = false`, `controlClass: string = ""`, `class: string = ""`
|
|
- Slots: `default`
|
|
- Events: None
|
|
|
|
### ButtonGroup
|
|
|
|
Theme-aware, responsive button group component.
|
|
|
|
- Mount: `data-component="ButtonGroup"`
|
|
- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "Button Group"`, `description: string = ""`, `items: string = []`, `variant: string = "default"`, `class: string = ""`
|
|
- Slots: `default`
|
|
- Events: None
|
|
|
|
### Card
|
|
|
|
Theme-aware, responsive card component.
|
|
|
|
- Mount: `data-component="Card"`
|
|
- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "Card"`, `description: string = ""`, `items: string = []`, `variant: string = "default"`, `class: string = ""`
|
|
- Slots: `default`
|
|
- Events: None
|
|
|
|
### Carousel
|
|
|
|
Theme-aware, responsive carousel component.
|
|
|
|
- Mount: `data-component="Carousel"`
|
|
- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "Carousel"`, `description: string = ""`, `items: string = []`, `variant: string = "default"`, `class: string = ""`
|
|
- Slots: `default`
|
|
- Events: None
|
|
|
|
### ChatBubble
|
|
|
|
Theme-aware, responsive chat bubble component.
|
|
|
|
- Mount: `data-component="ChatBubble"`
|
|
- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "Chat Bubble"`, `description: string = ""`, `items: string = []`, `variant: string = "default"`, `class: string = ""`
|
|
- Slots: `default`
|
|
- Events: None
|
|
|
|
### Collapse
|
|
|
|
Theme-aware, responsive collapse component.
|
|
|
|
- Mount: `data-component="Collapse"`
|
|
- Props: `size: string = "default"`, `color: string = "primary"`, `items: string = []`, `multiple: boolean = false`, `class: string = ""`
|
|
- Slots: `default`
|
|
- Events: None
|
|
|
|
### DatePicker
|
|
|
|
Theme-aware, responsive date picker component.
|
|
|
|
- Mount: `data-component="DatePicker"`
|
|
- Props: `size: string = "default"`, `color: string = "primary"`, `label: string = "Date Picker"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "date"`, `min: string = ""`, `max: string = ""`, `step: string = ""`, `disabled: boolean = false`, `required: boolean = false`, `class: string = ""`
|
|
- Slots: None
|
|
- Events: None
|
|
|
|
### DeviceFrame
|
|
|
|
Theme-aware, responsive device frame component.
|
|
|
|
- Mount: `data-component="DeviceFrame"`
|
|
- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "Device Frame"`, `description: string = ""`, `items: string = []`, `variant: string = "default"`, `class: string = ""`
|
|
- Slots: `default`
|
|
- Events: None
|
|
|
|
### FileUploadProgress
|
|
|
|
Theme-aware, responsive file upload progress component.
|
|
|
|
- Mount: `data-component="FileUploadProgress"`
|
|
- Props: `size: string = "default"`, `color: string = "primary"`, `label: string = "Progress"`, `value: number = 50`, `max: number = 100`, `showValue: boolean = true`, `class: string = ""`
|
|
- Slots: None
|
|
- Events: None
|
|
|
|
### LegendIndicator
|
|
|
|
Theme-aware, responsive legend indicator component.
|
|
|
|
- Mount: `data-component="LegendIndicator"`
|
|
- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "Legend Indicator"`, `description: string = ""`, `items: string = []`, `variant: string = "default"`, `class: string = ""`
|
|
- Slots: `default`
|
|
- Events: None
|
|
|
|
### List
|
|
|
|
Theme-aware, responsive list component.
|
|
|
|
- Mount: `data-component="List"`
|
|
- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "List"`, `description: string = ""`, `items: string = []`, `variant: string = "default"`, `class: string = ""`
|
|
- Slots: `default`
|
|
- Events: None
|
|
|
|
### ListGroup
|
|
|
|
Theme-aware, responsive list group component.
|
|
|
|
- Mount: `data-component="ListGroup"`
|
|
- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "List Group"`, `description: string = ""`, `items: string = []`, `variant: string = "default"`, `class: string = ""`
|
|
- Slots: `default`
|
|
- Events: None
|
|
|
|
### Marquee
|
|
|
|
Theme-aware, responsive marquee component.
|
|
|
|
- Mount: `data-component="Marquee"`
|
|
- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "Marquee"`, `description: string = ""`, `items: string = []`, `variant: string = "default"`, `class: string = ""`
|
|
- Slots: `default`
|
|
- Events: None
|
|
|
|
### Progress
|
|
|
|
Theme-aware, responsive progress component.
|
|
|
|
- Mount: `data-component="Progress"`
|
|
- Props: `size: string = "default"`, `color: string = "primary"`, `label: string = "Progress"`, `value: number = 50`, `max: number = 100`, `showValue: boolean = true`, `class: string = ""`
|
|
- Slots: None
|
|
- Events: None
|
|
|
|
### Rating
|
|
|
|
Theme-aware, responsive rating component.
|
|
|
|
- Mount: `data-component="Rating"`
|
|
- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "Rating"`, `description: string = ""`, `items: string = []`, `variant: string = "default"`, `class: string = ""`
|
|
- Slots: `default`
|
|
- Events: None
|
|
|
|
### Skeleton
|
|
|
|
Theme-aware, responsive skeleton component.
|
|
|
|
- Mount: `data-component="Skeleton"`
|
|
- Props: `color: string = "primary"`, `label: string = "Loading"`, `size: string = "md"`, `lines: number = 3`, `class: string = ""`
|
|
- Slots: None
|
|
- Events: None
|
|
|
|
### Spinner
|
|
|
|
Theme-aware, responsive spinner component.
|
|
|
|
- Mount: `data-component="Spinner"`
|
|
- Props: `color: string = "primary"`, `label: string = "Loading"`, `size: string = "md"`, `lines: number = 3`, `class: string = ""`
|
|
- Slots: None
|
|
- Events: None
|
|
|
|
### StyledIcon
|
|
|
|
Theme-aware, responsive styled icon component.
|
|
|
|
- Mount: `data-component="StyledIcon"`
|
|
- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "Styled Icon"`, `description: string = ""`, `items: string = []`, `variant: string = "default"`, `class: string = ""`
|
|
- Slots: `default`
|
|
- Events: None
|
|
|
|
### Timeline
|
|
|
|
Theme-aware, responsive timeline component.
|
|
|
|
- Mount: `data-component="Timeline"`
|
|
- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "Timeline"`, `description: string = ""`, `items: string = []`, `variant: string = "default"`, `class: string = ""`
|
|
- Slots: `default`
|
|
- Events: None
|
|
|
|
### Toast
|
|
|
|
Theme-aware, responsive toast component.
|
|
|
|
- Mount: `data-component="Toast"`
|
|
- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "Toast"`, `description: string = ""`, `items: string = []`, `variant: string = "default"`, `class: string = ""`
|
|
- Slots: `default`
|
|
- Events: None
|
|
|
|
### TreeView
|
|
|
|
Theme-aware, responsive tree view component.
|
|
|
|
- Mount: `data-component="TreeView"`
|
|
- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "Tree View"`, `description: string = ""`, `items: string = []`, `variant: string = "default"`, `class: string = ""`
|
|
- Slots: `default`
|
|
- Events: None
|
|
|
|
## Forms
|
|
|
|
### Checkbox
|
|
|
|
Theme-aware, responsive checkbox component.
|
|
|
|
- Mount: `data-component="Checkbox"`
|
|
- Props: `size: string = "default"`, `color: string = "primary"`, `label: string = "Checkbox"`, `name: string = ""`, `value: string = "on"`, `checked: boolean = false`, `disabled: boolean = false`, `class: string = ""`
|
|
- Slots: None
|
|
- Events: None
|
|
|
|
### ColorPicker
|
|
|
|
Theme-aware, responsive color picker component.
|
|
|
|
- Mount: `data-component="ColorPicker"`
|
|
- Props: `size: string = "default"`, `color: string = "primary"`, `label: string = "Color Picker"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "color"`, `min: string = ""`, `max: string = ""`, `step: string = ""`, `disabled: boolean = false`, `required: boolean = false`, `class: string = ""`
|
|
- Slots: None
|
|
- Events: None
|
|
|
|
### FileInput
|
|
|
|
Theme-aware, responsive file input component.
|
|
|
|
- Mount: `data-component="FileInput"`
|
|
- Props: `size: string = "default"`, `color: string = "primary"`, `label: string = "File Input"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "file"`, `min: string = ""`, `max: string = ""`, `step: string = ""`, `disabled: boolean = false`, `required: boolean = false`, `class: string = ""`
|
|
- Slots: None
|
|
- Events: None
|
|
|
|
### Input
|
|
|
|
Theme-aware, responsive input component.
|
|
|
|
- Mount: `data-component="Input"`
|
|
- Props: `size: string = "default"`, `color: string = "primary"`, `label: string = "Input"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `min: string = ""`, `max: string = ""`, `step: string = ""`, `disabled: boolean = false`, `required: boolean = false`, `class: string = ""`
|
|
- Slots: None
|
|
- Events: None
|
|
|
|
### InputGroup
|
|
|
|
Theme-aware, responsive input group component.
|
|
|
|
- Mount: `data-component="InputGroup"`
|
|
- Props: `size: string = "default"`, `color: string = "primary"`, `label: string = "Input Group"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `min: string = ""`, `max: string = ""`, `step: string = ""`, `disabled: boolean = false`, `required: boolean = false`, `class: string = ""`
|
|
- Slots: None
|
|
- Events: None
|
|
|
|
### Radio
|
|
|
|
Theme-aware, responsive radio component.
|
|
|
|
- Mount: `data-component="Radio"`
|
|
- Props: `size: string = "default"`, `color: string = "primary"`, `label: string = "Radio"`, `name: string = ""`, `value: string = "on"`, `checked: boolean = false`, `disabled: boolean = false`, `class: string = ""`
|
|
- Slots: None
|
|
- Events: None
|
|
|
|
### RangeSlider
|
|
|
|
Theme-aware, responsive range slider component.
|
|
|
|
- Mount: `data-component="RangeSlider"`
|
|
- Props: `size: string = "default"`, `color: string = "primary"`, `label: string = "Range Slider"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "range"`, `min: string = ""`, `max: string = ""`, `step: string = ""`, `disabled: boolean = false`, `required: boolean = false`, `class: string = ""`
|
|
- Slots: None
|
|
- Events: None
|
|
|
|
### Select
|
|
|
|
Theme-aware, responsive select component.
|
|
|
|
- Mount: `data-component="Select"`
|
|
- Props: `size: string = "default"`, `color: string = "primary"`, `label: string = "Select"`, `name: string = ""`, `value: string = ""`, `options: string = []`, `placeholder: string = "Select an option"`, `multiple: boolean = false`, `disabled: boolean = false`, `class: string = ""`
|
|
- Slots: None
|
|
- Events: None
|
|
|
|
### Switch
|
|
|
|
Theme-aware, responsive switch component.
|
|
|
|
- Mount: `data-component="Switch"`
|
|
- Props: `size: string = "default"`, `color: string = "primary"`, `label: string = "Switch"`, `name: string = ""`, `value: string = "on"`, `checked: boolean = false`, `disabled: boolean = false`, `class: string = ""`
|
|
- Slots: None
|
|
- Events: None
|
|
|
|
### Textarea
|
|
|
|
Theme-aware, responsive textarea component.
|
|
|
|
- Mount: `data-component="Textarea"`
|
|
- Props: `size: string = "default"`, `color: string = "primary"`, `label: string = "Textarea"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `rows: number = 5`, `disabled: boolean = false`, `required: boolean = false`, `class: string = ""`
|
|
- Slots: None
|
|
- Events: None
|
|
|
|
### TimePicker
|
|
|
|
Theme-aware, responsive time picker component.
|
|
|
|
- Mount: `data-component="TimePicker"`
|
|
- Props: `size: string = "default"`, `color: string = "primary"`, `label: string = "Time Picker"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "time"`, `min: string = ""`, `max: string = ""`, `step: string = ""`, `disabled: boolean = false`, `required: boolean = false`, `class: string = ""`
|
|
- Slots: None
|
|
- Events: None
|
|
|
|
## Integrations
|
|
|
|
### AdvancedDatePicker
|
|
|
|
Theme-aware, responsive advanced date picker component.
|
|
|
|
- Mount: `data-component="AdvancedDatePicker"`
|
|
- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "Advanced Date Picker"`, `description: string = ""`, `items: string = []`, `variant: string = "default"`, `class: string = ""`
|
|
- Slots: `default`
|
|
- Events: None
|
|
|
|
### AdvancedRangeSlider
|
|
|
|
Theme-aware, responsive advanced range slider component.
|
|
|
|
- Mount: `data-component="AdvancedRangeSlider"`
|
|
- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "Advanced Range Slider"`, `description: string = ""`, `items: string = []`, `variant: string = "default"`, `class: string = ""`
|
|
- Slots: `default`
|
|
- Events: None
|
|
|
|
### Chart
|
|
|
|
Theme-aware, responsive chart component.
|
|
|
|
- Mount: `data-component="Chart"`
|
|
- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "Chart"`, `description: string = ""`, `items: string = []`, `variant: string = "default"`, `class: string = ""`
|
|
- Slots: `default`
|
|
- Events: None
|
|
|
|
### Clipboard
|
|
|
|
Theme-aware, responsive clipboard component.
|
|
|
|
- Mount: `data-component="Clipboard"`
|
|
- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "Clipboard"`, `description: string = ""`, `items: string = []`, `variant: string = "default"`, `class: string = ""`
|
|
- Slots: `default`
|
|
- Events: None
|
|
|
|
### Confetti
|
|
|
|
Theme-aware, responsive confetti component.
|
|
|
|
- Mount: `data-component="Confetti"`
|
|
- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "Confetti"`, `description: string = ""`, `items: string = []`, `variant: string = "default"`, `class: string = ""`
|
|
- Slots: `default`
|
|
- Events: None
|
|
|
|
### DataMap
|
|
|
|
Theme-aware, responsive data map component.
|
|
|
|
- Mount: `data-component="DataMap"`
|
|
- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "Data Map"`, `description: string = ""`, `items: string = []`, `variant: string = "default"`, `class: string = ""`
|
|
- Slots: `default`
|
|
- Events: None
|
|
|
|
### DataTable
|
|
|
|
Theme-aware, responsive data table component.
|
|
|
|
- Mount: `data-component="DataTable"`
|
|
- Props: `size: string = "default"`, `color: string = "primary"`, `caption: string = "Data Table"`, `columns: string = []`, `rows: string = []`, `striped: boolean = true`, `class: string = ""`
|
|
- Slots: `default`
|
|
- Events: None
|
|
|
|
### DragAndDrop
|
|
|
|
Theme-aware, responsive drag and drop component.
|
|
|
|
- Mount: `data-component="DragAndDrop"`
|
|
- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "Drag And Drop"`, `description: string = ""`, `items: string = []`, `variant: string = "default"`, `class: string = ""`
|
|
- Slots: `default`
|
|
- Events: None
|
|
|
|
### FileUpload
|
|
|
|
Theme-aware, responsive file upload component.
|
|
|
|
- Mount: `data-component="FileUpload"`
|
|
- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "File Upload"`, `description: string = ""`, `items: string = []`, `variant: string = "default"`, `class: string = ""`
|
|
- Slots: `default`
|
|
- Events: None
|
|
|
|
### Map
|
|
|
|
Theme-aware, responsive map component.
|
|
|
|
- Mount: `data-component="Map"`
|
|
- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "Map"`, `description: string = ""`, `items: string = []`, `variant: string = "default"`, `class: string = ""`
|
|
- Slots: `default`
|
|
- Events: None
|
|
|
|
### ToastNotifications
|
|
|
|
Theme-aware, responsive toast notifications component.
|
|
|
|
- Mount: `data-component="ToastNotifications"`
|
|
- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "Toast Notifications"`, `description: string = ""`, `items: string = []`, `variant: string = "default"`, `class: string = ""`
|
|
- Slots: `default`
|
|
- Events: None
|
|
|
|
### WysiwygEditor
|
|
|
|
Theme-aware, responsive wysiwyg editor component.
|
|
|
|
- Mount: `data-component="WysiwygEditor"`
|
|
- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "Wysiwyg Editor"`, `description: string = ""`, `items: string = []`, `variant: string = "default"`, `class: string = ""`
|
|
- Slots: `default`
|
|
- Events: None
|
|
|
|
## Layout
|
|
|
|
### Columns
|
|
|
|
Theme-aware, responsive columns component.
|
|
|
|
- Mount: `data-component="Columns"`
|
|
- Props: `size: string = "default"`, `color: string = "primary"`, `columns: number = 2`, `gap: string = "md"`, `maxWidth: string = "xl"`, `class: string = ""`
|
|
- Slots: `default`
|
|
- Events: None
|
|
|
|
### Container
|
|
|
|
Theme-aware, responsive container component.
|
|
|
|
- Mount: `data-component="Container"`
|
|
- Props: `size: string = "default"`, `color: string = "primary"`, `columns: number = 2`, `gap: string = "md"`, `maxWidth: string = "xl"`, `class: string = ""`
|
|
- Slots: `default`
|
|
- Events: None
|
|
|
|
### CustomScrollbar
|
|
|
|
Theme-aware, responsive custom scrollbar component.
|
|
|
|
- Mount: `data-component="CustomScrollbar"`
|
|
- Props: `size: string = "default"`, `color: string = "primary"`, `columns: number = 2`, `gap: string = "md"`, `maxWidth: string = "xl"`, `class: string = ""`
|
|
- Slots: `default`
|
|
- Events: None
|
|
|
|
### Divider
|
|
|
|
Theme-aware, responsive divider component.
|
|
|
|
- Mount: `data-component="Divider"`
|
|
- Props: `size: string = "default"`, `color: string = "primary"`, `label: string = ""`, `orientation: string = "horizontal"`, `class: string = ""`
|
|
- Slots: None
|
|
- Events: None
|
|
|
|
### Grid
|
|
|
|
Theme-aware, responsive grid component.
|
|
|
|
- Mount: `data-component="Grid"`
|
|
- Props: `size: string = "default"`, `color: string = "primary"`, `columns: number = 2`, `gap: string = "md"`, `maxWidth: string = "xl"`, `class: string = ""`
|
|
- Slots: `default`
|
|
- Events: None
|
|
|
|
### Image
|
|
|
|
Theme-aware, responsive image component.
|
|
|
|
- Mount: `data-component="Image"`
|
|
- Props: `size: string = "default"`, `color: string = "primary"`, `src: string = ""`, `alt: string = ""`, `width: string = ""`, `height: string = ""`, `loading: string = "lazy"`, `rounded: boolean = false`, `class: string = ""`
|
|
- Slots: `default`
|
|
- Events: None
|
|
|
|
### Kbd
|
|
|
|
Theme-aware, responsive kbd component.
|
|
|
|
- Mount: `data-component="Kbd"`
|
|
- Props: `size: string = "default"`, `color: string = "primary"`, `label: string = "⌘ K"`, `class: string = ""`
|
|
- Slots: `default`
|
|
- Events: None
|
|
|
|
### LayoutSplitter
|
|
|
|
Theme-aware, responsive layout splitter component.
|
|
|
|
- Mount: `data-component="LayoutSplitter"`
|
|
- Props: `size: string = "default"`, `color: string = "primary"`, `columns: number = 2`, `gap: string = "md"`, `maxWidth: string = "xl"`, `class: string = ""`
|
|
- Slots: `default`
|
|
- Events: None
|
|
|
|
### Link
|
|
|
|
Theme-aware, responsive link component.
|
|
|
|
- Mount: `data-component="Link"`
|
|
- Props: `size: string = "default"`, `color: string = "primary"`, `label: string = "Link"`, `href: string = "#"`, `target: string = ""`, `rel: string = ""`, `external: boolean = false`, `class: string = ""`
|
|
- Slots: `default`
|
|
- Events: None
|
|
|
|
### Typography
|
|
|
|
Theme-aware, responsive typography component.
|
|
|
|
- Mount: `data-component="Typography"`
|
|
- Props: `size: string = "default"`, `color: string = "primary"`, `columns: number = 2`, `gap: string = "md"`, `maxWidth: string = "xl"`, `class: string = ""`
|
|
- Slots: `default`
|
|
- Events: None
|
|
|
|
## Navigation
|
|
|
|
### Breadcrumb
|
|
|
|
Theme-aware, responsive breadcrumb component.
|
|
|
|
- Mount: `data-component="Breadcrumb"`
|
|
- Props: `size: string = "default"`, `color: string = "primary"`, `label: string = "Breadcrumb"`, `items: string = []`, `active: string = ""`, `orientation: string = "horizontal"`, `class: string = ""`
|
|
- Slots: `default`
|
|
- Events: None
|
|
|
|
### MegaMenu
|
|
|
|
Theme-aware, responsive mega menu component.
|
|
|
|
- Mount: `data-component="MegaMenu"`
|
|
- Props: `size: string = "default"`, `color: string = "primary"`, `label: string = "Mega Menu"`, `items: string = []`, `active: string = ""`, `orientation: string = "horizontal"`, `class: string = ""`
|
|
- Slots: `default`
|
|
- Events: None
|
|
|
|
### Nav
|
|
|
|
Theme-aware, responsive nav component.
|
|
|
|
- Mount: `data-component="Nav"`
|
|
- Props: `size: string = "default"`, `color: string = "primary"`, `label: string = "Nav"`, `items: string = []`, `active: string = ""`, `orientation: string = "horizontal"`, `class: string = ""`
|
|
- Slots: `default`
|
|
- Events: None
|
|
|
|
### Navbar
|
|
|
|
Theme-aware, responsive navbar component.
|
|
|
|
- Mount: `data-component="Navbar"`
|
|
- Props: `size: string = "default"`, `color: string = "primary"`, `label: string = "Navbar"`, `items: string = []`, `active: string = ""`, `orientation: string = "horizontal"`, `class: string = ""`
|
|
- Slots: `default`
|
|
- Events: None
|
|
|
|
### Pagination
|
|
|
|
Theme-aware, responsive pagination component.
|
|
|
|
- Mount: `data-component="Pagination"`
|
|
- Props: `size: string = "default"`, `color: string = "primary"`, `label: string = "Pagination"`, `items: string = []`, `active: string = ""`, `orientation: string = "horizontal"`, `class: string = ""`
|
|
- Slots: `default`
|
|
- Events: None
|
|
|
|
### Scrollspy
|
|
|
|
Theme-aware, responsive scrollspy component.
|
|
|
|
- Mount: `data-component="Scrollspy"`
|
|
- Props: `size: string = "default"`, `color: string = "primary"`, `label: string = "Scrollspy"`, `items: string = []`, `active: string = ""`, `orientation: string = "horizontal"`, `class: string = ""`
|
|
- Slots: `default`
|
|
- Events: None
|
|
|
|
### Sidebar
|
|
|
|
Theme-aware, responsive sidebar component.
|
|
|
|
- Mount: `data-component="Sidebar"`
|
|
- Props: `size: string = "default"`, `color: string = "primary"`, `label: string = "Sidebar"`, `items: string = []`, `active: string = ""`, `orientation: string = "horizontal"`, `class: string = ""`
|
|
- Slots: `default`
|
|
- Events: None
|
|
|
|
### Stepper
|
|
|
|
Theme-aware, responsive stepper component.
|
|
|
|
- Mount: `data-component="Stepper"`
|
|
- Props: `size: string = "default"`, `color: string = "primary"`, `label: string = "Stepper"`, `items: string = []`, `active: string = ""`, `orientation: string = "horizontal"`, `class: string = ""`
|
|
- Slots: `default`
|
|
- Events: None
|
|
|
|
### Tabs
|
|
|
|
Theme-aware, responsive tabs component.
|
|
|
|
- Mount: `data-component="Tabs"`
|
|
- Props: `size: string = "default"`, `color: string = "primary"`, `label: string = "Tabs"`, `items: string = []`, `active: string = ""`, `orientation: string = "horizontal"`, `class: string = ""`
|
|
- Slots: `default`
|
|
- Events: None
|
|
|
|
## Overlays
|
|
|
|
### ContextMenu
|
|
|
|
Theme-aware, responsive context menu component.
|
|
|
|
- Mount: `data-component="ContextMenu"`
|
|
- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "Context Menu"`, `description: string = ""`, `open: boolean = false`, `placement: string = "bottom"`, `closeLabel: string = "Close"`, `class: string = ""`
|
|
- Slots: `default`
|
|
- Events: None
|
|
|
|
### Drawer
|
|
|
|
Theme-aware, responsive drawer component.
|
|
|
|
- Mount: `data-component="Drawer"`
|
|
- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "Drawer"`, `description: string = ""`, `open: boolean = false`, `placement: string = "bottom"`, `closeLabel: string = "Close"`, `class: string = ""`
|
|
- Slots: `default`
|
|
- Events: None
|
|
|
|
### Dropdown
|
|
|
|
Theme-aware, responsive dropdown component.
|
|
|
|
- Mount: `data-component="Dropdown"`
|
|
- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "Dropdown"`, `description: string = ""`, `open: boolean = false`, `placement: string = "bottom"`, `closeLabel: string = "Close"`, `class: string = ""`
|
|
- Slots: `default`
|
|
- Events: None
|
|
|
|
### Modal
|
|
|
|
Theme-aware, responsive modal component.
|
|
|
|
- Mount: `data-component="Modal"`
|
|
- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "Modal"`, `description: string = ""`, `open: boolean = false`, `placement: string = "bottom"`, `closeLabel: string = "Close"`, `class: string = ""`
|
|
- Slots: `default`
|
|
- Events: None
|
|
|
|
### Popover
|
|
|
|
Theme-aware, responsive popover component.
|
|
|
|
- Mount: `data-component="Popover"`
|
|
- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "Popover"`, `description: string = ""`, `open: boolean = false`, `placement: string = "bottom"`, `closeLabel: string = "Close"`, `class: string = ""`
|
|
- Slots: `default`
|
|
- Events: None
|
|
|
|
### Tooltip
|
|
|
|
Theme-aware, responsive tooltip component.
|
|
|
|
- Mount: `data-component="Tooltip"`
|
|
- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "Tooltip"`, `description: string = ""`, `open: boolean = false`, `placement: string = "bottom"`, `closeLabel: string = "Close"`, `class: string = ""`
|
|
- Slots: `default`
|
|
- Events: None
|
|
|
|
## Tables
|
|
|
|
### Table
|
|
|
|
Theme-aware, responsive table component.
|
|
|
|
- Mount: `data-component="Table"`
|
|
- Props: `size: string = "default"`, `color: string = "primary"`, `caption: string = "Table"`, `columns: string = []`, `rows: string = []`, `striped: boolean = true`, `class: string = ""`
|
|
- Slots: `default`
|
|
- Events: None
|