el-collapse样式
时间: 2023-07-06 09:38:13 浏览: 204
el-collapse 是一个可折叠面板组件,它提供了许多可用的样式类,可以通过这些样式类来自定义折叠面板的样式。下面是一些常用的样式类:
1. el-collapse:折叠面板的容器样式类,可以用来设置容器的宽度、高度、背景颜色等样式属性。
2. el-collapse-item:折叠面板项的容器样式类,可以用来设置折叠面板项的宽度、高度、边框、背景颜色等样式属性。
3. el-collapse-item__header:折叠面板项的标题容器样式类,可以用来设置标题的字体、颜色、背景色等样式属性。
4. el-collapse-item__arrow:折叠面板项的箭头容器样式类,可以用来设置箭头的宽度、高度、颜色等样式属性。
5. el-collapse-item__content:折叠面板项的内容容器样式类,可以用来设置内容的字体、颜色、背景色等样式属性。
例如,如果你想将折叠面板的背景颜色设置为红色,可以在CSS中添加以下代码:
```css
.el-collapse {
background-color: red;
}
```
如果你想将折叠面板项的标题字体颜色设置为蓝色,可以在CSS中添加以下代码:
```css
.el-collapse-item__header {
color: blue;
}
```
如果你想将折叠面板项的箭头颜色设置为绿色,可以在CSS中添加以下代码:
```css
.el-collapse-item__arrow {
color: green;
}
```
如果你想将折叠面板项的内容字体大小设置为16px,可以在CSS中添加以下代码:
```css
.el-collapse-item__content {
font-size: 16px;
}
```
阅读全文