vue-swipe-modalCustom style
Panel
Override the style using :deep() functionality provided by Vue.
vue
<template>
<main>
<SwipeModal v-model="isOpen">
modal content
</SwipeModal>
</main>
</template>
<style scoped>
:deep(.modal-style) {
/* custom style */
}
</style><template>
<main>
<SwipeModal v-model="isOpen">
modal content
</SwipeModal>
</main>
</template>
<style scoped>
:deep(.modal-style) {
/* custom style */
}
</style>DANGER
Do not specify height. Modal height must be specified with snapPoint prop.
DragHandle
vue
<template>
<SwipeModal v-model="isOpen">
<template v-slot:drag-handle>
<div class="custom-drag-handle-class-name" />
</template>
</SwipeModal>
</template>
<style scoped>
.custom-drag-handle-class-name {
/* custom style */
}
</style><template>
<SwipeModal v-model="isOpen">
<template v-slot:drag-handle>
<div class="custom-drag-handle-class-name" />
</template>
</SwipeModal>
</template>
<style scoped>
.custom-drag-handle-class-name {
/* custom style */
}
</style>Backdrop
vue
<template>
<SwipeModal v-model="isOpen">
<template v-slot:backdrop>
<div class="custom-backdrop-class-name" />
</template>
</SwipeModal>
</template>
<style scoped>
.custom-backdrop-class-name {
/* custom style */
}
</style><template>
<SwipeModal v-model="isOpen">
<template v-slot:backdrop>
<div class="custom-backdrop-class-name" />
</template>
</SwipeModal>
</template>
<style scoped>
.custom-backdrop-class-name {
/* custom style */
}
</style>