Responsive

Componentes para mostrar/ocultar conteúdo baseado no tamanho da tela.

Importação

import { Show, Hide } from 'asterui'

Breakpoints

Usa os mesmos breakpoints do Tailwind CSS:

Breakpoint	Largura Mín
xs	0px
sm	640px
md	768px
lg	1024px
xl	1280px
2xl	1536px

Exemplos

Mostrar Acima do Breakpoint

Mostra conteúdo apenas em telas médias e acima.

</>

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 Abaixo do Breakpoint

Oculta conteúdo em telas pequenas.

</>

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 em Breakpoints Específicos

Mostra conteúdo apenas em 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

Mostra conteúdo dentro de uma faixa 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

Layout Responsivo

Construa layouts diferentes para mobile e desktop.

</>

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

Propriedade	Descrição	Tipo	Padrão
children	Conteúdo para mostrar/ocultar	React.ReactNode	-
above	Mostrar/ocultar neste breakpoint e acima	Breakpoint	-
below	Mostrar/ocultar abaixo deste breakpoint	Breakpoint	-
at	Mostrar/ocultar exatamente neste breakpoint (ou array de breakpoints)	Breakpoint | Breakpoint[]	-
between	Mostrar/ocultar entre dois breakpoints (inclusivo)	[Breakpoint, Breakpoint]	-
data-testid	ID de teste para testes	string	-

Notas

• Usa JavaScript para detectar breakpoint, não media queries CSS
• Apenas uma prop de condição (above, below, at, ou between) deve ser usada por vez
• Renderização no servidor padrão é 1024px de largura (breakpoint lg)

Veja também: hook useBreakpoint para acesso programático a informações de breakpoint.