nili/ui
enfaartr
Tüm bileşenler

ActivityFeed

Genel görünüm
24 export3 varyant ekseni36 prop4 dosya
import { ActivityFeed, ActivityFeedFile, ActivityFeedFooter, ActivityFeedHeader, ActivityFeedItemType, ActivityFeedKey } 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.

Öğe türleri

Dört tür satır: düz metin, eylemli bir satır, dosya taşıyan bir satır ve bir iletiyi aktaran bir satır. Tür hangi yuvanın çizileceğine karar verir ve yuvalar çocuk değil prop’tur; böylece bir satır yanlış kurulamaz.

  • AL
    Ada Lovelace yorum yaptı
    Tasarım sistemi

    Bence iyi görünüyor — yayımlıyorum.

  • GH
    Grace Hopper çalışma alanına katılmak istiyor
  • KJ
    Katherine Johnson bir dosya paylaştı
    annual-report.pdf(4mb)
  • RP
    Radia Perlman yanıtladı
    İncelemeyi perşembe sabahına alabilir miyiz?
import { ActivityFeedItem, Avatar, Button } from "@nili/ui"

export function Example() {
  return (
    <>
      <ActivityFeedItem
        type="basic"
        avatar={<Avatar size="sm" name="Ada Lovelace" tone="blue" />}
        title="Ada Lovelace commented"
        timestamp="8 min ago"
        subject="Design system"
        description="This looks good to me — shipping it."
      />

      <ActivityFeedItem
        type="button"
        avatar={<Avatar size="sm" name="Grace Hopper" tone="purple" />}
        title="Grace Hopper wants to join"
        timestamp="1 h ago"
        actions={
          <>
            <Button size="xs">Accept</Button>
            <Button size="xs" appearance="stroke">Decline</Button>
          </>
        }
      />

      <ActivityFeedItem
        type="file"
        title="Katherine shared a file"
        file={{ name: "annual-report.pdf", size: "4mb", href: "#" }}
      />

      <ActivityFeedItem
        type="message"
        title="Radia replied"
        message="Can we move the review to Thursday?"
      />
    </>
  )
}

Okunmamış ve seçilebilir satırlar

onSelect başlığı kartın üzerine yayılan gerçek bir düğmeye çevirir — böylece satır tıklanabilir olurken içindeki eylemler ve menü kendi ayrı, odaklanabilir düğmeleri olarak kalır. Sarmalayıcıda onClick taşıyan bir satır hepsini yutardı.

  • AL
    Yeni
    Tasarım sistemi
  • BL
import { ActivityFeedItem } from "@nili/ui"

export function Example() {
  return (
    <>
      <ActivityFeedItem
        unread
        onSelect={() => open(notification)}
        title="Ada Lovelace mentioned you"
        timestamp="8 min ago"
        badge={<Badge size="small" color="blue" appearance="lighter">New</Badge>}
      />
      <ActivityFeedItem
        onSelect={() => open(notification)}
        title="Already read"
        timestamp="2 days ago"
      />
    </>
  )
}

Panelin tamamı

Başlık, sekme satırı ve alt bilgi, ActivityFeed’in yuvalarıdır. Sekmeler bir Tabs örneği değil, düz düğmelerdir — panel değiştirmek yerine tek bir listeyi yerinde süzerler ve buna tablist demek ekran okuyucuya yalan olurdu.

sekme: all

Bildirimler

  • AL
    Tasarım sistemi

    Yeni Badge renklerine bakabilir misiniz?

  • GH
  • KJ
import {
  ActivityFeed, ActivityFeedItem, ActivityFeedTab,
  ActivityFeedTabSeparator, ActivityFeedFooter, LinkButton,
} from "@nili/ui"

export function Example() {
  const [tab, setTab] = useState("all")

  return (
    <ActivityFeed
      label="Notifications"
      title="Notifications"
      headerAction={<LinkButton color="primary" size="sm">Mark all as read</LinkButton>}
      tabs={
        <>
          <ActivityFeedTab selected={tab === "all"} onClick={() => setTab("all")}>
            All
          </ActivityFeedTab>
          <ActivityFeedTab
            selected={tab === "unread"}
            onClick={() => setTab("unread")}
            count={3}
          >
            Unread
          </ActivityFeedTab>
          <ActivityFeedTabSeparator />
          <ActivityFeedTab selected={tab === "mentions"} onClick={() => setTab("mentions")}>
            Mentions
          </ActivityFeedTab>
        </>
      }
      footer={
        <ActivityFeedFooter
          hint={<><ActivityFeedKey>↑</ActivityFeedKey><ActivityFeedKey>↓</ActivityFeedKey> to navigate</>}
          action={<LinkButton href="#" size="sm">See all activity</LinkButton>}
        />
      }
    >
      …
    </ActivityFeed>
  )
}