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

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

0 голосов
/ 12 апреля 2019

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

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

Как я выгляжу Возьмите домой Pay Pay Total: 500 Как бы я хотел, чтобы это выглядело Возьмите домой Pay 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

Спасибо!

Ответы [ 2 ]

1 голос
/ 13 апреля 2019

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

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

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

0 голосов
/ 12 апреля 2019

Вы можете легко добиться этого, используя пакет 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)
...