Bommels05/Modrinth
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Modrinth/docs/components/search-dropdown.md
Adrian O.V ae7f7e9bd6
Search dropdown (#91) 
* Bar charts

* Update package.json

* Search Dropdown

* Add circle icon option
2023-09-13 16:21:13 -04:00

2.2 KiB
Raw Blame History

Search Dropdown

{{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', } ]" />

<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',
      ...
    },
    ...
  ]"
/>