UI Library Starter

# Textarea

# Description

The component provides a simple textarea control.

# Connection

<template>
  <section>
    <Textarea :value.sync="textarea1" placeholder="Textarea placeholder text" />

    <Textarea
      :value.sync="textarea2"
      placeholder="Textarea placeholder text"
      error="Error text error text error text error text error text error text error text error text error text error text error text error text error text error text error text error text"
    />

    <Textarea
      disabled
      :value.sync="textarea3"
      placeholder="Textarea placeholder text"
    />
  </section>
</template>

<script>
export default {
  data() {
    return {
      textarea1: '',
      textarea2: '',
      textarea3: '',
    };
  },
};
</script>

# Render

Error text error text error text error text error text error text error text error text error text error text error text error text error text

# Styles

~/src/stylus/utils/_variables.styl

$inputs = {
  height--textarea: 200px,

  padding: 16px,

  background--default: rgba($colors.primary, $opacites.pop),
  background--error: rgba($colors.bird, $opacites.pop),
}

~/src/stylus/utils/_placeholders.styl

// Forms

$input__background($background)
  background $background

  &:hover
    background lighten($background, $effects.amount)

  &:active,
  &:focus
    background darken($background, $effects.amount)

$input
  // ...

  &__wrapper
    // ...

    &--disabled
      // ...
  
    &--error
      // ...

  &__error
    // ...

# API

controls.js

inputs.js

# Source code

@/src/components/Textarea/Textarea.vue

<template>
  <div
    class="textarea__wrapper"
    :class="{
      'textarea__wrapper--focus': control.length > 0 || isFocus,
      'textarea__wrapper--disabled': disabled,
      'textarea__wrapper--error': error && error.length > 0,
    }"
  >
    <textarea
      v-model="control"
      class="textarea__control"
      :placeholder="placeholder"
      :disabled="disabled"
      @focus="onFocusEvent"
      @blur="onBlurEvent"
      @input="onInputEvent"
    />

    <div v-if="error && error.length > 0" class="textarea__error">{{ error }}</div>
  </div>
</template>

<script>
import controls from '../../../src/mixins/controls.js';
import inputs from '../../../src/mixins/inputs.js';

export default {
  name: 'Textarea',

  mixins: [controls, inputs],
};
</script>

<style lang="stylus" scoped>
@import "~/src/stylus/_stylebase.styl";

.textarea
  &__wrapper
    @extend $input__wrapper

  &__control
    @extend $input
    height $inputs.height--textarea
    padding-top 10px
    resize none

  &__error
    @extend $input__error
    top $inputs.height--textarea
</style>

← Select →