el-collapse-item设置title样式
时间: 2023-05-12 19:02:54 浏览: 2537
您可以使用以下CSS样式来设置el-collapse-item的标题样式:
.el-collapse-item__header {
background-color: #f5f5f5;
color: #333;
font-size: 16px;
font-weight: bold;
padding: 10px;
}
您可以根据需要调整样式。
相关问题
element-puls 的 el-collapse-item 加粗 title
要加粗 `el-collapse-item` 的 `title`,您可以使用以下 CSS 代码:
```css
.el-collapse-item__header .el-collapse-item__title {
font-weight: bold;
}
```
这将为标题文本添加粗体样式。您可以将此代码添加到您的样式表中,或者将其添加到 `style` 标签中,如下所示:
```html
<template>
<el-collapse>
<el-collapse-item>
<template slot="title">
<span class="bold-title">Item 1</span>
</template>
<p>Content 1</p>
</el-collapse-item>
<el-collapse-item>
<template slot="title">
<span class="bold-title">Item 2</span>
</template>
<p>Content 2</p>
</el-collapse-item>
</el-collapse>
</template>
<style>
.bold-title {
font-weight: bold;
}
</style>
```
这将为标题文本添加粗体样式,并且所有 `el-collapse-item` 的标题都将具有相同的样式。
修改el-collapse-item的背景颜色
可以通过以下步骤修改 `el-collapse-item` 的背景颜色:
1. 打开你的样式文件(如 `style.css`)并添加以下代码:
```css
.el-collapse-item__content {
background-color: #f0f0f0;
}
```
这将为 `el-collapse-item` 的内容区域添加背景颜色。
2. 如果你想为每个折叠项添加不同的背景颜色,可以为每个 `el-collapse-item` 添加一个自定义类名,并在样式文件中为它们分别设置背景颜色。例如:
```html
<el-collapse>
<el-collapse-item title="标题一" class="custom-item-1">
内容一
</el-collapse-item>
<el-collapse-item title="标题二" class="custom-item-2">
内容二
</el-collapse-item>
</el-collapse>
```
```css
.custom-item-1 .el-collapse-item__content {
background-color: #f0f0f0;
}
.custom-item-2 .el-collapse-item__content {
background-color: #e0e0e0;
}
```
这将为第一个折叠项添加浅灰色背景,为第二个折叠项添加淡灰色背景。
阅读全文