nili/ui
enfaartr
كل المكوّنات

KeyComponents

عرض شامل
٣٤ تصدير٠ محور تنويع٦٩ خاصيّة٨ ملف
import { ChartLegend, ChartLegendDot, ContentCard, ContentLabel, ControlLabel, HintText } from '@nili/ui';

هذه صفحة العرض الشامل الخاصة بالمكتبة، معروضة حيّة. غيّر اللغة أو السمة من الأعلى وسَتتبعك.

التسمية

تسمية الحقل التي يستخدمها كل إدخال. والنجمة والتسمية الفرعية مخفيتان عن التقنيات المساعدة — فالإلزام تحمله خاصية required في الإدخال نفسه، وقارئ الشاشة الذي يسمع «رقم الهاتف نجمة اختياري» قيل له الشيء نفسه ثلاث مرات، مرتين منها متناقضتان.

نسيتها؟
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>
    </>
  )
}

نص التلميح

السطر تحت الحقل. يلوّنه status، ويضيف icon الرمز المناسب. وحالة error هي ما يرسمه Text Input حين تمرّر إليه error.

هذا نص تلميحي لمساعدة المستخدم.

هذا الحقل غير متاح.

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

تسمية العنصر

صف التسمية الذي يبنيه Checkbox أو Radio أو Switch داخليًا — تسمية وتسمية فرعية وشارة ووصف وإجراء. وهو مُصدَّر لأن عنصرًا مخصّصًا ينبغي أن يبدو كالعناصر المدمجة.

(مستحسن)مجانيلن نراسلك إلا بشأن ما طلبته.إدارة
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>}
    />
  )
}

قوة كلمة المرور

أربعة مستويات. والمقياس وحده زخرفي — مرِّر label كي يُكتب الحكم لا أن يُترك للون.

كلمة مرور ضعيفة
يمكن أن تكون أقوى
كلمة مرور قوية
import { PasswordStrength, TextInput } from "@nili/ui"

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

الأيقونة المفتاحية

الأيقونة المؤطّرة التي تتصدّر نافذة أو حالة فارغة أو بطاقة محتوى. مظهران وعشرة ألوان وخمسة أحجام.

lighter
stroke
الأحجام
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>
    </>
  )
}

مفتاح الرسم البياني

مع onToggle يُرسم زرًّا بـaria-pressed، لأن تبديل سلسلة عنصر تحكّم. وبدونه نص عادي. وvalue منسّقة مسبقًا — فالأرقام قرار لغوي لا قرار المفتاح.

قابل للتبديل (انقر واحدًا)
النقاط
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" />
    </>
  )
}

تسمية المحتوى وبطاقة المحتوى

عنوان مع فتحة متقدّمة وأخرى خلفية اختياريتين. ويرسم فيجما ستة أنواع — صورة رمزية وأيقونة وعلامة وشركة — وكلها startAdornment نفسها. وContent Card هي النسخة القابلة للاختيار.

AL
Ada Lovelaceالمالك · ada@nili.design
نظام التصميمخاص٢٤ مكوّنًا · حُدّث قبل يومينv0.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>}
      />
    </>
  )
}