176 lines
4.2 KiB
Vue
176 lines
4.2 KiB
Vue
<script setup>
|
|
import * as demoCode from '@/views/demos/forms/form-elements/textarea/demoCodeTextarea'
|
|
</script>
|
|
|
|
<template>
|
|
<VRow class="match-height">
|
|
<VCol
|
|
cols="12"
|
|
md="6"
|
|
>
|
|
<!-- 👉 Basic -->
|
|
<AppCardCode
|
|
title="Basic"
|
|
:code="demoCode.basic"
|
|
>
|
|
<p>
|
|
v-textarea in its simplest form is a multi-line text-field, useful for larger amounts of text.
|
|
</p>
|
|
|
|
<DemoTextareaBasic />
|
|
</AppCardCode>
|
|
</VCol>
|
|
|
|
<VCol
|
|
cols="12"
|
|
md="6"
|
|
>
|
|
<!-- 👉 Auto Grow -->
|
|
<AppCardCode
|
|
title="Auto Grow"
|
|
:code="demoCode.autoGrow"
|
|
>
|
|
<p>When using the <code>auto-grow</code> prop, textarea's will automatically increase in size when the contained text exceeds its size.</p>
|
|
|
|
<DemoTextareaAutoGrow />
|
|
</AppCardCode>
|
|
</VCol>
|
|
|
|
<VCol cols="12">
|
|
<!-- 👉 Variant -->
|
|
<AppCardCode
|
|
title="Variant"
|
|
:code="demoCode.variant"
|
|
>
|
|
<p>Use <code>filled</code>, <code>plain</code>, <code>outlined</code>, <code>solo</code> and <code>underlined</code> option of <code>variant</code> prop to change the look of file input.</p>
|
|
|
|
<DemoTextareaVariant />
|
|
</AppCardCode>
|
|
</VCol>
|
|
|
|
<VCol
|
|
cols="12"
|
|
md="6"
|
|
>
|
|
<!-- 👉 States -->
|
|
<AppCardCode
|
|
title="States"
|
|
:code="demoCode.states"
|
|
>
|
|
<p>Use <code>disabled</code> and <code>readonly</code> prop to change the state of textarea.</p>
|
|
|
|
<DemoTextareaStates />
|
|
</AppCardCode>
|
|
</VCol>
|
|
|
|
<VCol
|
|
cols="12"
|
|
md="6"
|
|
>
|
|
<!-- 👉 Browser autocomplete -->
|
|
<AppCardCode
|
|
title="Browser autocomplete"
|
|
:code="demoCode.browserAutocomplete"
|
|
>
|
|
<p>
|
|
The <code>autocomplete</code> prop gives you the option to enable the browser to predict user input.
|
|
</p>
|
|
|
|
<DemoTextareaBrowserAutocomplete />
|
|
</AppCardCode>
|
|
</VCol>
|
|
|
|
<VCol
|
|
cols="12"
|
|
md="6"
|
|
>
|
|
<!-- 👉 Clearable -->
|
|
<AppCardCode
|
|
title="Clearable"
|
|
:code="demoCode.clearable"
|
|
>
|
|
<p>You can clear the text from a <code>v-textarea</code> by using the <code>clearable</code> prop, and customize the icon used with the <code>clearable-icon</code> prop.</p>
|
|
|
|
<DemoTextareaClearable />
|
|
</AppCardCode>
|
|
</VCol>
|
|
|
|
<VCol
|
|
cols="12"
|
|
md="6"
|
|
>
|
|
<!-- 👉 Counter -->
|
|
<AppCardCode
|
|
title="Counter"
|
|
:code="demoCode.counter"
|
|
>
|
|
<p>
|
|
The <code>counter</code> prop informs the user of a character limit for the <code>v-textarea</code>.
|
|
</p>
|
|
|
|
<DemoTextareaCounter />
|
|
</AppCardCode>
|
|
</VCol>
|
|
|
|
<VCol
|
|
cols="12"
|
|
md="6"
|
|
>
|
|
<!-- 👉 Icons -->
|
|
<AppCardCode
|
|
title="Icons"
|
|
:code="demoCode.icons"
|
|
>
|
|
<p>The <code>append-icon</code>, <code>prepend-icon</code>, <code>append-inner-icon</code> and <code>prepend-inner-icon</code> props help add context to v-textarea.</p>
|
|
|
|
<DemoTextareaIcons />
|
|
</AppCardCode>
|
|
</VCol>
|
|
|
|
<VCol
|
|
cols="12"
|
|
md="6"
|
|
>
|
|
<!-- 👉 Rows -->
|
|
<AppCardCode
|
|
title="Rows"
|
|
:code="demoCode.rows"
|
|
>
|
|
<p>The <code>rows</code> prop allows you to define how many rows the textarea has, when combined with the <code>row-height</code> prop you can further customize your rows by defining their height.</p>
|
|
|
|
<DemoTextareaRows />
|
|
</AppCardCode>
|
|
</VCol>
|
|
|
|
<VCol
|
|
cols="12"
|
|
md="6"
|
|
>
|
|
<!-- 👉 No resize -->
|
|
<AppCardCode
|
|
title="No resize"
|
|
:code="demoCode.noResize"
|
|
>
|
|
<p><code>v-textarea</code>'s have the option to remain the same size regardless of their content's size, using the <code>no-resize</code> prop.</p>
|
|
|
|
<DemoTextareaNoResize />
|
|
</AppCardCode>
|
|
</VCol>
|
|
|
|
<VCol
|
|
cols="12"
|
|
md="6"
|
|
>
|
|
<!-- 👉 Validation -->
|
|
<AppCardCode
|
|
title="Validation"
|
|
:code="demoCode.validation"
|
|
>
|
|
<p>Use <code>rules</code> prop to validate the textarea.</p>
|
|
|
|
<DemoTextareaValidation />
|
|
</AppCardCode>
|
|
</VCol>
|
|
</VRow>
|
|
</template>
|