Component Index
The core of Super8 is built using the Svelte JavaScript framework. Here's a list of all the components and their properties for Super8 developers.
19 components exported from @s-8/[email protected].
Components
AccordionBadgeBtnCheckboxCodeEditorFiltersFiltersBtnIndicatorInputColorInputNumberInputTextNotOptionRadioRangeSelectTabsTitleTooltip
Accordion
Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|---|---|---|---|---|---|---|
| open | No | let | Yes | boolean | false | -- |
| title | No | let | No | -- | undefined | VARIABLES |
| type | No | let | No | -- | undefined | -- |
| indicator | No | let | No | -- | undefined | -- |
| customClasses | No | let | No | string | '' | -- |
Slots
| Slot name | Default | Props | Fallback |
|---|---|---|---|
| -- | Yes | -- | -- |
Events
None.
Badge
Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|---|---|---|---|---|---|---|
| type | No | let | No | -- | undefined | VARIABLES |
| customClasses | No | let | No | string | '' | -- |
| id | No | let | No | string | '' | -- |
| url | No | let | No | string | '' | -- |
| title | No | let | No | string | '' | -- |
Slots
| Slot name | Default | Props | Fallback |
|---|---|---|---|
| -- | Yes | -- | -- |
Events
None.
Btn
Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|---|---|---|---|---|---|---|
| id | No | let | Yes | string | '' | -- |
| customClasses | No | let | No | string | '' | VARIABLES |
| color | No | let | No | -- | undefined | -- |
| href | No | let | No | string | '' | -- |
| ping | No | let | No | boolean | false | -- |
| active | No | let | No | -- | undefined | -- |
| disabled | No | let | No | -- | undefined | -- |
| tooltip | No | let | No | -- | undefined | -- |
| icon | No | let | No | -- | undefined | -- |
Slots
| Slot name | Default | Props | Fallback |
|---|---|---|---|
| -- | Yes | -- | -- |
Events
| Event name | Type | Detail |
|---|---|---|
| click | forwarded | -- |
Checkbox
Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|---|---|---|---|---|---|---|
| value | Yes | let | Yes | -- | undefined | -- |
| customClasses | No | let | No | string | '' | VARIABLES |
| id | No | let | No | string | '' | -- |
| disabled | No | let | No | -- | undefined | -- |
| type | No | let | No | -- | undefined | -- |
Slots
None.
Events
None.
CodeEditor
Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|---|---|---|---|---|---|---|
| placeholder | No | let | Yes | string | "" | -- |
| readonly | No | let | Yes | boolean | false | -- |
| value | Yes | let | Yes | -- | undefined | -- |
| type | No | let | No | -- | undefined | -- |
| height | No | let | No | -- | undefined | -- |
| width | No | let | No | -- | undefined | -- |
| customClasses | No | let | No | string | "" | -- |
Slots
None.
Events
None.
Filters
Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|---|---|---|---|---|---|---|
| presetsValue | No | let | Yes | ComponentFilters['presets'] | { value: $valueID, customList: $customList, } | -- |
| hide | No | let | Yes | ComponentFilters['hide'] | undefined | -- |
| value | No | let | Yes | ComponentFilters['values'] | undefined | -- |
| valuesChanged | No | let | Yes | ComponentFilters['valuesChanged'] | undefined | -- |
| active | No | let | Yes | ComponentFilters['active'] | false | -- |
| type | No | let | No | ComponentFilters['type'] | undefined | -- |
| toSelectors | No | let | No | ComponentFilters['toSelectors'] | ['video'] | -- |
| btn | No | let | No | ComponentFilters['btn'] | undefined | -- |
| content | No | let | No | ComponentFilters['content'] | undefined | -- |
| locales | No | let | No | ComponentFilters['locales'] | undefined | -- |
| id | No | let | No | ComponentFilters['id'] | '' | -- |
| document | No | let | No | ComponentFilters['document'] | undefined | -- |
| position | No | let | No | ComponentFilters['position'] | undefined | -- |
| optionsLimit | No | let | No | ComponentFilters['optionsLimit'] | undefined | -- |
| changeActive | No | const | No | (v: ComponentFilters['active']) => void | (v) => { if (typeof v === 'boolean') filtersActive.set(v); } | -- |
Slots
| Slot name | Default | Props | Fallback |
|---|---|---|---|
| content | No | { slot: content } | -- |
| footer | No | { slot: footer } | -- |
| header | No | { slot: header } | -- |
Events
None.
FiltersBtn
Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|---|---|---|---|---|---|---|
| title | No | let | No | string | '' | VARIABLES |
| position | No | let | No | -- | undefined | -- |
| customClasses | No | let | No | string | '' | -- |
| color | No | let | No | -- | undefined | -- |
| indicator | No | let | No | -- | undefined | -- |
| active | No | let | No | boolean | true | -- |
Slots
None.
Events
None.
Indicator
Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|---|---|---|---|---|---|---|
| position | No | let | No | -- | undefined | VARIABLES |
| type | No | let | No | -- | undefined | -- |
| customClasses | No | let | No | string | '' | -- |
| title | No | let | No | -- | undefined | -- |
| size | No | let | No | -- | undefined | -- |
Slots
None.
Events
None.
InputColor
Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|---|---|---|---|---|---|---|
| value | Yes | let | Yes | -- | undefined | -- |
| customClasses | No | let | No | string | '' | VARIABLES |
| id | No | let | No | string | '' | -- |
| disabled | No | let | No | boolean | false | -- |
| type | No | let | No | -- | undefined | -- |
Slots
None.
Events
None.
InputNumber
Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|---|---|---|---|---|---|---|
| value | Yes | let | Yes | -- | undefined | -- |
| opts | No | let | No | { max: 0, min: 100, step: 1 } | { max: 0, min: 100, step: 1 } | VARIABLES |
| id | No | let | No | string | '' | -- |
| customClasses | No | let | No | string | '' | -- |
| type | No | let | No | -- | undefined | -- |
| disabled | No | let | No | -- | undefined | -- |
Slots
None.
Events
None.
InputText
Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|---|---|---|---|---|---|---|
| value | Yes | let | Yes | -- | undefined | -- |
| id | No | let | No | string | '' | VARIABLES |
| customClasses | No | let | No | string | '' | -- |
| type | No | let | No | -- | undefined | -- |
| disabled | No | let | No | -- | undefined | -- |
| placeholder | No | let | No | string | "" | -- |
Slots
None.
Events
None.
Not
Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|---|---|---|---|---|---|---|
| onHover | No | let | Yes | boolean | false | -- |
| id | No | let | No | string | '' | VARIABLES |
| type | No | let | No | -- | undefined | -- |
| customClasses | No | let | No | string | '' | -- |
Slots
| Slot name | Default | Props | Fallback |
|---|---|---|---|
| -- | Yes | -- | -- |
Events
None.
Option
Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|---|---|---|---|---|---|---|
| value | No | let | Yes | -- | undefined | -- |
| id | No | let | Yes | string | '' | -- |
| type | No | let | No | -- | undefined | VARIABLES |
| title | No | let | No | -- | undefined | -- |
| disabled | No | let | No | -- | undefined | -- |
| customClasses | No | let | No | string | '' | -- |
| opts | No | let | No | -- | undefined | -- |
| onChange | No | let | No | -- | undefined | -- |
| onReset | No | let | No | -- | undefined | -- |
| indicator | No | let | No | -- | undefined | -- |
Slots
| Slot name | Default | Props | Fallback |
|---|---|---|---|
| -- | Yes | -- | -- |
Events
None.
Radio
Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|---|---|---|---|---|---|---|
| value | Yes | let | Yes | -- | undefined | -- |
| id | No | let | No | string | '' | VARIABLES |
| opts | Yes | let | No | -- | undefined | -- |
| customClasses | No | let | No | string | '' | -- |
| type | No | let | No | -- | undefined | -- |
| disabled | No | let | No | -- | undefined | -- |
Slots
None.
Events
None.
Range
Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|---|---|---|---|---|---|---|
| value | Yes | let | Yes | -- | undefined | -- |
| opts | No | let | No | -- | undefined | VARIABLES |
| id | No | let | No | string | '' | -- |
| inputValue | No | let | No | boolean | false | -- |
| customClasses | No | let | No | string | '' | -- |
| type | No | let | No | -- | undefined | -- |
| disabled | No | let | No | -- | undefined | -- |
Slots
None.
Events
None.
Select
Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|---|---|---|---|---|---|---|
| value | Yes | let | Yes | -- | undefined | -- |
| id | No | let | No | string | '' | VARIABLES |
| opts | Yes | let | No | -- | undefined | -- |
| customClasses | No | let | No | string | '' | -- |
| type | No | let | No | string | "native" | -- |
| disabled | No | let | No | -- | undefined | -- |
Slots
None.
Events
None.
Tabs
Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|---|---|---|---|---|---|---|
| activeTabValue | No | let | Yes | -- | undefined | -- |
| items | Yes | let | No | -- | undefined | VARIABLES |
| customClasses | No | let | No | string | '' | -- |
| customBtnClasses | No | let | No | string | '' | -- |
Slots
None.
Events
None.
Title
Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|---|---|---|---|---|---|---|
| value | No | let | No | string | "" | VARIABLES |
| desc | No | let | No | -- | undefined | -- |
| id | No | let | No | string | "" | -- |
| type | No | let | No | -- | undefined | -- |
| tooltip | No | let | No | -- | undefined | -- |
| link | No | let | No | -- | undefined | -- |
| linkTarget | No | let | No | string | '_blank' | -- |
| customClasses | No | let | No | string | '' | -- |
Slots
None.
Events
None.
Tooltip
Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|---|---|---|---|---|---|---|
| icon | No | let | No | -- | undefined | VARIABLES |
| id | No | let | No | string | '' | -- |
| type | No | let | No | -- | undefined | -- |
| position | No | let | No | -- | undefined | -- |
| customClasses | No | let | No | string | '' | -- |
Slots
| Slot name | Default | Props | Fallback |
|---|---|---|---|
| -- | Yes | -- | -- |
Events
None.