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

ColorPicker

نمای کلی
۱۷ اکسپورت۲ محور واریانت۳۴ پراپ۴ فایل
import { ColorDot, ColorPicker, ColorSlider, ColorSpectrum } from '@nili/ui';

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

نقطهٔ رنگ

یک دکمهٔ نمونه‌رنگ. ده رنگ پالت، یا هر رنگ CSS از طریق value. aria-label الزامی است — یک دایرهٔ رنگی نام دسترس‌پذیری از خودش ندارد.

پالت (یکی را بزنید)
مقدارهای دلخواه
import { ColorDot } from "@nili/ui"

export function Example() {
  const [selected, setSelected] = useState("blue")

  return (
    <>
      {palette.map((color) => (
        <ColorDot
          key={color}
          color={color}
          aria-label={color}
          selected={selected === color}
          onClick={() => setSelected(color)}
        />
      ))}

      {/* an arbitrary colour */}
      <ColorDot value="#0E121B" aria-label="Ink" />
    </>
  )
}

انتخابگر رنگ

طیف، ریل فام و یک فیلد هگز. با defaultValue بدون کنترل، یا با value به‌همراه onChange کنترل‌شده — که با یک رشتهٔ هگز صدا زده می‌شود، و وقتی کدری روشن است جفت آلفا را هم دارد.

100%
Recommended Colors
#335CFF
import { ColorPicker } from "@nili/ui"

export function Example() {
  const [color, setColor] = useState("#335CFF")

  return <ColorPicker value={color} onChange={setColor} />
}

کدری و نمونه‌رنگ‌ها

withOpacity ریل آلفا را اضافه می‌کند و فیلد هگز را به هشت رقم می‌برد. swatches همان ردیف رنگ‌های اخیر یا برند زیر کنترل‌هاست.

با کدری
80%
Recommended Colors
با نمونه‌رنگ‌ها
100%
Recommended Colors
import { ColorPicker } from "@nili/ui"

export function Example() {
  return (
    <ColorPicker
      withOpacity
      defaultValue="#7D52F4CC"
      swatches={["#335CFF", "#1FC16B", "#FB3748", "#F6B51E", "#7D52F4"]}
    />
  )
}

پابرگ و برچسب‌ها

footer زیر فیلد هگز می‌نشیند — معمولاً یک دکمهٔ تأیید، وقتی انتخابگر داخل پاپ‌اور است. هر رشتهٔ دیده‌شدنی یک پراپ است، پس کامپوننت پشتهٔ ترجمهٔ خودش را همراه نمی‌برد.

100%
رنگ‌های ذخیره‌شده
import { ColorPicker, Button } from "@nili/ui"

export function Example() {
  return (
    <ColorPicker
      withOpacity
      defaultValue="#FB3748"
      swatches={swatches}
      labels={{
        spectrum: "Saturation and brightness",
        hue: "Hue",
        opacity: "Opacity",
        hex: "Hex value",
        swatches: "Saved colours",
        eyedropper: "Pick a colour from the screen",
      }}
      footer={<Button size="xs" fullWidth>Apply</Button>}
    />
  )
}