Vue Spring Bottom Sheet

https://vue-spring-bottom-sheet.douxcode.com/
Admin
Vue Spring Bottom Sheet is a Vue.js component that provides a customizable bottom sheet with...
Tokens:1,160
Snippets:4
Trust Score:4.6
Update:1 year ago
Show doc for...
Tokens:
Raw
### Vue Spring Bottom Sheet: Basic Usage

Source: https://vue-spring-bottom-sheet.douxcode.com/index

Demonstrates the fundamental usage of the BottomSheet component in Vue. It shows how to import the component and its styles, manage its open/close state using refs, and attach event handlers to buttons for opening and closing.

```vue
<script lang="ts" setup>
import { ref } from "vue";

import BottomSheet from "@douxcode/vue-spring-bottom-sheet";
import "@douxcode/vue-spring-bottom-sheet/dist/style.css";

const bottomSheet = ref<InstanceType<typeof BottomSheet>>();

const open = () => {
  bottomSheet.value?.open();
};

const close = () => {
  bottomSheet.value?.close();
};
</script>

<template>
  <button type="button" @click="open"> Open bottom sheet </button>
  
  <BottomSheet ref="bottomSheet"> ... </BottomSheet>
</template>

	

```

--------------------------------

### Vue Spring Bottom Sheet: Non-blocking Mode

Source: https://vue-spring-bottom-sheet.douxcode.com/index

Shows how to configure the BottomSheet to operate in a non-blocking mode. By setting the `blocking` prop to `false`, the sheet can be used as an overlay without preventing interaction with the underlying page content. This example also includes toggling the sheet's visibility and setting specific snap points.

```vue
<script lang="ts" setup>
import { ref } from "vue";

import BottomSheet from "@douxcode/vue-spring-bottom-sheet";
import "@douxcode/vue-spring-bottom-sheet/dist/style.css";

const bottomSheet = ref<InstanceType<typeof BottomSheet>>()
const open = ref(false)

const toggle = () => {
  open.value = !open.value

  if (open.value) {
    bottomSheet.value?.open()
  } else {
    bottomSheet.value?.close()
  }
}
</script>
<template>
  <button type="button" @click="toggle">
    {{ open ? "Close" : "Open" }} bottom sheet
  </button>
  
  <BottomSheet
    ref="bottomSheet"
    :blocking="false"
    :snap-points="['25%', '60%']"
    @closed="open = false"
    @vue:mounted="toggle()"
  >
    <template #header>
      ...
    </template>
    ...
  </BottomSheet>
</template>

	

```

--------------------------------

### Vue Spring Bottom Sheet: Snap Points and Content Drag

Source: https://vue-spring-bottom-sheet.douxcode.com/index

Illustrates advanced configuration of the BottomSheet, including defining custom snap points and controlling content drag behavior. It shows how to set `can-swipe-close` to false and use `snap-points` with percentages, fixed values, and dynamic heights. The `expandOnContentDrag` prop is also demonstrated.

```vue
<script lang="ts" setup>
import { ref } from "vue";

import BottomSheet from "@douxcode/vue-spring-bottom-sheet";
import "@douxcode/vue-spring-bottom-sheet/dist/style.css";

const bottomSheet = ref<InstanceType<typeof BottomSheet>>()
const instinctHeight = ref(0)

const expandOnContentDrag = ref(true)

const open = () => {
  bottomSheet.value?.open()
}

const close = () => {
  bottomSheet.value?.close()
}

const snapToPoint = (snapPoint: number) => {
  bottomSheet.value?.snapToPoint(snapPoint)
}
</script>

<template>
  <button type="button" @click="open"> Open bottom sheet </button>

  <BottomSheet
    ref="bottomSheet"
    :blocking="true"
    :can-swipe-close="false"
    :expand-on-content-drag="expandOnContentDrag"
    :snap-points="['99%', '50%', 250, instinctHeight]"
    @instinct-height="(n) => (instinctHeight = n)"
  >
    <div class="button-group">
      <button type="button" @click="snapToPoint(0)"> Top </button>
      <button type="button" @click="snapToPoint(1)"> Middle </button>
      <button type="button" @click="snapToPoint(2)"> Bottom </button>
      <button type="button" @click="snapToPoint(3)"> Instinct </button>
    </div>
    <button
      type="button"
      @click="expandOnContentDrag = !expandOnContentDrag"
    >
      {{ expandOnContentDrag ? "Enable" : "Disable" }} expand on content drag
    </button>
    ...
  </BottomSheet>
</template>

	

```

--------------------------------

### Vue Spring Bottom Sheet: Sticky Header and Footer

Source: https://vue-spring-bottom-sheet.douxcode.com/index

Demonstrates how to implement a sticky header and footer within the BottomSheet component. This involves using named slots (`#header` and `#footer`) to inject persistent content that remains visible during scrolling or dragging.

```vue
<script lang="ts" setup>
import { ref } from "vue";
import BottomSheet from "@douxcode/vue-spring-bottom-sheet";
import "@douxcode/vue-spring-bottom-sheet/dist/style.css";

const bottomSheet = ref<InstanceType<typeof BottomSheet>>()

const open = () => {
  bottomSheet.value?.open()
}

const close = () => {
  bottomSheet.value?.close()
}
</script>

<template>
  <button type="button" @click="open">Open bottom sheet</button>

  <BottomSheet ref="bottomSheet">
    <template #header>
      ...
    </template>
    ...
    <template #footer>
      ....
    </template>
  </BottomSheet>
</template>

	

```
Tokens:
Raw