Responsive

Composants pour afficher/masquer du contenu en fonction de la taille de l’écran.

Import

import { Show, Hide } from 'asterui'

Points de rupture

Utilise les mêmes points de rupture que Tailwind CSS :

Point de rupture	Largeur min
xs	0px
sm	640px
md	768px
lg	1024px
xl	1280px
2xl	1536px

Exemples

Afficher au-dessus du point de rupture

Afficher le contenu uniquement sur les écrans moyens et plus.

</>

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

Masquer en dessous du point de rupture

Masquer le contenu sur les petits écrans.

</>

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

Afficher à des points de rupture spécifiques

Afficher le contenu uniquement à des points de rupture spécifiques.

</>

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

Afficher entre des points de rupture

Afficher le contenu dans une plage de points de rupture.

</>

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

Mise en page réactive

Créez différentes mises en page pour mobile et ordinateur.

</>

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

Propriété	Description	Type	Défaut
children	Contenu à afficher/masquer	React.ReactNode	-
above	Afficher/masquer à ce point de rupture et au-dessus	Breakpoint	-
below	Afficher/masquer en dessous de ce point de rupture	Breakpoint	-
at	Afficher/masquer exactement à ce point de rupture (ou tableau de points de rupture)	Breakpoint | Breakpoint[]	-
between	Afficher/masquer entre deux points de rupture (inclus)	[Breakpoint, Breakpoint]	-
data-testid	ID de test pour les tests	string	-

Notes

• Utilise JavaScript pour détecter le point de rupture, pas les media queries CSS
• Une seule propriété de condition (above, below, at ou between) doit être utilisée à la fois
• Le rendu côté serveur utilise par défaut une largeur de 1024px (point de rupture lg)

Voir aussi : Hook useBreakpoint pour un accès programmatique aux informations de point de rupture.