如何构建滑块来增加破折号应用程序的字体大小

Question

我试图让我的仪表板尽可能满足所有用户的需求

我试图在破折号应用程序上提出一个回调，允许用户拥有辅助功能，但我正在努力解决这个问题，改变应用程序中文本的字体大小。我已经能够使用滑块和回调来更改文本大小

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，但是我如何才能使其适应应用程序中的各个项目

Answer 1

瞄准包含整个应用程序布局内容的主要 Dash HTML

style

组件的

div

属性，以通过回调触发全局 CSS 更改

例如：

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)

导致以下 Dash 应用行为：

您可以看到所有文本元素（包括

p

文本以及所有标题文本）的大小同时增加。