> Box

Box

La Box doit être utilisé pour tout contenir, à la manière d'une <div>. De type View (tamagui), elle permet de définir le tag rendu en web.

TagscoreExemples4StylesDisponibles

BoxDefault

Contenu par défaut

export const BoxDefault = () => (
  <Box tag="box">
    <Typography>Contenu par défaut</Typography>
  </Box>
);

BoxPadded

Box avec padding

export const BoxPadded = () => (
  <Box tag="padded" p={16}>
    <Typography>Box avec padding</Typography>
  </Box>
);

BoxPaddedWithBackground

Box avec fond gris clair et padding

export const BoxPaddedWithBackground = () => (
  <Box tag="padded-with-background" backgroundColor={'#f0f0f0'} p={16}>
    <Typography>Box avec fond gris clair et padding</Typography>
  </Box>
);

BoxHovered

Box avec fond gris changeant au hover

export const BoxHovered = () => (
  <Box tag="hovered" hoverStyle={{ background: '#f0f0f0' }}>
    <Typography>Box avec fond gris changeant au hover</Typography>
  </Box>
);

Alveole UI Kit — v1.8.4