nili/ui
enfaartr
Tüm bileşenler

ContentDivider

Genel görünüm
12 export6 varyant ekseni10 prop3 dosya
import { ContentDivider, ContentDividerAlign, ContentDividerSpacing, ContentDividerType } 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.

Çizgiler

Çocuğu yoksa düz bir ayraçtır. spacing çevresindeki dikey boşluğu belirler; type adlandırılmış Figma ön ayarlarından birini seçer.

spacing=none

Üstte

Altta

spacing=sm

Üstte

Altta

spacing=md

Üstte

Altta

spacing=lg

Üstte

Altta

import { ContentDivider } from "@nili/ui"

export function Example() {
  return (
    <>
      <ContentDivider type="line" />
      <ContentDivider type="line-spacing" />

      {/* the same thing, spelled as the axis */}
      <ContentDivider spacing="none" />
      <ContentDivider spacing="md" />
    </>
  )
}

Metinle

Dize olan bir çocuk etiket olarak çizilir. text-and-line onu iki çizgi arasında ortalar; text başa yalnız koyar; solid-text dolu çipi verir.

text-and-line
OR
text
solid-text
import { ContentDivider } from "@nili/ui"

export function Example() {
  return (
    <>
      <ContentDivider type="text-and-line">{t('text.or')}</ContentDivider>
      <ContentDivider type="text">{t('text.today')}</ContentDivider>
      <ContentDivider type="solid-text">
              {t('text.newMessages')}
            </ContentDivider>
    </>
  )
}

Hizalama

align içeriğin çizgi üzerinde nerede duracağını belirler. Mantıksaldır, start okuma yönünü izler.

başta
ortada
sonda
import { ContentDivider } from "@nili/ui"

export function Example() {
  return (
    <>
      <ContentDivider align="start" spacing="sm">Start</ContentDivider>
      <ContentDivider align="center" spacing="sm">Center</ContentDivider>
      <ContentDivider align="end" spacing="sm">End</ContentDivider>
    </>
  )
}

Denetimlerle

Dört düğme ön ayarı yalnızca çocuk olarak ne verdiğinizde ayrışır — kompakt bir düğme, bunlardan bir grup, metin düğmesi. Geometri aynı; adlar kurduğunuz duruma göredir.

icon-button
icon-button-group
text-button
import { ContentDivider, Button, CompactButton, Icon } from "@nili/ui"
import { RiAddLine, RiMore2Fill } from "@remixicon/react"

export function Example() {
  return (
    <>
      <ContentDivider type="icon-button">
        <CompactButton
                  appearance="stroke"
                  fullRadius
                  aria-label={t('controls.add')}
                >
          <Icon icon={RiAddLine} />
        </CompactButton>
      </ContentDivider>

      <ContentDivider type="text-button">
        <Button size="2xs" appearance="stroke">Show more</Button>
      </ContentDivider>
    </>
  )
}

Dikey

Dikey yönelim bir satırdaki öğeleri ayırır — bir araç çubuğu, bir istatistik kümesi. Kapsayıcısının yüksekliğine uzar.

12 open4 closed2 draft
import { ContentDivider } from "@nili/ui"

export function Example() {
  return (
    <div className="flex h-10 items-center gap-3">
      <span>{t('vertical.open')}</span>
      <ContentDivider orientation="vertical" />
      <span>{t('vertical.closed')}</span>
      <ContentDivider orientation="vertical" />
      <span>{t('vertical.draft')}</span>
    </div>
  )
}