el-tabs标题竖向显示
时间: 2023-12-01 21:38:12 浏览: 123
竖向标签面板
可以使用 CSS 的 writing-mode 属性来实现 el-tabs 标题竖向显示。具体实现方法如下:
1. 给 el-tabs 组件添加一个自定义类名,例如 vertical-tabs。
2. 在 CSS 中为该类名设置样式,包括设置 writing-mode 为 vertical-lr(从上到下排列)或 vertical-rl(从下到上排列),设置宽度和高度等。
3. 在 el-tabs 的子组件 el-tab-pane 中添加一个自定义类名,例如 vertical-tab-pane。
4. 在 CSS 中为该类名设置样式,包括设置 display 为 flex,flex-direction 为 column,height 为 100% 等。
示例代码如下:
HTML:
```
<el-tabs class="vertical-tabs">
<el-tab-pane label="标签一" class="vertical-tab-pane">标签一的内容</el-tab-pane>
<el-tab-pane label="标签二" class="vertical-tab-pane">标签二的内容</el-tab-pane>
<el-tab-pane label="标签三" class="vertical-tab-pane">标签三的内容</el-tab-pane>
</el-tabs>
```
CSS:
```
.vertical-tabs {
writing-mode: vertical-lr;
width: 100px;
height: 300px;
}
.vertical-tab-pane {
display: flex;
flex-direction: column;
height: 100%;
}
```
阅读全文