Textarea (文本域)

<script setup lang="ts">
import { ref } from 'vue'
const text = ref('')
</script>

<template>
  <div class="w-full max-w-md">
    <KunTextarea
      v-model="text"
      label="Bio"
      placeholder="Tell us about yourself"
      description="A short description about yourself."
      :rows="4"
    />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
const text = ref('')
</script>

<template>
  <div class="w-full max-w-md">
    <KunTextarea
      v-model="text"
      label="Bio"
      placeholder="高度随内容自动增长,并显示字数"
      :rows="2"
      :maxlength="200"
      auto-grow
      show-char-count
    />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
const a = ref('')
const b = ref('Locked content')
</script>

<template>
  <div class="grid w-full max-w-md gap-4">
    <KunTextarea v-model="a" label="With error" error="Please enter a message." :rows="3" />
    <KunTextarea v-model="b" label="Disabled" disabled :rows="3" />
    <KunTextarea v-model="a" label="Small" size="sm" placeholder="size=sm" :rows="3" />
    <KunTextarea v-model="a" label="Large" size="lg" placeholder="size=lg" :rows="3" />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
const text = ref('')
</script>

<template>
  <div class="grid w-full max-w-md gap-4">
    <KunTextarea v-model="text" color="primary" placeholder="primary" :rows="2" />
    <KunTextarea v-model="text" color="secondary" placeholder="secondary" :rows="2" />
    <KunTextarea v-model="text" color="success" placeholder="success" :rows="2" />
    <KunTextarea v-model="text" color="warning" placeholder="warning" :rows="2" />
    <KunTextarea v-model="text" color="danger" placeholder="danger" :rows="2" />
  </div>
</template>