Responsive

Componentes para mostrar/ocultar contenido basado en el tamaño de pantalla.

Importar

import { Show, Hide } from 'asterui'

Breakpoints

Usa los mismos breakpoints que Tailwind CSS:

Breakpoint	Ancho mínimo
xs	0px
sm	640px
md	768px
lg	1024px
xl	1280px
2xl	1536px

Ejemplos

Mostrar arriba del breakpoint

Muestra contenido solo en pantallas medianas y superiores.

</>

Visible on md and larger

import { Show, Button } from 'asterui'

function App() {
  return (
      <Show above="md">
        <Button color="primary">Visible on md and larger</Button>
      </Show>
    )
}

export default App

Ocultar debajo del breakpoint

Oculta contenido en pantallas pequeñas.

</>

This is hidden on small screens

import { Hide, Alert } from 'asterui'

function App() {
  return (
      <Hide below="md">
        <Alert type="info">This is hidden on small screens</Alert>
      </Hide>
    )
}

export default App

Mostrar en breakpoints específicos

Muestra contenido solo en breakpoints específicos.

</>

Tablet or small desktop (md/lg)

import { Show, Alert } from 'asterui'

function App() {
  return (
      <Show at="xs">
        <Alert type="info">Mobile view (xs)</Alert>
      </Show>
      <Show at="sm">
        <Alert type="warning">Small screen (sm)</Alert>
      </Show>
      <Show at={['md', 'lg']}>
        <Alert type="success">Tablet or small desktop (md/lg)</Alert>
      </Show>
      <Show at={['xl', '2xl']}>
        <Alert type="info">Large desktop (xl/2xl)</Alert>
      </Show>
    )
}

export default App

Mostrar entre breakpoints

Muestra contenido dentro de un rango de breakpoints.

</>

Responsive Content

Visible on sm, md, and lg screens only

import { Show, Card } from 'asterui'

function App() {
  return (
      <Show between={['sm', 'lg']}>
        <Card title="Responsive Content" className="bg-base-200">
          Visible on sm, md, and lg screens only
        </Card>
      </Show>
    )
}

export default App

Diseño responsivo

Construye diferentes diseños para móvil y escritorio.

</>

Logo

HomeAboutContact

import { Show, Hide, Flex, Button } from 'asterui'

function App() {
  return (
      <Flex justify="between" align="center" className="p-4 bg-base-200 rounded-lg">
        <div className="font-bold">Logo</div>
        <Show above="md">
          <Flex gap="md">
            <Button variant="ghost" size="sm">
              Home
            </Button>
            <Button variant="ghost" size="sm">
              About
            </Button>
            <Button variant="ghost" size="sm">
              Contact
            </Button>
          </Flex>
        </Show>
        <Hide above="md">
          <Button variant="ghost" size="sm">
            Menu
          </Button>
        </Hide>
      </Flex>
    )
}

export default App

API

Show / Hide

Propiedad	Descripción	Tipo	Predeterminado
children	Contenido a mostrar/ocultar	React.ReactNode	-
above	Mostrar/ocultar en este breakpoint y superiores	Breakpoint	-
below	Mostrar/ocultar debajo de este breakpoint	Breakpoint	-
at	Mostrar/ocultar exactamente en este breakpoint (o array de breakpoints)	Breakpoint | Breakpoint[]	-
between	Mostrar/ocultar entre dos breakpoints (inclusivo)	[Breakpoint, Breakpoint]	-
data-testid	ID de prueba para pruebas	string	-

Notas

• Usa JavaScript para detectar breakpoint, no media queries CSS
• Solo una prop de condición (above, below, at, o between) debe usarse a la vez
• El renderizado del lado del servidor por defecto es de ancho 1024px (breakpoint lg)

Ver también: hook useBreakpoint para acceso programático a información de breakpoint.