94 lines
2.2 KiB
Markdown
94 lines
2.2 KiB
Markdown
# Search Dropdown
|
|
|
|
<script setup>
|
|
import { ref } from "vue";
|
|
|
|
const options = ref([]);
|
|
const text = ref("");
|
|
const onSelected = (option) => {
|
|
options.value.push(option);
|
|
};
|
|
</script>
|
|
|
|
<DemoContainer>
|
|
{{options}}
|
|
{{text}}
|
|
|
|
<SearchDropdown
|
|
placeholder="Search for dependencies"
|
|
@on-selected="onSelected"
|
|
v-model="text"
|
|
:options="[
|
|
{
|
|
title: 'Project 1',
|
|
subtitle: 'Author 1',
|
|
icon: 'https://cdn.modrinth.com/data/pzd7e1y0/a00d7bc1cec363bb4e678da82f33da5708e8a30a.png',
|
|
id: 'ejnfwfinj',
|
|
},
|
|
{
|
|
title: 'Project 2',
|
|
subtitle: 'Author 1',
|
|
icon: 'https://cdn.modrinth.com/data/pzd7e1y0/a00d7bc1cec363bb4e678da82f33da5708e8a30a.png',
|
|
id: 'ejnfwfinj',
|
|
},
|
|
{
|
|
title: 'Project 3',
|
|
subtitle: 'Author 1',
|
|
icon: 'https://cdn.modrinth.com/data/pzd7e1y0/a00d7bc1cec363bb4e678da82f33da5708e8a30a.png',
|
|
id: 'ejnfwfinj',
|
|
},
|
|
{
|
|
title: 'Project 3',
|
|
subtitle: 'Author 1',
|
|
icon: 'https://cdn.modrinth.com/data/pzd7e1y0/a00d7bc1cec363bb4e678da82f33da5708e8a30a.png',
|
|
id: 'ejnfwfinj',
|
|
},
|
|
{
|
|
title: 'Project 1',
|
|
subtitle: 'Author 1',
|
|
icon: 'https://cdn.modrinth.com/data/pzd7e1y0/a00d7bc1cec363bb4e678da82f33da5708e8a30a.png',
|
|
id: 'ejnfwfinj',
|
|
},
|
|
{
|
|
title: 'Project 2',
|
|
subtitle: 'Author 1',
|
|
icon: 'https://cdn.modrinth.com/data/pzd7e1y0/a00d7bc1cec363bb4e678da82f33da5708e8a30a.png',
|
|
id: 'ejnfwfinj',
|
|
},
|
|
{
|
|
title: 'Project 3',
|
|
subtitle: 'Author 1',
|
|
icon: 'https://cdn.modrinth.com/data/pzd7e1y0/a00d7bc1cec363bb4e678da82f33da5708e8a30a.png',
|
|
id: 'ejnfwfinj',
|
|
},
|
|
{
|
|
title: 'Project 3',
|
|
subtitle: 'Author 1',
|
|
icon: 'https://cdn.modrinth.com/data/pzd7e1y0/a00d7bc1cec363bb4e678da82f33da5708e8a30a.png',
|
|
id: 'ejnfwfinj',
|
|
}
|
|
]"
|
|
/>
|
|
|
|
</DemoContainer>
|
|
|
|
```vue
|
|
<SearchDropdown
|
|
placeholder="Search for dependencies"
|
|
@on-selected="onSelected"
|
|
v-model="text"
|
|
disabled
|
|
render-up
|
|
circled-icons
|
|
:options="[
|
|
{
|
|
title: 'Project 1',
|
|
subtitle: 'Author 1',
|
|
icon: 'https://cdn.modrinth.com/data/pzd7e1y0/a00d7bc1cec363bb4e678da82f33da5708e8a30a.png',
|
|
...
|
|
},
|
|
...
|
|
]"
|
|
/>
|
|
```
|