设置可折叠面板选项卡短划线引导组件的样式 [英] Styling Accordion tab dash bootstrap component

问题描述

我想更改选项卡的颜色和对齐方式以使其居中。到目前为止，我一直在使用

style={‘extAlign’：‘Center’}和displace=flex选项，但这会影响内容对齐方式。

任何人都知道如何使用CSS覆盖选项卡中的标题(本例中为第1项、第2项和第3项)

import dash_bootstrap_components as dbc
from dash import html

accordion = html.Div(
    dbc.Accordion(
        [
            dbc.AccordionItem(
                [
                    html.P("This is the content of the first section"),
                    dbc.Button("Click here"),
                ],
                title="Item 1",
            ),
            dbc.AccordionItem(
                [
                    html.P("This is the content of the second section"),
                    dbc.Button("Don't click me!", color="danger"),
                ],
                title="Item 2",
            ),
            dbc.AccordionItem(
                "This is the content of the third section",
                title="Item 3",
            ),
        ],
    )
)

https://dash-bootstrap-components.opensource.faculty.ai/docs/components/accordion/

推荐答案

您需要将.accordion-button的样式更改为：

.accordion-button {
    text-align: center;
    display: block;
}

将其放置在assets下的.css文件中，该文件应与您的应用程序文件放置在同一目录级别。

这篇关于设置可折叠面板选项卡短划线引导组件的样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！