103 lines
2.3 KiB
Vue
103 lines
2.3 KiB
Vue
<script setup>
|
|
import * as demoCode from '@/views/demos/forms/form-elements/combobox/demoCodeCombobox'
|
|
</script>
|
|
|
|
<template>
|
|
<VRow class="match-height">
|
|
<VCol
|
|
cols="12"
|
|
md="6"
|
|
>
|
|
<!-- 👉 Basic -->
|
|
<AppCardCode
|
|
title="Basic"
|
|
:code="demoCode.basic"
|
|
>
|
|
<p>With Combobox, you can allow a user to create new values that may not be present in a provided items list.</p>
|
|
|
|
<DemoComboboxBasic />
|
|
</AppCardCode>
|
|
</VCol>
|
|
|
|
<VCol
|
|
cols="12"
|
|
md="6"
|
|
>
|
|
<!-- 👉 Density -->
|
|
<AppCardCode
|
|
title="Density"
|
|
:code="demoCode.density"
|
|
>
|
|
<p>
|
|
You can use <code>Density</code> prop to reduce combobox height and lower max height of list items. Available options are: <code>default</code>, <code>comfortable</code>, and <code>compact</code>.
|
|
</p>
|
|
|
|
<DemoComboboxDensity />
|
|
</AppCardCode>
|
|
</VCol>
|
|
|
|
<VCol
|
|
cols="12"
|
|
md="6"
|
|
>
|
|
<!-- 👉 Variant -->
|
|
<AppCardCode
|
|
title="Variant"
|
|
:code="demoCode.variant"
|
|
>
|
|
<p>Use <code>solo</code>, <code>outlined</code>, <code>underlined</code>, <code>filled</code> and <code>plain</code> options of <code>variant</code> prop to change the look of combobox. </p>
|
|
|
|
<DemoComboboxVariant />
|
|
</AppCardCode>
|
|
</VCol>
|
|
|
|
<!--
|
|
<VCol
|
|
cols="12"
|
|
md="6"
|
|
>
|
|
// 👉 Multiple
|
|
<AppCardCode
|
|
title="Multiple"
|
|
:code="demoCode.multiple"
|
|
>
|
|
<p>Previously known as tags - user is allowed to enter more than 1 value</p>
|
|
|
|
<DemoComboboxMultiple />
|
|
</AppCardCode>
|
|
</VCol>
|
|
-->
|
|
|
|
<VCol
|
|
cols="12"
|
|
md="6"
|
|
>
|
|
<!-- 👉 No data with chips -->
|
|
<AppCardCode
|
|
title="No data with chips"
|
|
:code="demoCode.noDataWithChips"
|
|
>
|
|
<p>Previously known as tags - user is allowed to enter more than 1 value</p>
|
|
|
|
<DemoComboboxNoDataWithChips />
|
|
</AppCardCode>
|
|
</VCol>
|
|
|
|
<VCol
|
|
cols="12"
|
|
md="6"
|
|
>
|
|
<!-- 👉 Clearable -->
|
|
|
|
<AppCardCode
|
|
title="Clearable"
|
|
:code="demoCode.clearable"
|
|
>
|
|
<p>Use <code>clearable</code> prop to clear combobox.</p>
|
|
|
|
<DemoComboboxClearable />
|
|
</AppCardCode>
|
|
</VCol>
|
|
</VRow>
|
|
</template>
|