Componentes de Layout

Componentes estructurales para construir páginas de plugin — Page, PageHeader, Layout, Card, Box, BlockStack, InlineStack y Divider.

Los componentes de layout proporcionan el andamiaje estructural para las páginas de tu plugin. Se encargan del espaciado, la agrupación y la jerarquía visual.

Page

Contenedor de nivel superior para una página de plugin. Cada página debe estar envuelta en Page.

import { Page, PageHeader } from "./components/whatalo-ui";

function DashboardPage() {
  return (
    <Page>
      <PageHeader
        title="Dashboard"
        description="Overview of your plugin data"
      />
      {/* Page content */}
    </Page>
  );
}

PageHeader

Muestra el título de la página con una descripción opcional. Colócalo inmediatamente después de Page como primer hijo.

<PageHeader
  title="Settings"
  description="Configure your plugin preferences"
/>

Layout

Contenedor de layout basado en secciones. Usa Layout.Section para dividir el contenido en áreas distintas.

import { Layout, Card } from "./components/whatalo-ui";

<Layout>
  <Layout.Section>
    <Card>Main content</Card>
  </Layout.Section>
  <Layout.Section>
    <Card>Secondary content</Card>
  </Layout.Section>
</Layout>

Card

Contenedor de contenido con borde sutil y fondo. Úsalo para agrupar visualmente contenido relacionado.

import { Card, Text } from "./components/whatalo-ui";

<Card>
  <Text>Simple card content</Text>
</Card>

Box

Contenedor genérico con control de padding y margin. Úsalo cuando necesites espaciado sin el tratamiento visual de un Card.

import { Box, Text } from "./components/whatalo-ui";

<Box>
  <Text>Content in a box</Text>
</Box>

BlockStack

Apila los hijos verticalmente con un espacio consistente entre elementos.

import { BlockStack, Text } from "./components/whatalo-ui";

<BlockStack>
  <Text>Item 1</Text>
  <Text>Item 2</Text>
  <Text>Item 3</Text>
</BlockStack>

InlineStack

Organiza los hijos horizontalmente con un espacio consistente entre elementos. Útil para grupos de botones y pares etiqueta/valor.

import { InlineStack, Button } from "./components/whatalo-ui";

<InlineStack>
  <Button>Save</Button>
  <Button variant="secondary">Cancel</Button>
</InlineStack>

Divider

Línea separadora horizontal. Úsala dentro de BlockStack para separar visualmente secciones de contenido.

import { BlockStack, Divider, Text } from "./components/whatalo-ui";

<BlockStack>
  <Text>Above the divider</Text>
  <Divider />
  <Text>Below the divider</Text>
</BlockStack>

On this page