migration(bvn): add BSkeleton & BSkeletonWrapper component missing in bootstrap-vue-next

This commit is contained in:
axolotle 2024-03-14 16:53:44 +01:00
parent 5892842cec
commit c7bd9af3a2
2 changed files with 56 additions and 0 deletions

View file

@ -0,0 +1,34 @@
<template>
<div :style="{ height, width }" class="b-skeleton" />
</template>
<script>
export default {
name: 'BSkeleton',
props: {
height: { type: String, required: true },
width: { type: String, required: true },
},
}
</script>
<style scoped lang="scss">
.b-skeleton {
position: relative;
overflow: hidden;
background-color: $gray-200;
cursor: wait;
height: $font-size-base;
margin-bottom: map-get($spacers, 1);
@if $enable-rounded {
border-radius: 0.25rem;
}
[data-bs-theme='dark'] & {
background-color: $gray-800;
}
}
</style>

View file

@ -0,0 +1,22 @@
<template>
<div v-if="loading" class="b-skeleton-wrapper">
<slot name="loading" />
</div>
<slot v-else name="default" />
</template>
<script>
export default {
name: 'BSkeletonWrapper',
props: {
loading: { type: Boolean, default: false },
},
}
</script>
<style scoped lang="scss">
.b-skeleton-wrapper {
cursor: wait;
}
</style>