xaf-bottom-sheet v1.1.6

Bottom Sheet

Модальное окно, подобное react-native:

• https://github.com/gorhom/react-native-bottom-sheet

Installation / Установка

• yarn add xaf-bottom-sheet

import { createApp } from 'vue'
import App from './App.vue'
import 'xaf-bottom-sheet/css'

const app = createApp(App)
app.mount('#app')

Demo (Breakponts: 35%, 50%, 85%)

Illustration: https://www.inprnt.com/gallery/mcrockefeller/song-of-storms/

How to use? / Как использовать?

// Setup Script
const bottomIndex = ref(0)
return {
  bottomIndex,
}

<bottom-sheet
  :breakpoints="['0%', '30%', '85%']"
  :bounding="[0, '85%']"
  @update:index="(i) => (bottomIndex = i)"
  :index="bottomIndex"
  :layerIndex="9999">
  <!-- Content -->
</bottom-sheet>

Support

Todo

• Абсолютная поддержка стилизации
• Scrollable View
• Perf: скрывать bottom-sheet когда его не видно ( если breakpoint index 0 - 0% )
• Refactor: code split
• События закрытия/открытия помимо события изменения индекса
• Xaf-utils