Textarea

Import Permalink to "Import"

import ProximaTextarea from 'proxima-vue/field/textarea';

Playground Permalink to "Playground"

import { ref } from 'vue';
import ProximaTextarea from 'proxima-vue/field/textarea';

const value = ref('');

<ProximaTextarea
  label="Text"
  placeholder="Enter text"
  v-model="value"
/>

Autoresize Permalink to "Autoresize"

По умолчанию высота поля автоматически увеличивается или уменьшается, но вы можете это отключить: By default, the field height is automatically adjusted, but you can turn this feature off:

<ProximaTextarea
  :autoresize="false"
/>

Rows Permalink to "Rows"

Вы можете задать минимальное и максимальное количество строк: You can set the minimum and maximum number of lines:

<ProximaTextarea
  min-rows="5"
  max-rows="10"
/>

Scrollbar Permalink to "Scrollbar"

По умолчанию поле использует стилизованный скролл, указать вид скроллбара можно через пропс scrollbar: By default, the field uses a pretty scrollbar; you can specify the type of scrollbar using the scrollbar prop:

<ProximaTextarea
  label="Pretty"
  max-rows="5"
/>

<ProximaTextarea
  label="Pretty hover"
  max-rows="5"
  scrollbar="pretty-hover"
/>

<ProximaTextarea
  label="Native"
  max-rows="5"
  scrollbar="native"
/>

CSS Permalink to "CSS"

--field-textarea-line-height: 1.25em;
--field-textarea-padding-y-end: 0.5em;
--field-textarea-padding-y-start: 0.5em;
--field-textarea-overflow-x: hidden;
--field-textarea-overflow-y: scroll;
--field-textarea-resize: vertical;

--field-textarea-min-height: calc(
  var(--field-textarea-min-rows) * var(--field-textarea-line-height)
);
--field-textarea-max-height: calc(
  var(--field-textarea-max-rows) * var(--field-textarea-line-height)
);

Extends Permalink to "Extends"

Данный компонент основан на текстовом поле и поддерживает его пропсы, события, слоты, БЭМ модификаторы и кастомные свойства. This component is based on a text field and supports its props, events, slots, BEM modifiers and custom properties.