ListTwo

Seznam s leading, content a trailing sloty pro každou položku

Installation

pnpm dlx shadcn@latest add https://registry.ceskysoftware.cz/r/list-two.json

Usage

Preview

Default (s ikonou)

  • Nová zpráva

    Od: info@example.com

    Nové

  • Zpráva ověřena

    Podpis soudí

    OK

  • Počeká na schválení

    3 dny zbývají

    Brzy
Flush (bez pozadí a hr anic)

  • Jan Novák

    jan@example.com

  • Tým Vyvoje

    5 členů

  • Nastavení

    Upravit profil

Compact (hustější)

  • Dokument.pdf

    2.4 MB

  • Fotografie.jpg

    1.1 MB

  • Archiv.zip

    18 MB

  • Skladba.mp3

    4.7 MB

S akcenty (accent colors)

  • Položka s akcentátoremem „primary“

    Levý okraj zviražuje barvu

  • Položka s akcentátoremem „green“

    Levý okraj zviražuje barvu

  • Položka s akcentátoremem „red“

    Levý okraj zviražuje barvu

  • Položka s akcentátoremem „orange“

    Levý okraj zviražuje barvu

Import

import { ListTwo, ListTwoItem, ListTwoItemLeading, ListTwoItemContent, ListTwoItemTitle, ListTwoItemDescription, ListTwoItemTrailing, ListTwoItemIcon } from "@/registry/cs/ui/list-two/list-two" import { Mail } from "lucide-react"

Example

// Základní seznam <ListTwo> <ListTwoItem clickable> <ListTwoItemLeading> <ListTwoItemIcon color="primary"> <Mail className="size-4" /> </ListTwoItemIcon> </ListTwoItemLeading> <ListTwoItemContent> <ListTwoItemTitle>Nová zpráva</ListTwoItemTitle> <ListTwoItemDescription>Od: info@example.com</ListTwoItemDescription> </ListTwoItemContent> <ListTwoItemTrailing>→</ListTwoItemTrailing> </ListTwoItem> </ListTwo> // Varianty: default | flush | bordered | filled | compact <ListTwo variant="compact">...</ListTwo> // S accentovým pruhem <ListTwoItem accent="primary">...</ListTwoItem> // Barvy ikony: primary | secondary | blue | green | red | orange // Tvar ikony: square (výchozí) | circle // Velikost: md (výchozí) | sm <ListTwoItemIcon color="green" shape="circle" size="sm"> <Mail className="size-3.5" /> </ListTwoItemIcon>

Dependencies

https://registry.ceskysoftware.cz/r/utils.json (registry)