mirrors/vue-select
2
0
Fork 0
mirror of https://github.com/tenrok/vue-select.git synced 2026-06-16 09:10:33 +03:00
Code Activity

progress on docs rewrite

Browse Source
This commit is contained in:
Jeff Sagal
2022-12-09 14:17:53 -08:00
parent f7ed11eb06
commit 0b65907a8e
10 changed files with 236 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/content/guide/install.md
+10 -7
View File
@@ -27,7 +27,6 @@ app.component('vSelect', vSelect);
### Local Registration
```vue
<script>
import vSelect from 'vue-select'
@@ -41,6 +40,8 @@ export default {
</template>
```
### CSS
The component itself does not include any CSS. You'll need to include it separately:
```js
@@ -62,8 +63,8 @@ global variable. You'll need to load Vue.js, vue-select JS & vue-select CSS.
<link rel="stylesheet" href="https://unpkg.com/vue-select@latest/dist/vue-select.css">
<!-- or point to a specific vue-select release -->
<script src="https://unpkg.com/vue-select@3.0.0"></script>
<link rel="stylesheet" href="https://unpkg.com/vue-select@3.0.0/dist/vue-select.css">
<script src="https://unpkg.com/vue-select@4.0.0"></script>
<link rel="stylesheet" href="https://unpkg.com/vue-select@4.0.0/dist/vue-select.css">
```
Then register the component in your javascript:
@@ -79,7 +80,9 @@ url: dJjzeP
## Vue Compatibility
| Vue | Vue Select | Notes |
|------|------------|----------------------------------------------------------------------------|
| ^2.3 | 3.x | The 3.x branch of Vue Select supports Vue 2.3 and above. View the v3 docs. |
| ^3.0 | 4.0-beta | The latest version of Vue Select for Vue 3 applications. |
You're currently reading the docs for version 4 of Vue Select, which is designed for Vue 3.
| Vue | Vue Select | Docs |
|------|------------|---------------------------|
| ^2.3 | 3.0 | https://v3.vue-select.org |
| ^3.0 | 4.0 | https://vue-select.org |
docs/content/index.md
+39 -17
View File
@@ -7,34 +7,56 @@ description: Everything you wish the HTML select element could do, shipped as a
---
:::lead
Everything you wish the HTML `<select>` element could do, wrapped up into a lightweight, extensible Vue component.
Vue Select is a feature rich combobox component. You might know it as a dropdown or
typeahead select. They're a staple on the web, and they're notoriously tough to get right!
:::
Vue Select provides a default template that fits most use cases. The component is designed
to be as lightweight as possible, while maintaining high standards for accessibility, developer
experience, and customization.
:::quick-links
:::quick-link{title="Installation" icon="installation" href="/"}
Step-by-step guides to setting up your system and installing the library.
:::quick-link{title="Installation" href="/guide/install"}
Step-by-step instructions to install Vue Select in your project. Couple lines and you're done!
#icon
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5M16.5 12L12 16.5m0 0L7.5 12m4.5 4.5V3" />
</svg>
:::
:::quick-link{title="Architecture guide" icon="presets" href="/"}
Learn how the internals work and contribute.
:::
:::quick-link{title="Options and Selections" href="/"}
You'll need to register some options so your users can select them.
:::quick-link{title="Plugins" icon="plugins" href="/"}
Extend the library with third-party plugins or write your own.
:::
:::quick-link{title="API reference" icon="theming" href="/"}
Learn to easily customize and modify your app's visual design to fit your brand.
:::
#icon
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M3 4.5h14.25M3 9h9.75M3 13.5h9.75m4.5-4.5v12m0 0l-3.75-3.75M17.25 21L21 17.25" />
</svg>
:::
:::quick-link{title="Customizing" href="/"}
Vue Select is plug-and-play by design, but you can always customize the look and feel.
Vue Select is a feature rich select/dropdown/typeahead component. It provides a default
template that fits most use cases for a filterable select dropdown. The component is designed to be as
lightweight as possible, while maintaining high standards for accessibility,
developer experience, and customization.
#icon
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10" />
</svg>
:::
:::quick-link{title="Premium Resources" icon="theming" href="/"}
Pre-built Vue Select instances with custom themes and features. Infinite scroll, remote option
loading and more.
#icon
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M2.25 18.75a60.07 60.07 0 0115.797 2.101c.727.198 1.453-.342 1.453-1.096V18.75M3.75 4.5v.75A.75.75 0 013 6h-.75m0 0v-.375c0-.621.504-1.125 1.125-1.125H20.25M2.25 6v9m18-10.5v.75c0 .414.336.75.75.75h.75m-1.5-1.5h.375c.621 0 1.125.504 1.125 1.125v9.75c0 .621-.504 1.125-1.125 1.125h-.375m1.5-1.5H21a.75.75 0 00-.75.75v.75m0 0H3.75m0 0h-.375a1.125 1.125 0 01-1.125-1.125V15m1.5 1.5v-.75A.75.75 0 003 15h-.75M15 10.5a3 3 0 11-6 0 3 3 0 016 0zm3 0h.008v.008H18V10.5zm-12 0h.008v.008H6V10.5z" />
</svg>
:::
:::
## Features