更新dmc滑块文本样式-plotly dash

Question

如何使用 dash mantine 组件来操纵刻度？我下面有一个滑块，可以改变条形图的不透明度。我知道您可以更改滑块的大小和半径。但我想改变栏对应的xticks的字体大小、颜色。

您可以将以下CSS与

dcc.sliders

一起使用，但是有类似的方法来控制

dmc.sliders

吗？

.rc-slider-mark-text {
  font-size: 10px;
  color: blue;
}

.rc-slider-mark-text-active {
  font-size: 10px;
color: red;
}

我尝试更改css文件但无济于事。另外，更改样式参数中的字体大小或颜色也没有影响。

import dash
from dash import dcc
from dash import html
from dash.dependencies import Input, Output
import dash_bootstrap_components as dbc
import dash_mantine_components as dmc
import plotly.express as px
import plotly.graph_objs as go
import pandas as pd

df = pd.DataFrame({
   'Fruit': ['Apple','Banana','Orange','Kiwi','Lemon'],
   'Value': [1,2,4,8,6],
   })

external_stylesheets = [dbc.themes.SPACELAB, dbc.icons.BOOTSTRAP]

app = dash.Dash(__name__, external_stylesheets = external_stylesheets)


filter_box = html.Div(children=[

    html.Div(children=[

        dmc.Text("trans"),
        dmc.Slider(id = 'bar_transp',
                min = 0,
                max = 1,
                step = 0.1,
                marks = [
                    {"value": 0, "label": "0"},
                    {"value": 0.2, "label": "0.2"},
                    {"value": 0.4, "label": "0.4"},
                    {"value": 0.6, "label": "0.6"},
                    {"value": 0.8, "label": "0.8"},
                    {"value": 1, "label": "1"},
                   ],
           value = 1,
           size = 'lg',
            style = {"font-size": 2, "color": "white"}, #doesn't work
           ),
    ], className = "vstack",            
    )
])

app.layout = dbc.Container([
    dbc.Row([
        dbc.Col(html.Div(filter_box), 
                    ),
        dcc.Graph(id = 'type-chart'),
    ])
], fluid = True)


@app.callback(
    Output('type-chart', 'figure'),
    [
     Input('bar_transp', 'value'), 
    ])     

def chart(bar_transp):

    df_count = df.groupby(['Fruit'])['Value'].count().reset_index(name = 'counts')

    df_count = df_count

    type_fig = px.bar(x = df_count['Fruit'], 
                  y = df_count['counts'],
                  color = df_count['Fruit'],
                  opacity = bar_transp,
                  )

    return type_fig

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

Answer 1

根据Styles API，您可以使用静态选择器

.mantine-Slider-markLabel

来自定义刻度标签，但似乎没有专门针对active刻度的选择器，因此您必须使用客户端回调当滑块值更改时，将自定义类（例如

mantine-Slider-markLabel-active

）应用于活动元素。

注意。虽然 Dash 不支持输出回调（从v2.17.0开始），但 DMC 目前不支持，因此我们必须为客户端回调使用“虚拟输出”，但我们可以使用现有的组件，而不是创建特定的组件因为回调无论如何都会通过返回

dash_clientside.no_update

来阻止更新。

另请注意：

• 您需要使用 dmc.MantineProvider 包装您的应用程序，否则 破折号会抱怨。

• Dash Mantine Components 基于 REACT 18。您必须设置环境 启动应用程序之前变量 REACT_VERSION=18.2.0。

from dash import Dash, dcc, html, _dash_renderer
from dash import callback, clientside_callback, Input, Output, ClientsideFunction
import dash_bootstrap_components as dbc
import dash_mantine_components as dmc
import plotly.express as px
import plotly.graph_objs as go
import pandas as pd

_dash_renderer._set_react_version('18.2.0')

df = pd.DataFrame({
    'Fruit': ['Apple','Banana','Orange','Kiwi','Lemon'],
    'Value': [1,2,4,8,6],
})

external_stylesheets = [dbc.themes.SPACELAB, dbc.icons.BOOTSTRAP]

app = Dash(__name__, external_stylesheets = external_stylesheets)

filter_box = html.Div(children=[
    html.Div(children=[
        dmc.Text("trans"),
        dmc.Slider(
            id = 'bar_transp',
            min = 0,
            max = 1,
            step = 0.1,
            marks = [
                {"value": 0, "label": "0"},
                {"value": 0.2, "label": "0.2"},
                {"value": 0.4, "label": "0.4"},
                {"value": 0.6, "label": "0.6"},
                {"value": 0.8, "label": "0.8"},
                {"value": 1, "label": "1"},
            ],
            value = 1,
            size = 'lg',
        ),
    ], className = "vstack"
    )
])

app.layout = dmc.MantineProvider(
    dbc.Container([
        dbc.Row([
            dbc.Col(html.Div(filter_box)),
            dcc.Graph(id = 'type-chart'),
            html.Div(id='dummy-output'),
        ])
    ], fluid = True)
)

@callback(
    Output('type-chart', 'figure'),
    Input('bar_transp', 'value'))
def chart(bar_transp):
    df_count = df.groupby(['Fruit'])['Value'].count().reset_index(name = 'counts')
    df_count = df_count
    type_fig = px.bar(
        x = df_count['Fruit'],
        y = df_count['counts'],
        color = df_count['Fruit'],
        opacity = bar_transp,
    )
    return type_fig

clientside_callback(
    ClientsideFunction(
        namespace='someApp',
        function_name='onSliderChange'
    ),
    Output('bar_transp', 'key'),
    Input('bar_transp', 'value')
)

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

在您的

assets_folder

（默认

'assets'

）中：

• .js 文件 :

  window.dash_clientside = Object.assign({}, window.dash_clientside, {
  
    someApp: {
  
      onSliderChange(value) {
        const activeCls = 'mantine-Slider-markLabel-active';
  
        // Remove activeCls from the previously active mark if any.
        document.querySelector('.' + activeCls)?.classList.remove(activeCls);
  
        // And add it to the currently active mark
        const labels = document.querySelectorAll('.mantine-Slider-markLabel');
        const active = [...labels].find(label => +label.textContent === value);
        active?.classList.add(activeCls);
  
        // Prevent updating the ouput
        return dash_clientside.no_update;
      }
    }
  });
  

• .css 文件 :

  .mantine-Slider-markLabel {
    font-size: 10px;
    color: blue;
  }
  
  .mantine-Slider-markLabel-active {
    font-size: 10px;
    color: red;
  }