Prop for initial height

[lyqht]

Right now we have a prop for maxHeight, but it will be nice if this component has props which are similar to native bottom sheet component or a simple prop for setting initial height in addition to the max height.

For example, i would like the bottom sheet to start off short first at 90px, then users can drag it to a max height of 80% of the viewport height.

Initial height

Max height

[laurablum]

@lyqht

I have had the same issue and created a ugly workaround for this.
Maybe this can help you out in the meantime.

<template>
  <vue-bottom-sheet
      ref="bottomSheet"
      class="pb-16"
      :can-swipe="false"
  >
    <div>
      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
      dolore
      magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd
      gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur
      sadipscing
      elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero
      eos
      et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum
      dolor
      sit amet.
    </div>
  </vue-bottom-sheet>
</template>
<script setup>
import VueBottomSheet from "@webzlodimir/vue-bottom-sheet";

let isFullSize = false;

const toggleHeight = () => {
  const height = isFullSize ? 50 : 90;

  const element = document.getElementsByClassName("bottom-sheet__content")?.[0];
  if (element) {
    element.setAttribute("style", `height: ${height}vh !important`);
    isFullSize = !isFullSize;
  }
}

const open = () => {
  this.$refs.bottomSheet.open();

  const header = document.getElementsByClassName("bottom-sheet__header")?.[0];
  header?.addEventListener("mousedown", () => toggleHeight());
}

defineExpose({
  open,
});


</script>

<style>

.bottom-sheet__content {
  height: 50vh !important;
}

</style>

I wrapped this in a own component and you have to call the open method from the higher order component.

This is super ugly and I really unlike this, so it would be very nice if this could be fixed in a future release.

[chrisk8er]

@lyqht

I have had the same issue and created a ugly workaround for this. Maybe this can help you out in the meantime.

<template>
  <vue-bottom-sheet
      ref="bottomSheet"
      class="pb-16"
      :can-swipe="false"
  >
    <div>
      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
      dolore
      magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd
      gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur
      sadipscing
      elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero
      eos
      et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum
      dolor
      sit amet.
    </div>
  </vue-bottom-sheet>
</template>
<script setup>
import VueBottomSheet from "@webzlodimir/vue-bottom-sheet";

let isFullSize = false;

const toggleHeight = () => {
  const height = isFullSize ? 50 : 90;

  const element = document.getElementsByClassName("bottom-sheet__content")?.[0];
  if (element) {
    element.setAttribute("style", `height: ${height}vh !important`);
    isFullSize = !isFullSize;
  }
}

const open = () => {
  this.$refs.bottomSheet.open();

  const header = document.getElementsByClassName("bottom-sheet__header")?.[0];
  header?.addEventListener("mousedown", () => toggleHeight());
}

defineExpose({
  open,
});


</script>

<style>

.bottom-sheet__content {
  height: 50vh !important;
}

</style>

I wrapped this in a own component and you have to call the open method from the higher order component.

This is super ugly and I really unlike this, so it would be very nice if this could be fixed in a future release.

add a CSS transition and it will transition smoothly.

.bottom-sheet__content {
    color: #000;
    height: 20vh !important;
    transition: height 0.3s ease-in-out;
}