个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
我目前正在编写 Dash 应用程序，主要使用 Dash Bootstrap 组件。我对布局非常满意，但想调整原色以匹配我公司的配色方案。在下图中，我基本上想用不同的颜色替换所有蓝色的东西。
额外的挑战是，由于托管环境的原因，不幸的是我只能使用一个大的 Python 文件——我不能有额外的 .css 文件。
我正在使用 BOOTSTRAP_STYLESHEET = [dbc.themes.SPACELAB]。我知道我可以通过使用例如替换单个组件的颜色style={'background-color':COMPANY_MAIN_COLOR}。有没有办法用不同的颜色代替 SPACELAB 的原色？或者至少，替换每个组件的默认值而不是必须为每个组件手动执行？
最佳答案
如果您可以添加一个 css 文件，我会采用这种方法。然后您可以简单地覆盖主要样式。
但是既然你指出这不是一个选项，你可以为你的按钮创建一个包装函数来设置默认背景颜色样式:
MWE
from dash import Dash, html, dcc
import dash_bootstrap_components as dbc
def CustomButton(*args, **kwargs):
default_color = "green"
default_color_light = "lightgreen"
default_color_dark = "darkgreen"
kwargs.setdefault("style", {"background-color": default_color, "background-image": "-webkit-gradient(linear, left top, left bottom, from(lightgreen), to(darkgreen))"})
return dbc.Button(*args, **kwargs)
app = Dash(external_stylesheets=[dbc.themes.SPACELAB])
app.layout = html.Div(
[
dbc.Button("Primary", color="primary", className="me-1"),
CustomButton("Primary", color="primary", className="me-1")
]
)
if __name__ == "__main__":
app.run_server()
这只会设置默认值，因此您可以通过设置 style 属性来覆盖颜色。如果您不想要默认的渐变，您可以从 setdefault 调用中删除 background-image 部分。
更新
或者，您可以通过 Customizing Dash's HTML Index Template 用 css 覆盖样式.
SPACELAB 样式定义了一个 --primary css 颜色变量，但令人恼火的是它没有在任何地方使用这个变量。不同的元素也可能以不同的方式改变颜色，所以我认为没有一种简单的万能方法可以做到这一点。但是您可以使用以下方法并向其添加样式，直到它成为您想要的样子
from dash import Dash, html, dcc
import dash_bootstrap_components as dbc
app = Dash(external_stylesheets=[dbc.themes.SPACELAB])
app.index_string = """
<!DOCTYPE html>
<html>
<head>
{%metas%}
<title>{%title%}</title>
{%favicon%}
{%css%}
<style>
.btn-primary {
background-image: linear-gradient(red, blue);
}
.custom-control-input:checked ~ .custom-control-label::before {
border-color: red;
background-color: red;
}
</style>
</head>
<body>
{%app_entry%}
<footer>
{%config%}
{%scripts%}
{%renderer%}
</footer>
</body>
</html>
"""
app.layout = html.Div(
[
dbc.Button("Primary", color="primary", className="me-1"),
dbc.Checklist(
options=[
{"label": "Option 1", "value": 1},
{"label": "Option 2", "value": 2},
],
value=[1],
id="switches",
switch=True,
),
],
)
if __name__ == "__main__":
app.run_server()
关于python - Dash Bootstrap 组件 : Replace primary color across components，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/70438022/
25
4
0
Mpeg 短跑流媒体 我正在写关于直播的论文。我使用带有 rtmp 模块的 ffmpeg,ngix 服务器和来自 Dash industry 的 dash.js .我通过 ffmpeg 开始流到服务器
我正在创建一个播放静态 mpeg-DASH 文件的应用程序。我一直在使用 MP4Box 创建 DASH .mp4 和 .mpd 文件。 MPD 文件包含单个 .mp4 文件中的字节范围偏移列表。这工作
当从任何一个下拉列表中选择任何选项时，我希望从所有其他下拉列表中删除相同的选项。 为了帮助形象化这一点，我正在尝试构建一个列映射器。对于左侧的每个列名，右侧都有一个下拉列表，用户可以在其中从他们上传的
我正在尝试为不同的信息集创建一个具有多个选项卡的应用程序。我的第一个想法是使用 html 按钮，但没有 dash_core_component 用于此，而且我找不到任何可以在其位置使用的文档。基本上，
请建议我如何在 dashing 应用程序中显示图像(在引用使用 dashing.io rubygem 创建的应用程序中) 最佳答案 使用图像小部件: 请注意，路径 /logo.png 指
我发现 Core Graphics 想要的字体名称与 UIFont 接受的不同。 例如，CG 接受“Helvetica Bold”但不接受“Helvetica-Bold”，而 UIFont 则相反。
我已将 dash 应用程序连接到 AWS RDS。我有一个实时更新的图表，它触发一个 n_interval 为 5 分钟的回调来查询数据库并进行一些昂贵的格式化。我将转换后的数据(约 500 个数据点
我对 Dash Plotly 很陌生，我正试图弄清楚如何设计这样的布局。 Layout : 据我了解，使用 dash bootstrap 组件可以更轻松地完成此操作。 https://dash-boo
我已经构建了一个仪表板并使用我自己的 css 自定义了外观。该应用程序的结构如下 然后我对我们的 linux 服务器进行了docker化和部署。不幸的是，我们的 linux 服务器用它自己的 css
戒指dash_daq.Gauge输出太薄，如下图所示。 我想要更厚的戒指。我在'inspect element'下找不到css元素来增加环的厚度。我该怎么做？ 最佳答案 只需创建一个 assets 文
是否可以在图表底部有一个文本字段，以破折号显示它们所在点的文本(将悬停数据显示为纯文本)。因此，当用户将鼠标悬停在某个点上时，文本框将能够进行更改。我已经定义了一个 dcc.Graph 组件和应用程序
我正在尝试运行此 Dash 教程 https://github.com/cryptopotluck/alpha_vantage_tutorial/tree/master/dash_bootstrap/
作为 Dash 的初学者，我有一个简单的问题。我正在使用一个表来接受用户输入，读入它，最终对其执行一个操作，然后在第一个下面返回一个结果表。下面是我的代码: import dash import da
我正在尝试通过 macOS 上的 Jupiter notebook 运行 dash。它确实被导入，当我尝试运行 app.run_server 命令时它失败了。它给了我以下错误 [Errno 8] no
我遇到了 Plotly Dash 的问题，即由 dcc.Store 组件触发的回调每次触发两次。请参阅下面的代码和示例输出代码，它基于 Dash 文档 ( https://dash.plot.ly/d
我正在使用 dash 应用程序调用包含 351 列的大约 250,000 个值的大型数据集，以便我可以显示它。然而，它需要很长时间才能运行，我认为这是因为我从一个不同的应用程序调用数据，我用来收集名为
我正在更新一些代码以使用 Dash 和plotly。绘图的主要代码是在类中定义的。我用 Dash 控件替换了一些 Bokeh 小部件，最终得到了如下所示的回调: class MakeStuff:
我正在尝试实现用于播放受 widevine 保护的视频的 Android 应用程序。我在 Exoplayer 上构建我的应用程序，但我遇到了 MediaDrm 问题。 android.media.Me
你可以在这里看到实现: http://jsfiddle.net/Wtcdt/ 在 Mac 上的 FireFox 中，该圆圈是圆形/实心的。我想要它是虚线还是点线。 更奇怪的是，相同的属性(即 bord
我看GPUImage2的源码 picture = PictureInput(image:UIImage(named:"WID-small.jpg")!) filter = Satura
我是一名优秀的程序员,十分优秀！