Как оформить ярлык, проверенный RadioItems - PullRequest
Новая
       6

Как оформить ярлык, проверенный RadioItems

0 голосов
/ 06 марта 2019

main.py 

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

app = dash.Dash()
app.css.append_css({'external_url': 'https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css'})
app.layout = html.Div([
    html.Div([
        html.Div([
            dcc.RadioItems(
                id='ri-1',
                options=[
                    {'label': 'A', 'value': 'a'},
                    {'label': 'B', 'value': 'b'},
                    {'label': 'C', 'value': 'c'}
                ],
                labelClassName='ri-label'
            )
        ], className='ri-div')
    ], className='row'),
    html.Div([], className='row', id='ri-value-div')
], className='container')


@app.callback(
    Output('ri-value-div', 'children'),
    [Input('ri-1', 'value')]
)
def ri_cb(ri):
    print ri
    return str(ri)


if __name__ == '__main__':
    app.run_server(port=8050)

main.py генерирует этот HTML-код, assets/main.css включено: https://jsfiddle.net/7h1gtrk3/2/

Я хочу генерировать RadioItems в Dash только с метками (скрыть кнопку радио). Ярлык, отмеченный галочкой, должен быть синим, остальные - серым.

Я не могу инкапсулировать строку метки в элемент HTML, чтобы стилизовать их, например. с оператором CCS plus вот так .

Установленный флажок по-прежнему серый, пользователь не может видеть то, что проверял. Можно модифицировать dcc.RadioItems компонент или использовать CSS по-другому или сделать что-нибудь взломать, чтобы решить эту проблему?

...