BottomSheet

A material design bottom sheet.

Usage

<template>
  <Column>
    <Button @click="showBottomSheet">Show BottomSheet</Button>

    <BottomSheet v-model:visible="bottomSheetVisible" :padding="EdgeInsets.all(24)">
      <Column main-axis-size="min" :gap="16">
        <Text :style="{ fontSize: 20, fontWeight: 'bold' }">Bottom Sheet</Text>
        <Text>This is a persistent bottom sheet.</Text>
        <Button @click="bottomSheetVisible = false">Close</Button>
      </Column>
    </BottomSheet>
  </Column>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { Column, Button, BottomSheet, Text, EdgeInsets } from "fluekit";

const bottomSheetVisible = ref(false);

const showBottomSheet = () => {
  bottomSheetVisible.value = true;
};
</script>

API

Props

Name	Type	Default	Description
visible	boolean	false	Whether the bottom sheet is visible.
barrierDismissible	boolean	true	Whether the bottom sheet can be dismissed by tapping outside.
backgroundColor	string	'white'	The background color of the bottom sheet.
elevation	number	8	The z-coordinate at which to place this sheet relative to its parent.
shape	BorderRadius	-	The shape of the bottom sheet.
padding	EdgeInsets	-	The padding of the bottom sheet content.

Events

Name	Description
update:visible	Emitted when the visibility changes.
close	Emitted when the bottom sheet is closed.

Slots

Name	Description
default	The content of the bottom sheet.