> BottomSheet

BottomSheet

Bottom sheet modal

TagsuiInformationsExperimentalExemples3StylesDisponibles

Default

export const Default = () => {
  const [open, setOpen] = useState(false);
  return (
    <>
      <Box display="flex" flexDirection="row">
        <Button title="Ouvrir la modal" variant="primary" onPress={() => setOpen(true)} />
      </Box>
      <BottomSheet open={open} setOpen={setOpen} points={[80, 25]} title="Titre">
        <Typography>Children</Typography>
      </BottomSheet>
    </>
  );
};

WithAction

export const WithAction = () => {
  const [open, setOpen] = useState(false);
  return (
    <>
      <Box display="flex" flexDirection="row">
        <Button title="Ouvrir la modal" variant="primary" onPress={() => setOpen(true)} />
      </Box>
      <BottomSheet
        open={open}
        setOpen={setOpen}
        points={[50]}
        title="Titre"
        action={<Button title="Action" variant="tertiary" size="sm" />}
      >
        <Typography>Children</Typography>
      </BottomSheet>
    </>
  );
};

FitContent

export const FitContent = () => {
  const [open, setOpen] = useState(false);
  return (
    <>
      <Box display="flex" flexDirection="row">
        <Button title="Ouvrir la modal" variant="primary" onPress={() => setOpen(true)} />
      </Box>
      <BottomSheet fitContent open={open} setOpen={setOpen} title="Titre">
        <Typography height={100}>Children</Typography>
      </BottomSheet>
    </>
  );
};

Alveole UI Kit — v1.8.4