Data List
Disposition semantique de metadonnees cle-valeur pour afficher des etiquettes avec des valeurs. Installez Data List depuis le registre VLLNT UI avec la CLI shadcn.
Disposition semantique de metadonnees cle-valeur pour afficher des etiquettes avec des valeurs. Fait partie de la famille data dans VLLNT UI, il est publie comme entree de registre lisible par machine — copiez la source directement dans votre application avec la CLI shadcn et possedez-la, sans dependance d'execution a une bibliotheque de composants.
Apercu
Basculez entre clair et sombre pour inspecter l'apercu Storybook integre.
Installation
Ajoutez Data List a votre projet avec la CLI shadcn. La source arrive dans votre code, prete a etre adaptee :
pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/data-list.jsonSource
"use client";
import * as React from "react";
import { cva, type VariantProps } from "class-variance-authority";
import { cn } from "../../lib/utils";
const dataListVariants = cva(
"grid rounded-xl border bg-card text-card-foreground",
{
defaultVariants: {
density: "default",
},
variants: {
density: {
compact: "divide-y",
default: "divide-y",
},
},
},
);
const dataListItemVariants = cva(
"grid gap-1 p-4 sm:grid-cols-[minmax(0,12rem)_1fr] sm:gap-4 sm:px-5",
{
defaultVariants: {
density: "default",
},
variants: {
density: {
compact: "py-3",
default: "py-4",
},
},
},
);
type DataListContextValue = {
density: NonNullable<VariantProps<typeof dataListVariants>["density"]>;
};
const DataListContext = React.createContext<DataListContextValue>({
density: "default",
});
export type DataListProps = React.HTMLAttributes<HTMLDListElement> &
VariantProps<typeof dataListVariants>;
const DataList = ({
className,
density,
ref: reference,
...props
}: DataListProps & { ref?: React.Ref<HTMLDListElement> }) => {
const resolvedDensity = density ?? "default";
const contextValue = React.useMemo<DataListContextValue>(
() => ({ density: resolvedDensity }),
[resolvedDensity],
);
return (
<DataListContext.Provider value={contextValue}>
<dl
className={cn(
dataListVariants({ density: resolvedDensity }),
className,
)}
ref={reference}
{...props}
/>
</DataListContext.Provider>
);
};
DataList.displayName = "DataList";
export type DataListItemProps = React.HTMLAttributes<HTMLDivElement> &
VariantProps<typeof dataListItemVariants>;
const DataListItem = ({
className,
density,
ref: reference,
...props
}: DataListItemProps & { ref?: React.Ref<HTMLDivElement> }) => {
const context = React.use(DataListContext);
return (
<div
className={cn(
dataListItemVariants({ density: density ?? context.density }),
className,
)}
ref={reference}
{...props}
/>
);
};
DataListItem.displayName = "DataListItem";
const DataListLabel = ({
className,
ref: reference,
...props
}: React.HTMLAttributes<HTMLElement> & { ref?: React.Ref<HTMLElement> }) => (
<dt
className={cn("text-sm font-medium text-muted-foreground", className)}
ref={reference}
{...props}
/>
);
DataListLabel.displayName = "DataListLabel";
const DataListValue = ({
className,
ref: reference,
...props
}: React.HTMLAttributes<HTMLElement> & { ref?: React.Ref<HTMLElement> }) => (
<dd
className={cn("m-0 text-sm leading-6 text-foreground", className)}
ref={reference}
{...props}
/>
);
DataListValue.displayName = "DataListValue";
export {
DataList,
DataListItem,
dataListItemVariants,
DataListLabel,
DataListValue,
dataListVariants,
};
Stories
Explorez chaque variante et etat dans le Storybook interactif :
Apercu
Basculez entre clair et sombre pour inspecter l'apercu Storybook integre.