在Dash中执行回调时，如何设置children属性中的某些单词？

Question

我很好奇是否可以在dash中的children属性中设置某些单词的样式。

我的文本是children属性的一部分，因为我有一个更新文本的回调。但是，我只想在冒号之前加粗，而不是整篇文章。我似乎无法在Dash中找到一种优雅的方法。

我看起来像是带回家支付总额：500我希望它看起来像Take Home Pay Total：500

目前的代码

html.Div([
    html.Div([
        html.Div(id='total-pay',
                children='',
                style={'font-weight': 'bold'}
        ),
    ], className='six columns'),
], className='row'),

@app.callback(
        Output('total-pay', 'children'),
        [Input('date-picker-range', 'start_date'),
        Input('date-picker-range', 'end_date')],
    )
    def dataview_text(start_date, end_date):
        df = df_paystub
        df = df[(df['Date'] >= start_date) & (df['Date'] <= end_date)]
        totalpay = 'Take Home Pay Total: ' + str(round(df['CheckTotal'].sum(),2))
        return totalpay

谢谢！

Answer 1

这是一种方法：

totalpay = html.P(children=[
        html.Strong('Take Home Pay Total: '),
        html.Span(str(round(df['CheckTotal'].sum(),2)))
    ])
return totalpay

如果你想使用降价造型，你也可以使用dcc.Markdown。

Answer 2

你可以使用python中的dash_dangerously_set_inner_html包轻松实现这一点，可能还有其他更好的方法来渲染内部反应HTML组件，如this，但到目前为止我还没有找到一个用于python的方法。

以下是使用`dash_dangerously_set_inner_html```包的示例代码。

import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output
from datetime import datetime as dt
import dash_dangerously_set_inner_html

import pandas as pd
import plotly.graph_objs as go


app = dash.Dash(__name__)

#main div
app.layout = html.Div([
    dcc.DatePickerRange(
        id='date-picker-range',
        min_date_allowed=dt(1995, 8, 5),
        max_date_allowed=dt(2019, 9, 19),
        initial_visible_month=dt(2017, 8, 5),
        end_date=dt(2017, 8, 25)
    ),
    html.Div([
        html.Div([
            html.Div(id='total-pay',
                children='',
                #style={'font-weight': 'bold'}
            ),
        ], className='six columns'),
    ], className='row'),

])


@app.callback(
        Output('total-pay', 'children'),
        [Input('date-picker-range', 'start_date'),
        Input('date-picker-range', 'end_date')],
    )
def dataview_text(start_date, end_date):
    return dash_dangerously_set_inner_html.DangerouslySetInnerHTML('''
         <b>Take Home Pay Total: </b>
    ''' + str(round(1000,2)))

if __name__ == '__main__':
    app.run_server(debug=True)