You've already forked pages
forked from didirus/AstralRinth
Add component API to built docs + Add Checkbox, CheckboxList, & CheckboxVirtualList
This commit is contained in:
20
src/routes/components/Checkbox.md
Normal file
20
src/routes/components/Checkbox.md
Normal file
@@ -0,0 +1,20 @@
|
||||
### Text-only Example
|
||||
|
||||
```svelte example
|
||||
<script lang="ts">
|
||||
import Checkbox from "omorphia/components/Checkbox.svelte";
|
||||
</script>
|
||||
|
||||
<Checkbox>Extra components</Checkbox>
|
||||
```
|
||||
|
||||
### Text with Icon Example
|
||||
|
||||
```svelte example
|
||||
<script lang="ts">
|
||||
import Checkbox from "omorphia/components/Checkbox.svelte";
|
||||
import IconCarrot from 'virtual:icons/lucide/carrot'
|
||||
</script>
|
||||
|
||||
<Checkbox><IconCarrot /> Food </Checkbox>
|
||||
```
|
||||
33
src/routes/components/CheckboxList.md
Normal file
33
src/routes/components/CheckboxList.md
Normal file
@@ -0,0 +1,33 @@
|
||||
```svelte example
|
||||
<script lang="ts">
|
||||
import CheckboxList from "omorphia/components/CheckboxList.svelte";
|
||||
import IconSquare from 'virtual:icons/lucide/square'
|
||||
import IconCircle from 'virtual:icons/lucide/circle'
|
||||
import IconTriangle from 'virtual:icons/lucide/triangle'
|
||||
|
||||
let selected = []
|
||||
</script>
|
||||
|
||||
<CheckboxList
|
||||
bind:value={selected}
|
||||
options={[
|
||||
{
|
||||
label: 'Circle',
|
||||
icon: IconCircle,
|
||||
value: 'CIR',
|
||||
},
|
||||
{
|
||||
label: 'Triangle',
|
||||
icon: IconTriangle,
|
||||
value: 'TRI',
|
||||
},
|
||||
{
|
||||
label: 'Square',
|
||||
icon: IconSquare,
|
||||
value: 'SQU',
|
||||
},
|
||||
]}
|
||||
/>
|
||||
|
||||
Selected: {selected}
|
||||
```
|
||||
23
src/routes/components/CheckboxVirtualList.md
Normal file
23
src/routes/components/CheckboxVirtualList.md
Normal file
@@ -0,0 +1,23 @@
|
||||
```svelte example
|
||||
<script lang="ts">
|
||||
import CheckboxVirtualList from "omorphia/components/CheckboxVirtualList.svelte";
|
||||
import IconStar from 'virtual:icons/heroicons-outline/star'
|
||||
import uniqueId from 'lodash.uniqueid'
|
||||
|
||||
let options = Array(100).fill({})
|
||||
.map(option => ({
|
||||
label: 'Star-' + uniqueId(),
|
||||
icon: IconStar,
|
||||
value: uniqueId(),
|
||||
}))
|
||||
|
||||
let selected = ['2', '6']
|
||||
</script>
|
||||
|
||||
<CheckboxVirtualList
|
||||
bind:value={selected}
|
||||
{options}
|
||||
/>
|
||||
|
||||
Selected: {selected}
|
||||
```
|
||||
@@ -13,8 +13,8 @@
|
||||
label: 'Button'
|
||||
},
|
||||
{
|
||||
href: '/Link',
|
||||
label: 'Link'
|
||||
href: '/Chips',
|
||||
label: 'Chips'
|
||||
},
|
||||
{
|
||||
href: '/NavRow',
|
||||
|
||||
Reference in New Issue
Block a user