Как мне стилизовать определенные слова в атрибуте children, когда обратный вызов выполняется в Dash?

Мне любопытно, можно ли стилизовать определенные слова в атрибуте children в тире.

Мой текст является частью атрибута children, потому что у меня есть обратный вызов, который обновляет текст. Однако я хотел бы выделить жирным шрифтом только слова перед двоеточием, а не весь текст. Кажется, я не могу придумать элегантный способ сделать это в Dash.

У меня есть вид Take Home Pay Total: 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

Спасибо!


python plotly-dash plotly
person prime90    schedule 11.04.2019    source источник

Ответы (2)


arrow_upward
7
arrow_downward

Вот один из способов сделать это:

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

Вы также можете использовать dcc.Markdown, если хотите использовать стиль уценки.

person coralvanda    schedule 13.04.2019

arrow_upward
1
arrow_downward

Вы можете легко добиться этого, используя пакет dash_dangerously_set_inner_html в python, могут быть другие лучшие способы визуализации внутреннего 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)
person n00b    schedule 12.04.2019