Hairline

Tüm temanın okuduğu tek bir değişken aracılığıyla her ekranda tam bir cihaz pikseli genişliğinde kenarlıklar ve halkalar.

1px

inset-ring-1

hairline

inset-ring-(length:--hairline)

export function HairlineDemo() {
  return (
    <div className="grid w-full max-w-sm grid-cols-2 gap-4 text-sm">
      <div className="flex flex-col gap-2">
        <div className="flex h-24 items-center justify-center rounded-lg inset-ring-1 inset-ring-foreground/40">
          1px
        </div>
        <span className="text-center text-xs text-muted-foreground">
          inset-ring-1
        </span>
      </div>
      <div className="flex flex-col gap-2">
        <div className="flex h-24 items-center justify-center rounded-lg inset-ring-(length:--hairline) inset-ring-foreground/40">
          hairline
        </div>
        <span className="text-center text-xs text-muted-foreground">
          inset-ring-(length:--hairline)
        </span>
      </div>
    </div>
  )
}

Kurulum

Hairline, HextaUI temasının bir parçasıdır. Temayı veya herhangi bir bileşeni eklediyseniz zaten sizdedir.

pnpm dlx shadcn@latest add https://hextaui.com/r/theme.json

Ya da global CSS'inize elle ekleyin.

app/globals.css

@theme inline {
  --default-border-width: var(--hairline);
}

@utility border-hairline {
  border-width: var(--hairline);
}

:root {
  --hairline: 1px;

  @media (min-resolution: 1.5dppx) {
    --hairline: calc(1px / 1.5);
  }

  @media (min-resolution: 2dppx) {
    --hairline: 0.5px;
  }

  @media (min-resolution: 3dppx) {
    --hairline: calc(1px / 3);
  }

  @media (min-resolution: 4dppx) {
    --hairline: 0.25px;
  }
}

Kullanım

<div className="border" />
<ul className="divide-y" />
<div className="border-2 sm:border-hairline" />
<button className="inset-ring-(length:--hairline) inset-ring-border" />
<hr className="h-(--hairline) border-0 bg-border" />

Ona nadiren başvurmanız gerekir. Tema onu varsayılan kenarlık genişliği yapar; bu yüzden border, border-t ve divide-y hepsi hairline çizer. Tailwind'in varsayılanı olmayan yerlerde, halkalar, outline'lar ve arka planla çizilen çizgiler gibi, değişkeni doğrudan kullanın.

Neden hairline

Çoğu ekranda bir CSS pikseli iki veya üç fiziksel pikseli kaplar; bu yüzden 1px bir kenarlık aslında iki veya üç cihaz pikseli kalınlığındadır. --hairline ekranın piksel oranına böler; böylece her çizgi, yerel uygulamaların ayırıcıları çizdiği gibi tam bir cihaz pikseli olur. Standart bir ekranda 1px kalır.

Piksel oranı	Açıklama
`1×`	1px
`1.5×`	0.667px
`2×`	0.5px
`3×`	0.333px
`4×`	0.25px

Örnekler

Listeler ve kartlar

Düz border ve divide-y. Daha ince ayırıcılar, satırları kutulamadan gruplar.

const rows = [
  ["Plan", "Pro"],
  ["Seats", "12"],
  ["Billing", "Yearly"],
  ["Renews", "Mar 4, 2027"],
]

export function HairlineList() {
  return (
    <dl className="w-full max-w-xs divide-y rounded-xl border text-sm">
      {rows.map(([term, value]) => (
        <div key={term} className="flex justify-between px-4 py-3">
          <dt className="text-muted-foreground">{term}</dt>
          <dd>{value}</dd>
        </div>
      ))}
    </dl>
  )
}

Bilmekte fayda var

HextaUI bileşenleri kenarları kenarlıklarla değil, inset-ring-(length:--hairline) ile çizer. Bir inset ring düzende yer kaplamaz; bu yüzden halkanın rengini veya genişliğini değiştiren bir durum içeriği asla kaydırmaz.
Hairline'lar sayfada daha hafiftir; bu yüzden 1px çizgiler için ayarlanmış bir kenarlık rengi soluk görünebilir. Temanın --border değeri hairline'lar için ayarlanmıştır.
Seçili bir kart gibi vurgu için border-2 veya daha genişini kullanın. Bunlar CSS pikselinde kalır.

API referansı

Ad	Açıklama
`--hairline`	CSS pikseli cinsinden bir cihaz pikseli.
`border-hairline`	border-width değerini --hairline yapar.
`--default-border-width`	--hairline olarak ayarlanır; böylece border ve divide varsayılan olarak onu kullanır.