javascript - 如何仅隐藏引导侧边栏的一部分?
问题描述
我想从点击时隐藏的“vue-bootstrap”创建一个侧边栏,但我只想隐藏这个侧边栏宽度的 80%,那么,如何只隐藏侧边栏的一部分?
<b-button v-b-toggle.sidebar-1 class="toogle-sidebar">
<span>Toogle sidebar</span>
</b-button>
<b-sidebar
id="sidebar-backdrop"
title="Sidebar with backdrop"
:backdrop-variant="variant"
backdrop
shadow
>
<div class="px-3 py-2">
<b-form-group label="Backdrop variant" label-for="backdrop-variant">
<b-form-select id="backdrop-variant" v-model="variant" :options="variants"></b-form-select>
</b-form-group>
</div>
</b-sidebar>
我想在Gitlab siddebar中创建类似的东西,当我点击hide sidebar
然后我只看到菜单的图标,有人能告诉我怎么做吗?
谢谢你的帮助!
解决方案
使用v-model
指令代替指令并为其附加一个类:然后您可以使用 CSS 动画覆盖默认 CSS 值:
new Vue({
el: "#app",
data() {
return {
sidebar: false,
}
},
methods: {
toggleSidebar() {
this.sidebar = !this.sidebar
}
}
})
.b-sidebar-outer.closed #sidebar-backdrop {
display: block !important;
transform: translateX(-270px);
animation-name: sidebarAnim;
animation-duration: 0.4s;
animation-direction: reverse;
}
.b-sidebar-outer:not( .closed) #sidebar-backdrop {
transform: translateX(0);
animation-name: sidebarAnim;
animation-duration: 0.4s;
}
@keyframes sidebarAnim {
0% {
transform: translateX(-270px);
animation-timing-function: ease-in-out
}
100% {
transform: translateX(0px);
animation-timing-function: ease-in-out
}
}
<!-- Add this to <head> -->
<!-- Load required Bootstrap and BootstrapVue CSS -->
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.css" />
<!-- Load polyfills to support older browsers -->
<script src="//polyfill.io/v3/polyfill.min.js?features=es2015%2CIntersectionObserver" crossorigin="anonymous"></script>
<!-- Load Vue followed by BootstrapVue -->
<script src="//unpkg.com/vue@latest/dist/vue.min.js"></script>
<script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.js"></script>
<!-- Load the following for BootstrapVueIcons support -->
<script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue-icons.min.js"></script>
<div id="app">
<b-container>
<b-row>
<b-col>
<b-button @click="toggleSidebar">TOGGLE SIDEBAR</b-button>
</b-col>
<b-sidebar id="sidebar-backdrop" v-model="sidebar" title="Sidebar with backdrop" backdrop-variant :class="{ closed: !sidebar }" backdrop shadow>
asdfsadf
</b-sidebar>
</b-row>
</b-container>
</div>
推荐阅读
- wordpress - WordPress:带有标题的响应式特色图片
- mariadb - MariaDB 仅在我选择所有字段时才显示数据
- php - WordPress:一些函数在 index.php 文件中自动生成
- algorithm - 找到前 N 个自然数的因子数的最佳算法是什么?
- python - 通过python循环的SQL插入查询
- git - 仅针对选择性提交的拉取请求
- regex - Powershell 在字符串中搜索并提取字符串的特定值
- javascript - 无论顺序如何,如何获取数组值和对象键值匹配
- apache-spark - 如何找出graphframe(pyspark)中特定顶点的相邻顶点?
- database - 如何处理星型模式中的桥表