2022-06-30 17:42:15 -07:00
|
|
|
### Default option example
|
|
|
|
|
|
2022-04-16 00:29:35 -07:00
|
|
|
```svelte example raised
|
2022-03-29 00:44:23 -07:00
|
|
|
<script lang="ts">
|
2022-06-04 00:46:23 -07:00
|
|
|
import { Select } from 'omorphia'
|
2022-05-20 00:10:45 -07:00
|
|
|
|
2022-06-04 00:46:23 -07:00
|
|
|
let sortMethod = 'downloads'
|
2022-03-29 00:44:23 -07:00
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<Select
|
2022-06-04 00:46:23 -07:00
|
|
|
options={[
|
|
|
|
|
{ value: '', label: 'Relevance' },
|
|
|
|
|
{ value: 'downloads', label: 'Downloads' },
|
|
|
|
|
{ value: 'follows', label: 'Followers' },
|
2022-06-07 14:00:53 -07:00
|
|
|
{ value: 'newest', label: 'Recently created' },
|
|
|
|
|
{ value: 'updated', label: 'Recently updated' },
|
2022-06-04 00:46:23 -07:00
|
|
|
]}
|
|
|
|
|
bind:value={sortMethod} />
|
2022-03-29 00:44:23 -07:00
|
|
|
```
|
2022-06-30 17:42:15 -07:00
|
|
|
|
|
|
|
|
### Icon example
|
|
|
|
|
|
|
|
|
|
```svelte example raised
|
|
|
|
|
<script lang="ts">
|
|
|
|
|
import { Select } from 'omorphia'
|
|
|
|
|
import IconSun from 'virtual:icons/heroicons-outline/sun'
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<Select
|
|
|
|
|
options={[
|
|
|
|
|
{ value: '1', label: 'Light' },
|
|
|
|
|
{ value: '2', label: 'Dark' },
|
|
|
|
|
{ value: '3', label: 'OLED' },
|
|
|
|
|
]}
|
|
|
|
|
icon={IconSun} />
|
|
|
|
|
```
|