Split

Dos columnas con una proporción fija que se apilan debajo de un breakpoint. Sidebars, páginas de ajustes y medios con texto.

General

Workspace name, default region and the timezone used for reports.

1import { Split } from '@/components/ui/split';
2
3const links = ['General', 'Members', 'Billing', 'Integrations', 'Danger zone'];
4
5export function Default() {
6  return (
7    <Split
8      ratio="1/3"
9      collapse="sm"
10      className="border-border bg-card w-full max-w-lg rounded-xl border p-4"
11    >
12      <nav className="flex flex-col gap-1">
13        {links.map((link, index) => (
14          <a
15            key={link}
16            href="#"
17            className={
18              index === 0
19                ? 'bg-muted rounded-md px-3 py-1.5 text-sm font-medium'
20                : 'text-muted-foreground hover:text-foreground rounded-md px-3 py-1.5 text-sm'
21            }
22          >
23            {link}
24          </a>
25        ))}
26      </nav>
27      <div className="flex flex-col gap-2">
28        <p className="text-sm font-medium">General</p>
29        <p className="text-muted-foreground text-sm">
30          Workspace name, default region and the timezone used for reports.
31        </p>
32      </div>
33    </Split>
34  );
35}

Instalación

pnpm dlx nachui add split

Anatomía

1import { Split } from '@/components/ui/split';

1<Split ratio="1/3" collapse="md" gap="8">
2  <nav>Sidebar</nav>
3  <main>Contenido</main>
4</Split>

Split es una grilla de dos columnas. ratio es la parte de la primera columna, collapse es el breakpoint por debajo del cual las columnas se apilan en una. Ambos hijos conservan min-width: 0, así que el contenido largo se envuelve en lugar de ensanchar el layout. Es distinto de Separator, que dibuja una línea.

Ejemplos

Predeterminado (Default)

Una página de ajustes: navegación a la izquierda a un tercio, contenido a la derecha.

General

Workspace name, default region and the timezone used for reports.

1import { Split } from '@/components/ui/split';
2
3const links = ['General', 'Members', 'Billing', 'Integrations', 'Danger zone'];
4
5export function Default() {
6  return (
7    <Split
8      ratio="1/3"
9      collapse="sm"
10      className="border-border bg-card w-full max-w-lg rounded-xl border p-4"
11    >
12      <nav className="flex flex-col gap-1">
13        {links.map((link, index) => (
14          <a
15            key={link}
16            href="#"
17            className={
18              index === 0
19                ? 'bg-muted rounded-md px-3 py-1.5 text-sm font-medium'
20                : 'text-muted-foreground hover:text-foreground rounded-md px-3 py-1.5 text-sm'
21            }
22          >
23            {link}
24          </a>
25        ))}
26      </nav>
27      <div className="flex flex-col gap-2">
28        <p className="text-sm font-medium">General</p>
29        <p className="text-muted-foreground text-sm">
30          Workspace name, default region and the timezone used for reports.
31        </p>
32      </div>
33    </Split>
34  );
35}

Proporciones

auto ajusta la primera columna a su contenido, auto-end hace lo mismo con la segunda.

1/2

rest

1/3

rest

2/3

rest

1/4

rest

auto

rest

1import { Split, type SplitRatio } from '@/components/ui/split';
2
3const ratios: SplitRatio[] = ['1/2', '1/3', '2/3', '1/4', 'auto'];
4
5export function Ratios() {
6  return (
7    <div className="flex w-full max-w-md flex-col gap-3">
8      {ratios.map((ratio) => (
9        <Split key={ratio} ratio={ratio} collapse="none" gap="2">
10          <div className="bg-primary/10 text-primary rounded-md px-3 py-2 font-mono text-xs">
11            {ratio}
12          </div>
13          <div className="bg-muted text-muted-foreground rounded-md px-3 py-2 font-mono text-xs">
14            rest
15          </div>
16        </Split>
17      ))}
18    </div>
19  );
20}

Invertido

reverse mueve el primer hijo debajo del segundo cuando las columnas se apilan, para una imagen que debe ir primero en móvil pero al lado del texto en escritorio.

Preview every branch

Each pull request gets its own URL, seeded with a copy of staging data. On small screens the image moves above this text.

1import { AspectRatio } from '@/components/ui/aspect-ratio';
2import { Split } from '@/components/ui/split';
3
4export function Reverse() {
5  return (
6    <Split ratio="1/2" collapse="sm" align="center" reverse className="w-full max-w-lg">
7      <div className="flex flex-col gap-2">
8        <p className="text-lg font-semibold">Preview every branch</p>
9        <p className="text-muted-foreground text-sm">
10          Each pull request gets its own URL, seeded with a copy of staging data. On small screens
11          the image moves above this text.
12        </p>
13      </div>
14      <AspectRatio ratio={4 / 3} className="rounded-lg">
15        <img src="https://picsum.photos/seed/split/640/480" alt="Preview deployment" />
16      </AspectRatio>
17    </Split>
18  );
19}

Referencia de API

Split

Prop	Tipo	Por defecto	Descripción
`ratio`	`'1/2' \| '1/3' \| '2/3' \| '1/4' \| '3/4' \| 'auto' \| 'auto-end'`	`'1/2'`	Parte de la primera columna
`collapse`	`'none' \| 'sm' \| 'md' \| 'lg'`	`'md'`	Debajo de este breakpoint las columnas se apilan
`gap`	`'0' \| '2' \| '3' \| '4' \| '6' \| '8' \| '10' \| '12' \| '16'`	`'6'`	Separación entre columnas
`align`	`'start' \| 'center' \| 'end' \| 'stretch'`	`'stretch'`	Alineación vertical de las columnas
`reverse`	`boolean`	`false`	Pone el primer hijo al final mientras están apiladas
`as`	`React.ElementType`	`'div'`	Elemento a renderizar
`className`	`string`	-	Clases CSS adicionales

¿Encontraste algo que mejorar?

¿Notaste un error, tipografía o detalle faltante en esta página? Ayúdanos a mejorar la documentación abriendo un issue en GitHub.

Crear un Issue

AnteriorSpacer

SiguienteSection