nili/ui
enfaartr
Tüm bileşenler

TextArea

Genel görünüm
10 export5 varyant ekseni31 prop4 dosya
import { TextArea, TextAreaResize } from '@nili/ui';

Bu, kütüphanenin kendi genel görünüm sayfası — canlı olarak render ediliyor. Üstten dili veya temayı değiştirin, o da değişir.

Etiket, ipucu ve hata

Alanı geçersiz kılan şey error’ın varlığıdır; böylece kenarlık ile mesaj asla çelişmez — unutulacak ayrı bir invalid bayrağı yoktur.

Markdown desteklenir.

import { TextArea } from "@nili/ui"

export function Example() {
  return (
    <>
      <TextArea
        label="Description"
        placeholder="Tell us a little about the project…"
        hint="Markdown is supported."
        rows={4}
      />

      <TextArea
        label="Description"
        defaultValue="Too short"
        error="Please write at least twenty characters."
        rows={4}
      />
    </>
  )
}

Karakter sayacı

showCount alanın altına used / limit koyar. countLimit, maxLength da ayarlamadan yumuşak bir sınır koyar — katı bir maxLength yapıştırılan metnin sonunu sessizce yutar ki bu, kişiye sınırı aştığını göstermekten kötüdür.

0/120
200 karakterin 0 tanesi
import { TextArea } from "@nili/ui"

export function Example() {
  const [value, setValue] = useState("")

  return (
    <>
      {/* soft limit: typing past it is allowed, and shown */}
      <TextArea
        label="Bio"
        showCount
        countLimit={120}
        value={value}
        onChange={(e) => setValue(e.target.value)}
        rows={3}
      />

      {/* hard limit */}
      <TextArea label="Tweet" showCount maxLength={280} rows={3} />

      {/* custom format */}
      <TextArea
        label="Notes"
        showCount
        countLimit={200}
        formatCount={(used, limit) => `${used} of ${limit}`}
        rows={3}
      />
    </>
  )
}

Yeniden boyutlandırma tutamakları

Tarayıcının hangi tutamakları sunduğu. Varsayılan vertical; dar bir düzendeki, biçimi bozulmaması gereken bir alan için none.

resize=vertical
resize=both
resize=none
import { TextArea } from "@nili/ui"

export function Example() {
  return (
    <>
      <TextArea label="Vertical (default)" resize="vertical" rows={3} />
      <TextArea label="Both axes" resize="both" rows={3} />
      <TextArea label="Fixed" resize="none" rows={3} />
    </>
  )
}

Otomatik boyutlandırma

Kaydırmak yerine maxRows’a kadar içerikle büyür. Varsayılan kapalı: her tuş vuruşunda boyutlanan bir alan altındaki her şeyi oynatır ki bu uzun bir formda tatsızdır.

import { TextArea } from "@nili/ui"

export function Example() {
  return (
    <TextArea
      label="Message"
      autoResize
      maxRows={8}
      rows={2}
      placeholder="Type a few lines…"
    />
  )
}