提问人：Richard Hill 提问时间：8/30/2023 更新时间：8/30/2023 访问量：66
如何构建滑块以增加仪表板应用程序中的字体大小
How can I build a slider to increase font size across a dash app
问：
我试图使我的仪表板尽可能满足所有用户的需求
我试图在仪表板应用程序上提出一个回调，允许用户拥有辅助功能，但我正在努力解决这个问题，更改整个应用程序中文本的字体大小。我已经能够有一个滑块和一个回调，这将改变文本大小
dcc.Slider(min=0, max=2, step=1, value=0,
marks={0: 'Regular',
1: 'Large',
2: 'Larger'},
id='font-slider'),
我想调整字体的大小
@app.callback(
Output('font_slider-output', 'style'),
Input('font-slider', 'value'))
def update_output(value):
"""
Font size slider prepared within
the accesibility tab
"""
font = [{'font-size' : '1rem'},
{'font-size' : '1.5rem'},
{'font-size' : '2rem'}]
return font[value]
但是，我无法将其集成到所有 html 项目中。我可以让它更改单个 html。P 但是我怎样才能调整它以在应用程序中的各个项目之间使用
答：
1赞
John Collins
8/30/2023
#1
以包含整个应用布局内容的主 Dash HTML 组件的属性为目标，通过回调触发全局 CSS 更改stylediv
例如：
import dash
from dash import dcc, html
from dash.dependencies import Input, Output
app = dash.Dash(__name__)
app.layout = html.Div(
html.Div(
[
html.H1("Dash App - Slider to Increase Font Size"),
dcc.Slider(
min=0,
max=2,
step=1,
value=0,
marks={0: "Regular", 1: "Large", 2: "Larger"},
id="font-slider",
),
html.H2("Some Text Examples", id="text-1"),
html.H3("This is some text.", id="text-2"),
html.H4("This is some more text.", id="text-3"),
html.P("This is yet more text.", id="text-4"),
],
style={"width": "50%", "textAlign": "center", "margin": "auto"},
),
id="main-div",
style={"fontSize": "1rem"},
)
@app.callback(Output("main-div", "style"), [Input("font-slider", "value")])
def update_font_size(slider_value):
font_sizes = ["1rem", "1.5rem", "2rem"]
update_font_size = {x: y for x, y in zip(range(3), font_sizes)}
return {"fontSize": update_font_size[slider_value]}
if __name__ == "__main__":
app.run_server(debug=True, dev_tools_hot_reload=True)
导致以下达世币应用行为：
您可以看到所有文本元素（包括文本以及所有标题文本）的大小同时增加。p
评论
1赞
Richard Hill
8/30/2023
太好了@John感谢您的帮助，这正是我所需要的，很好的例子，谢谢
评论