nili/ui
enfaartr
Tüm bileşenler

ColorPicker

Genel görünüm
17 export2 varyant ekseni34 prop4 dosya
import { ColorDot, ColorPicker, ColorSlider, ColorSpectrum } 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.

Renk noktası

Bir örnek düğmesi. On palet rengi ya da value üzerinden herhangi bir CSS rengi. aria-label zorunludur — renkli bir dairenin kendine ait erişilebilir adı yoktur.

palet (birine tıklayın)
serbest değerler
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" />
    </>
  )
}

Renk seçici

Tayf, ton rayı ve bir onaltılık alan. defaultValue ile denetimsiz ya da value artı onChange ile denetimli — bu, saydamsızlık açıkken alfa çiftini de içeren bir onaltılık dizeyle tetiklenir.

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

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

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

Saydamsızlık ve örnekler

withOpacity alfa rayını ekler ve onaltılık alanı sekiz haneye geçirir. swatches, denetimlerin altındaki son kullanılan ya da marka renkleri satırıdır.

saydamsızlıkla
80%
Recommended Colors
örneklerle
100%
Recommended Colors
import { ColorPicker } from "@nili/ui"

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

Alt bilgi ve etiketler

footer onaltılık alanın altında durur — seçici bir açılır katmandaysa genelde bir onay düğmesi. Görünen her dize bir prop’tur; bileşen kendi çeviri yığınını taşımaz.

100%
Kayıtlı renkler
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>}
    />
  )
}