nili/ui
enfaartr
همه‌ی کامپوننت‌ها

TextArea

نمای کلی
۱۰ اکسپورت۵ محور واریانت۳۱ پراپ۴ فایل
import { TextArea, TextAreaResize } from '@nili/ui';

این همان صفحه‌ی نمای کلیِ خود کتابخانه است که زنده رندر می‌شود. زبان یا تم را از هدر عوض کنید، همراهش می‌آید.

برچسب، راهنما و خطا

وجود error است که فیلد را نامعتبر می‌کند، پس حاشیه و پیام هیچ‌وقت با هم نمی‌جنگند — پرچم جداگانه‌ای به نام invalid نیست که یادتان برود.

مارک‌داون پشتیبانی می‌شود.

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}
      />
    </>
  )
}

شمارندهٔ نویسه

showCount نسبت used / limit را زیر فیلد می‌گذارد. countLimit یک سقف نرم می‌گذارد بدون اینکه maxLength هم ست شود — maxLength سخت، انتهای یک پیست را بی‌صدا می‌بلعد، و این بدتر از آن است که به کاربر نشان دهید از حد گذشته.

۰/۱۲۰
۰ از ۲۰۰
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}
      />
    </>
  )
}

دستگیره‌های تغییر اندازه

اینکه مرورگر کدام دستگیره‌ها را بدهد. vertical پیش‌فرض است؛ 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} />
    </>
  )
}

تغییر اندازهٔ خودکار

به‌جای اسکرول، تا maxRows با محتوا رشد می‌کند. پیش‌فرض خاموش است: فیلدی که با هر کلید اندازه‌اش عوض شود همه‌چیزِ زیرش را جابه‌جا می‌کند، و این در فرم بلند آزاردهنده است.

import { TextArea } from "@nili/ui"

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