el-tabs设置为横向
时间: 2024-05-03 12:19:08 浏览: 14
你可以通过设置 `tab-position` 属性为 `top` 来将 `el-tabs` 设置为横向,示例代码如下:
```html
<el-tabs tab-position="top">
<el-tab-pane label="Tab 1">Content of Tab Pane 1</el-tab-pane>
<el-tab-pane label="Tab 2">Content of Tab Pane 2</el-tab-pane>
<el-tab-pane label="Tab 3">Content of Tab Pane 3</el-tab-pane>
</el-tabs>
```
此外,还可以使用 `tab-position` 属性设置 `left`、`right` 或 `bottom` 来分别将 `el-tabs` 设置为纵向、纵向(右侧)或横向(底部)。
相关问题
如何在竖向的el-tab-pane中包含横向的el-tabs
您可以使用以下代码将横向的el-tabs包含在竖向的el-tab-pane中:
```html
<el-tab-pane>
<template slot="label">竖向标签</template>
<el-tabs type="border-card">
<el-tab-pane label="横向标签1">标签1的内容</el-tab-pane>
<el-tab-pane label="横向标签2">标签2的内容</el-tab-pane>
<el-tab-pane label="横向标签3">标签3的内容</el-tab-pane>
</el-tabs>
</el-tab-pane>
```
这样,您就可以在竖向的el-tab-pane中包含横向的el-tabs了。需要注意的是,您需要在el-tabs中设置`type="border-card"`属性,以确保横向的el-tabs能够正确地显示。
el-tabs的el-tab-pane的name太长解决方法,或给tabs加横向滚动滑轮代码
如果 `el-tab-pane` 的 `name` 太长,可以使用 `label` 属性来显示一个更短的标签名称。例如:
```
<el-tabs>
<el-tab-pane label="Tab 1" name="tab1">Tab 1 Content</el-tab-pane>
<el-tab-pane label="Tab 2" name="tab2">Tab 2 Content</el-tab-pane>
<el-tab-pane label="Tab 3" name="tab3">Tab 3 Content</el-tab-pane>
<el-tab-pane label="Tab 4" name="tab4">Tab 4 Content</el-tab-pane>
</el-tabs>
```
如果你想给 `el-tabs` 添加横向滚动滑轮,可以使用 CSS 样式来实现。例如:
```
.el-tabs__header {
overflow-x: auto;
white-space: nowrap;
-webkit-overflow-scrolling: touch;
}
```
这将使 `el-tabs` 的头部区域可以横向滚动,并且头部中的标签不会换行。`-webkit-overflow-scrolling: touch;` 属性可以提高在移动设备上的滚动性能。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)