nili/ui
enfaartr
Tüm bileşenler

KeyComponents

Genel görünüm
34 export0 varyant ekseni69 prop8 dosya
import { ChartLegend, ChartLegendDot, ContentCard, ContentLabel, ControlLabel, HintText } 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

Her girdinin kullandığı alan etiketi. Yıldız ve alt etiket yardımcı teknolojiden gizlenir — zorunluluğu girdinin kendi required’ı taşır ve “Telefon Numarası yıldız isteğe bağlı” duyan bir ekran okuyucuya aynı şey üç kez, ikisi çelişkili biçimde söylenmiştir.

Unuttunuz mu?
import { Label, LinkButton } from "@nili/ui"

export function Example() {
  return (
    <>
      <Label htmlFor="a">Email address</Label>
      <Label htmlFor="b" required>Email address</Label>
      <Label htmlFor="c" sublabel="(optional)">Email address</Label>
      <Label htmlFor="d" information informationLabel="Why we ask">
        Email address
      </Label>
      <Label htmlFor="e" hint={<LinkButton href="#" size="sm">Forgot?</LinkButton>}>
        Password
      </Label>
      <Label htmlFor="f" disabled>Email address</Label>
    </>
  )
}

İpucu metni

Alanın altındaki satır. status onu renklendirir; icon uygun simgeyi ekler. error durumu, bir Text Input’a error verdiğinizde çizdiği şeydir.

Bu, kullanıcıya yardımcı olacak bir ipucu metnidir.

Bu alan kullanılamıyor.

import { HintText } from "@nili/ui"

export function Example() {
  return (
    <>
      <HintText icon>This is a hint text to help user.</HintText>
      <HintText status="error" icon>Please enter a valid email.</HintText>
      <HintText status="disabled">This field is unavailable.</HintText>
    </>
  )
}

Denetim etiketi

Checkbox, Radio ya da Switch’in içeride kurduğu etiket satırı — etiket, alt etiket, rozet, açıklama ve bir eylem. Dışa aktarıldı; çünkü özel bir denetim yerleşik olanlara benzemeli.

(önerilir)ÜcretsizSize yalnızca istediğiniz konularda e‑posta göndeririz.Yönet
import { ControlLabel, Badge, LinkButton } from "@nili/ui"

export function Example() {
  return (
    <ControlLabel
      htmlFor="notify"
      label="Email notifications"
      sublabel="(recommended)"
      badge={<Badge size="small" color="green" appearance="lighter">Free</Badge>}
      description="We will only email you about things you asked for."
      linkButton={<LinkButton href="#" size="sm">Manage</LinkButton>}
    />
  )
}

Parola gücü

Dört düzey. Ölçer tek başına süstür — label verin ki hüküm yazıyla söylensin, bir renge bırakılmasın.

Zayıf parola
Daha güçlü olabilir
Güçlü parola
import { PasswordStrength, TextInput } from "@nili/ui"

export function Example() {
  return (
    <>
      <TextInput type="password" label="Password" />
      <PasswordStrength strength="moderate" label="Could be stronger" />
    </>
  )
}

Anahtar simge

Bir kipin, boş durumun ya da içerik kartının başında duran çerçeveli simge. İki görünüm, on renk, beş boyut.

lighter
stroke
boyutlar
import { KeyIcon, Icon } from "@nili/ui"
import { RiSparkling2Line } from "@remixicon/react"

export function Example() {
  return (
    <>
      <KeyIcon color="purple"><Icon icon={RiSparkling2Line} /></KeyIcon>
      <KeyIcon color="purple" appearance="stroke"><Icon icon={RiSparkling2Line} /></KeyIcon>
      <KeyIcon color="purple" size="2xl"><Icon icon={RiSparkling2Line} /></KeyIcon>
    </>
  )
}

Grafik göstergesi

onToggle ile aria-pressed taşıyan bir düğme olarak çizilir; çünkü bir seriyi açıp kapatmak bir denetimdir. Onsuz düz metin. value önceden biçimlendirilmiştir — rakamlar göstergenin değil, yerel ayarın kararıdır.

değiştirilebilir (birine tıklayın)
noktalar
import { ChartLegend, ChartLegendDot } from "@nili/ui"

export function Example() {
  const [hidden, setHidden] = useState<string[]>([])

  return (
    <>
      {series.map((item) => (
        <ChartLegend
          key={item.key}
          color={item.color}
          value={item.value}
          hidden={hidden.includes(item.key)}
          onToggle={() => toggle(item.key)}
        >
          {item.label}
        </ChartLegend>
      ))}

      {/* just the dot */}
      <ChartLegendDot color="blue" />
    </>
  )
}

İçerik etiketi ve içerik kartı

İsteğe bağlı bir ön ve son yuvası olan bir başlık. Figma altı Type çizer — avatar, simge, marka, şirket — ve hepsi aynı startAdornment’tır. Content Card seçilebilir sürümdür.

AL
Ada LovelaceSahip · ada@nili.design
Tasarım sistemiözel24 bileşen · 2 gün önce güncellendiv0.2
import { ContentLabel, ContentCard, KeyIcon, Avatar, Icon, Badge } from "@nili/ui"
import { RiFolderLine } from "@remixicon/react"

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

  return (
    <>
      <ContentLabel
        startAdornment={<Avatar size="sm" name="Ada Lovelace" tone="blue" />}
        title="Ada Lovelace"
        description="Owner · ada@nili.design"
      />

      <ContentCard
        selected={selected === "a"}
        onSelect={() => setSelected("a")}
        startAdornment={
          <KeyIcon size="md" color="blue"><Icon icon={RiFolderLine} /></KeyIcon>
        }
        title="Design system"
        description="24 components · updated 2 days ago"
        badge={<Badge size="small" color="green" appearance="lighter">v0.2</Badge>}
      />
    </>
  )
}