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