snehilvj/dash-mantine-components

Plotly Dash components based on Mantine React Components

Dash Mantine Components is an extensive (90+) Dash components library based on Mantine React Components Library. It makes it easier to create good quality dashboards with very well designed components out of the box.

Documentation

Table of contents

• Installation
• Quickstart
• Sponsors
• Contributing

Installation

pip install dash-mantine-components

Quickstart

from datetime import date

from dash import Dash, Input, Output, callback, html
from dash.exceptions import PreventUpdate

import dash_mantine_components as dmc

app = Dash(__name__)

app.layout = html.Div(
    [
        dmc.DatePicker(
            id="date-picker",
            label="Start Date",
            description="You can also provide a description",
            minDate=date(2020, 8, 5),
            value=None,
            w=200
        ),
        dmc.Space(h=10),
        dmc.Text(id="selected-date"),
    ]
)


@callback(Output("selected-date", "children"), Input("date-picker", "value"))
def update_output(d):
    prefix = "You have selected: "
    if d:
        return prefix + d
    else:
        raise PreventUpdate


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

Sponsors

Thanks to the following people for supporting my efforts on dash-mantine-components.

2. Ann Marie Ward

Contributing

1. Join our Discord community.

2. Install virtual environment:

   python -m venv venv
   source venv/bin/activate
   pip install -r requirements.txt

3. Install npm dependencies

   npm install

4. Add your new component in src/lib/components. Make sure to include it in the src/lib/index.js as well.

5. Build the components with the command: npm run build.

6. Raise a PR, including an example to reproduce the changes contributed by the PR.

dash-mantine-components's Issues

DatePicker/ DateRangePicker date component with write property

Hi! Thanks for the awesome lib! Its really nice to finally have a date picker that can go back in time quickly. I even mentioned this in dcc: plotly/dash-core-components#990
However, the date/dates properties of the date pickers appear to be read only. It would be great to add write properties to them so that in a callback, you can for example set a default date range. Example code:

from datetime import datetime, timedelta
from dash import Dash, html, Input, Output
import dash_mantine_components as dmc

# App
app = Dash(__name__)
server = app.server

app.layout = html.Div(
    children=[
        html.Button("Set dates", id="click"),
        dmc.DateRangePicker(
            id="date_range",
        )
    ]
)


@app.callback(
    Output("date_range", "dates"),
    Input("click", "n_clicks"),
)
def set_initial_dates(click):
    today = datetime.now()
    end_date = today + timedelta(10)
    return [today, end_date]


# Main
if __name__ == "__main__":
    app.run_server(debug=True)

Improve flexibility of Table component

In React, the Mantine Table component is populated using html elements. In the current Dash Mantine Components (dmc) wrapper, the elements are constructed from (columns, rows) props as simple text elements. While this choice simplifies the syntax form a Dash perspective, it also reduces flexibility.

In my first project using dmc, for example, I needed table entries to act as links. I can think of two ways to implement it,

1. Pass html components directly to the table via the children prop

• (+) High flexibilty, as the user can pass any Dash component to the table
• (+) Since Dash components are passed, callbacks can be attached
• (-) The Dash code will be longer (which could be, at least partially, mitigated by providing utility functions)
• (-) Possible, performance might become an issue for large table due to the large number of Dash nodes

2. Pass data in some simply structure, e.g. the current (columns, rows) props, but enable custom rendering

• (+) High flexibility, as the user can render custom javascript in the table
• (+) Short syntax (at least for simple tables, i.e. as now)
• (-) As the rendered object are not passed from Dash, attaching callbacks is not possible
• (-) Requires the user to write JavaScript, and deal with JavaScript assets
• (-) Requires more implementation effect as compared to (1)

I guess both approaches could be implemented in one component. Alternatively, two table component could be created. Say, a Table (or HtmlTable?) component that takes html elements as children similar to the Mantine Table component, and a SimpleTable (or Table?) that renders the children based on (columns, rows) props. What do you think, @snehilvj ?

trying to use MultiSelect in a Modal. No values show in dropdown

Hello, I am trying to implement a Multiselect object in a modal but when I open the modal, none of the values show.
Is this a known issue or am I doing this wrong?

Here is my modal code. I tested it and it works in my main form, but not in a modal:

            dbc.ModalBody(
                id="value_picker_modal_body",
                children=[
                    dmc.MultiSelect(
                        label="Select 3D-axis plot variables:",
                        id="selected-3d-attr",
                        value=[],
                        data=[
                            {"value": "parameter1", "label": "Parameter1"},
                            {"value": "parameter2", "label": "Parameter2"},
                            {"value": "attribute1", "label": "Attribute1"},
                            {"value": "attribute2", "label": "Attribute2"},
                        ],
                        creatable=True,
                        clearable=True,
                    ),
                ],
                style={"height": "60vh", "overflow": "scroll"},

            )

The result is when I click in the dropdown on the modal window, nothing happens.
Is there a parameter I need to make it run in a modal window?

Thanks.

DateRangePicker Singe Date Selection Issues

Hello,

Really appreciate your work on this awesome project!

I'm having issues selecting a single date with the daterangepicker. The first issue is with the UI as shown below. When trying to select a single date the first time, the selection simply disappears. However, the second time I select a single date, it stays.

Screen.Recording.2022-02-25.at.8.16.47.PM.mov

The second issue is triggering a callback with a single date selection. Can this be done? I was hoping the callback value would be something along the lines of ["selected_start_date", maxDate], but a single selection does not appear to trigger the callback.

Thanks in advance for any help.

Not available in anaconda or conda-forge sources

Please could you add this to anaconda and/or conda-forge sources? Thank you.

Does dmc.MultiSelect creatable argument allow the user to enter a custom option?

First I would like to say that these components are great!

I have the following:

dmc.MultiSelect(
    label="My Dropdown",
    id="my-dropdown",
    value=[],
    data=[
        {"value": "parameter1", "label": "Parameter1"},
        {"value": "parameter2", "label": "Parameter2"},
        {"value": "attribute1", "label": "Attribute1"},
        {"value": "attribute2", "label": "Attribute2"},
    ],
    creatable=True,
)    

I was expecting that with the creatable=True argument I would be able to add a new option to the dropdown.

Does MultiSelect component allow the user to add new options on the fly?

Thanks,
David

conda-forge outdated

Latest version in conda-forge repository is 0.9:

# Name                       Version           Build  Channel
dash-mantine-components           0.6.0    pyhd8ed1ab_0  conda-forge
dash-mantine-components           0.7.0    pyhd8ed1ab_0  conda-forge
dash-mantine-components           0.8.0    pyhd8ed1ab_0  conda-forge
dash-mantine-components           0.9.0    pyhd8ed1ab_0  conda-forge

Could you please update it?

Thanks in advance!

Ability to debounce callbacks from Input/Select components

Hi there,

I switched my app to use Dash Mantine Components because of the beautiful components UI and flexibility. However, I miss the ability to debounce callbacks from input and dropdowns in dash core components. Debounce allows us to trigger callbacks on the input after losing focus or pressing Enter Key, instead of firing the callback for each letter typed in the input box.

1. Is there a way to implement this with the current codebase?
2. If not, is there a way to style a component from dash core components package, exactly like dash mantine components, using some kind of a wrapper?

ActionIcon n_clicks prop not triggering when assigned to bullet prop of TimelineItem

It appears that the ActionIcon n_clicks prop is not triggering callbacks when assigned to the bullet prop of a TimelineItem component, for example:

dmc.Timeline(dmc.TimelineItem(
    bullet=[
        dmc.ActionIcon(dmc.Avatar(src="https://avatars.githubusercontent.com/u/91216500?v=4", radius='xl', size=40), id='test') 
    ],
    title='Test'
))

Here is a sample callback, and you'll notice that it does not get triggered on click of the ActionIcon:

@app.callback(
    Output('empty-div', 'children'),
    [Input('test', 'n_clicks')])
def test_clicks(n):

    print(n)

Fully reproducible example below:

import dash, flask
from dash import Dash, html, dcc, Input, Output, State, ALL, MATCH, ClientsideFunction
import dash_bootstrap_components as dbc
import dash_mantine_components as dmc
from dash_iconify import DashIconify

server = flask.Flask(__name__, static_folder='assets')

app = Dash(
    __name__,
    server=server,
    update_title=None
)

app.title = 'Test'
app.config.suppress_callback_exceptions = True

app.layout = html.Div([

    dmc.Timeline(dmc.TimelineItem(
        bullet=[
            dmc.ActionIcon(dmc.Avatar(src="https://avatars.githubusercontent.com/u/91216500?v=4", radius='xl', size=40), id='test') 
        ],
        title='Test'
    )),

    html.Div(id='empty-div')

])

@app.callback(
    Output('empty-div', 'children'),
    [Input('test', 'n_clicks')])
def test_clicks(n):

    print(n)

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

Allow Multiselect to trigger callbacks on dropdown close.

As suggested in forum,
Adding a dropdownClosed prop will enable triggering callbacks after a user is done selecting all the desired values.

MultiSelect has no search_value parameter

In dcc(Dash core components), the Dropdown component has search_value parameter.
But in dmc,the MultiSelect component has no such parameter.
I can not get serach value in my callback directly.

https://dash.plotly.com/dash-core-components/dropdown

Would it be possible to add the RangeSlider

I already saw the implementation. Is it possible to add it as a component for python. If I install the latest version, Slider is available but RangeSlider isn't.

Would be great. Thanks

Debounce for textInput

DMC is missing a debounce property similar to use-debounced-state hook in mantineJS. This would be useful for situations where you need to check if input exist in firestore.

dmc.TextInput(
    label="Project Name",
    id=project_name,
    style={"width": 200, "margin": "auto"},
    placeholder="Potato Project",
    required=True,
),

def does_project_exists(project_name):
    """Check if project exists in firestore.

    Args:
        project_name ( String ): Name of project

    Returns:
        _bool_: returns True if project exists
    """
    doc_ref = firebase_init.db.collection("projects").document(project_name)
    doc = doc_ref.get()
    return doc.exists

@callback(
    Output("project_name_input", "error"),
    Input("project_name_input", "value"),
    prevent_initial_update=True,
)
def update_project_name_error(project_name):
    if project_name is None or project_name == "":
        return "Don't leave me blank!"
    elif does_project_exists(project_name):
        return "Project already exists!"
    else:
        return False

With current textInput, Project Names like "supercalifragilisticexpialidocious" will have 34 reads in firebase which will make me broke. Since the callback will trigger everytime there's a key press.

Prism copy button not always working

Hello,

I have the following snippet of code:

import dash
from dash import html, Output, Input

import dash_mantine_components as dmc

app = dash.Dash(__name__)

code = dmc.Prism(
    language="python",
    children="""# Kadane's Algorithm

class Solution:
    def maxSubArray(self, nums: List[int]) -> int:
        curr, summ = nums[0], nums[0]
        for n in nums[1:]:
            curr = max(n, curr + n)
            summ = max(summ, curr)
        return summ""",
)

app.layout = html.Div(
    [
        code,
    ]
)

app.run_server(debug=True)

If I run it on my laptop (ubuntu 22.04), it works like a charm, but if I run it on a remote server (centos7), the copy-to-clipboard button does not work. In both cases, I access the app with firefox on my laptop (Version 103.0.2).

Dash is not returning any error, and I can see the button animated, but it does not go green and nothing is copied.

Screencast.from.08-18-2022.05.18.49.PM.webm

Any ideas what could go wrong?

---

In all cases:
dash 2.6.0
dmc 0.10.2

maxDropdownHeight height for Multiselect not working

If maxDropdownHeight property does what it says then it's clearly not functioning.

I would like the multiselect to occupy no more than the first line of values. I would be requiring few dropdowns that have hundreds of items to select and filter from. Is there any way I can fix the height of the dropdown to a specified number of pixels?

I wonder if someone has checked the kind of dropdown google datastudio provides.

It occupies no more than a single line.

Allow for Submittable Form

Hello,

I’d like to make a submittable form.

In order to do so, the inputs will need to be able to have the name attribute optional. Up to you if defaults to id.

The button will need to be able to have the type attribute optional with default type as button.

DateRangePicker - Selecting same dates subsequently without clearing is not working

When I want to select the same dates subsequently it's not working properly. The input field remains blank. It works when I click on the clear X symbol, but not when I select it.

Callback for blank value field is sadly also not triggered. Again, when I hit 'X' button, callback is triggered.

I'm including the video demonstration using docs daterangepicker as an example:

Screencast.2022-04-21.12.42.28.mov

In the first part of the video you see broken behavior (without 'X' button), callback is not triggered. In the second part (with 'X' button), everything works as expected, callback in Dash is triggered.

The same unexpected behavior is also applied for allowSingleDateInRange=True.

Otherwise, I really appreciate all of the effort you put into this project. It's great.

Thanks!

DatePicker does not hold selected value, displays one day prior to selection

The DatePicker component appears to not hold the selected value after losing focus. It seems to select one day prior to the selected value. This issue can be replicated in the first example here by attempting to select February 3, 2022. After losing focus, the underneath text will show the correct selected value, however the display value in the DatePicker component will display February 2, 2022.

As a heavy user of the Dash Bootstrap Components library, these components are a great supplement, thank you for your work!

Passing custom control to menu?

Is there a way to pass a custom control to Menu? Currently I get the '...' ActionItem, but would really like to use my own button as described in https://mantine.dev/core/menu/.

Great job, btw. Very helpful!

RadioGroup not rendering fully

I've been experiencing this issue lately with dmc.RadioGroup.

Using the docs example :
dmc.RadioGroup( id="radiogroup", data=[ {"value": "react", "label": "React"}, {"value": "ng", "label": "Angular"}, {"value": "svelte", "label": "Svelte"}, {"value": "vue", "label": "Vue"}, ], value="react", label="Select your favorite framework/library", size="sm", )
This is how the output looks like:

I can't still click on the options but it doesn't display the same way as in the demo.

LoadingOverlay component

Hi

A newbie to web development here. for newbies like me, this package is a god-send. I can't thank you enough for putting this together and doing such an amazing job at docs (which I am using to learn) as well!

Do you think we could have the below from mantine as well please?

https://mantine.dev/core/loading-overlay/

I am not very good at web development, but, if there is a straight forward way to migrate, I am happy to help and send a PR. if you do this one, I will make a note of steps and follow it through to migrate others - how does that sound?

thanks
Roh

Examples for all components are needed

Hi,
I was going through Readme and none of the examples are present right now.
This is an amazing package @snehilvj. Thanks for creating it.
I would like to help with examples of things if you will allow me.
Thanks and Regards,
Karan

What to contribute?

Hey @snehilvj,

Very nice work on the components!

I came across mantine a few times since you first publish your post in the Dash Community, so I took a deeper look and I am 100% sold on the idea of having its components available in Dash.

As I mentioned in the post, I was working in Dash Chakra UI Components, which I ended up losing the enthusiasm around it after I switched jobs... So I would like to join forces with you and Emil to make dmc great for the community.

The question is what can I help you with? I imagine there are many components to implement and I can help with that. But I can also take the testing part that is in the TODO list as first issue, as I have done it for Chakra for unit (Jest) and integration (pytest) tests...

Let me know your thoughts.

Unable to add an image/icon to Select options

Hi! I'm new to mantine components for Dash in Python, and I'm trying to use the Select component to show different options with an icon in the left, as I previously did with the component Dropdown of dash components.

I have decided to use the Select component of dash-mantine in order to separate the select options by categories, the only problem is that, when I try to set the option's label to an Image component, it returns an error.

This is the code I've created. As it is shown, the label instead of only being a string, is a Div component that includes the image I want to show side by side the value of the option.

                     dmc.Select(
                        label="Select framework",
                        placeholder="Select one",
                        id="framework-select",
                        value="ng",
                        data=[
                            {
                                "value": "react",
                                "label": html.Div(
                                    [
                                        html.Img(
                                            src="assets/tasks-list/Penguin.png",
                                            height=20,
                                        ),
                                    ]
                                ),
                            },
                            {
                                "value": "svelte",
                                "label": html.Div(
                                    [
                                        html.Img(
                                            src="assets/tasks-list/Penguin.png",
                                            height=20,
                                        ),
                                    ]
                                ),
                            },
                        ],
                        style={"width": 200, "marginBottom": 10},
                    ),
                    dmc.Text(id="selected-value"),

This is how the Select component looks:

Although, when I click on the Select component an error is thrown in the inspector console. This is the error:

My question here is: is it possible to have an image side by side with the text value on the select component options?

Thanks in advance for any response 😉

switch progress bar color depending on the theme

Hi there,

Again, this is not really issue. Because you don't have a discussion section, I'll post my question here; hope that's okay?

My question: is there a way to change the colours in the progress bar after changing the theme, so that the colour looks more consistent with each of the dark/light background?

Allow me to explain:

In light mode, the progress bars now look like this:

In the dark mode:

Because of the dark background, it is far too gleaming.

The obvious solution is to use a callback to switch colours on the fly with a theme switch. As an example:

@callback(
    Output(component_id="progress_bar", component_property="sections"),
    Input(component_id="theme_switch", component_property="n_clicks"),
)
def on_switch():
    """blablabla"""
    return ["""__some sections with new colors___"""]

The problem with this method is that none of the supported colours are appropriate for the dark mode (apart from dark and gray). I am thinking of something like a "darker indigo":
"dark", "gray", "red", "pink", "grape", "violet", "indigo", "blue", "cyan", "teal", "green", "lime", "yellow", "orange"

Is it possible to make the progress bar colour look more "darky" in dark themes? Perhaps by adjusting the transparency? Is this currently an option?

Great work!
Don

updating the value of the Slider

Hi, Really appreciate your work on this awesome project!

I have a small query, is it possible to update the dmc.Slider value through callbacks. I have tried to change the value.
its value prop changes but It is not reflecting on UI side.

Here's the small script. it prints the how the current value has changed for the slider after clicking the buttons. but it doesn't reflect on UI

from dash import Input, Output, State, no_update, ctx, Dash, no_update
import dash_mantine_components as dmc


app = Dash(__name__)

@app.callback(
    Output("slider", "value"),
    Input("prev", "n_clicks"),
    Input("next", "n_clicks"),
    State("slider", "value")

)
def changeValue(prev_, next_, current):
    if not (prev_ or next_):
        return no_update
    
    print(ctx.triggered_id, "current", current)
    if ctx.triggered_id == "prev":
        return current - 1
    
    if ctx.triggered_id == "next":
        return current + 1


app.layout = dmc.Group(
    [
        dmc.ActionIcon("prev", id="prev", n_clicks=0),
        dmc.Slider(id="slider", max=100, value=1, style={"width": "100px"}),
        dmc.ActionIcon("next", id="next", n_clicks=0)
    ], style={
        "marginTop": "66px"
    }
)
app.run_server()

Thank you.

DateRangePicker modal does not render inside of bootstrap offcanvas

Hi there, thank you for your great work! This library is a very valuable extension to the dash ecosystem.

I have to report an issue with the DateRangePicker component. The picker popup does not render when inside an offcanvas sidebar from the dash bootstrap components. I have no idea about what the problem might be here. I drew up a minimal reproducible example

import dash
import dash_bootstrap_components as dbc
import dash_mantine_components as dmc
import flask
from dash import dcc, html
from dash.dependencies import Input, Output, State

server = flask.Flask("app")
server.secret_key = "LOREM IPSUM"

app = dash.Dash("app", server=server, external_stylesheets=[dbc.themes.BOOTSTRAP])

app.layout = dbc.Container(
    dbc.Row(
        dbc.Col(
            [
                html.H1("Issue with Offcanvas"),
                # THIS ONE WORKS
                dmc.DateRangePicker(id="picker_outside"),
                dbc.Button("Open Offcanvas", id="toggle"),
                dbc.Offcanvas(
                    [
                        html.Div(
                            [
                                html.H1("Offcanvas Content"),
                                # THIS ONE DOESN'T WORK
                                dmc.DateRangePicker(id="picker_inside"),
                            ]
                        )
                    ],
                    id="offcanvas",
                    is_open=False,
                    placement="end",
                ),
            ],
        )
    ),
    className="container",
)


@app.callback(
    Output("offcanvas", "is_open"),
    Input("toggle", "n_clicks"),
    State("offcanvas", "is_open"),
)
def toggle_offcanvas(n, is_open):
    if n:
        return not is_open
    return is_open


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

Tabs with empty children throws a javascript exception

When I set the children to a Tabs object to either None or [], I get a javascript exception:

"undefined is not an object (evaluating 'S[j].props')"

That happens when I write something line:

dmc.Tabs( id='some-id', children=[] )

or

dmc.Tabs( id='some-id', children=None )

For others running into this problem, my workaround when I shouldn't have any tabs is to create a Tab() and assign it a class_name where the style is 'display: none'.

So in my python code:

dmc.Tabs( id='some-id', children=dmc.Tab(label='', class_name='tab-hidden')) # Must have at least 1 tab or throws error

And in my css file:

.tab-hidden { display: none; }

Support for RangeSlider Input

Congratulations on such an awesome development!

Any plans for supporting the RangeSlider component? It seems to be available in Mantine, so I hope it is not hard work.

Thank you in advance!

Scrolling Capabilities within Drawer

I have recently come across this package and I must say I have been very impressed by it. I am still pretty new in this but I am not sure whether it is possible to do scrolling within a drawer if the content exceeds the screen size.

Thanks!

Change Loader color variant

Hi,

I am trying to change the color variant of a Loader inside a filled Alert. The alert is the default solid dark blue and I want better contrast with the Loader inside it. I tried using color="blue.1" for a light blue, according to the docs, but I get the following error:

Invalid argument `color` passed into Loader.
Expected one of ["dark","gray","red","pink","grape","violet","indigo","blue","cyan","teal","green","lime","yellow","orange"].
Value provided: "blue.1"

The Alert call is

dmc.Alert(
        children = "uploading stuff now...",
        title = [
          dmc.Group(
            children = [
              dmc.Loader(
                color = "blue.1",
                size = "xs",
                variant = "oval",
                style = {"display":"flex","align-items":"flex-end"}
              ),
              html.Div("Uploading!")
            ],
            direction = "row",
            noWrap = True,
            spacing = "md"
          )
        ],
        id = "status-alert",
        color = "blue",
        variant = "filled",
        radius = "md",
        withCloseButton = True,
      )

Any suggestions?

Thanks!

Not an issue

Hi there,

This is an underappreciated and underadvertised project! I'm so glad I came across this today. Excellent work! Please continue!

Cheers,
Don

Tooltip not hiding after hover

When a Tooltip is used with a disabled component, the tooltip doesn't disappear on hover end (unless the mouse is moved "out of the component" via the tooltip itself). As a result, the tooltip just "keeps hanging",

Here is a minimal example,

import dash
import dash_mantine_components as dmc

app = dash.Dash()
app.layout = dmc.Tooltip(dmc.Button("Click me", disabled=True), label="I am a tooltip")

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

dayStyle property in datePicker

Hi! I have a database with some information over the years. The user using the datePicker can select a day and if there is data then it can continue but if not an alert is generated. I would like it to make it easier for the user to select a date by highlighting the days with data with a green background (so when creating the component I would pass in a list of days and modify its appearance). I have seen this is possible in the original library Styles based on date by using the property dayStyle but I am not sure if this is possible in the python version since it does not appear in the documentation.

The value of the slider component is not updated

Trying to use a number input to update the slider component, but it's not possible.

Example of code:

app.layout = html.Div(
    [
        dmc.NumberInput(
            id="input_number",
            min=0,
            max=100
        ),
        dmc.Slider(
            id="slider",
            min=0,
            max=100
        )
    ],
)

@app.callback(
    Output("slider", "value"),
    Input("input_number", "value"),
)
def uptade_input_value(value):
    return value

Add `href` argument to Button

It would be great if dmc.Button() had an href keyword argument, so that a button click can route to a URL

Dash app not loading when not in debug mode

Hi, first of all thanks for porting this amazing library!

My dash application works perfectly when launched in debug mode, but when deactivating it the application will not load, in developer settings I can see it's due to:

The resource from “https://unpkg.com/[email protected]/dash_mantine_components/dash_mantine_components.min.js” was blocked due to MIME type (“text/plain”) mismatch (X-Content-Type-Options: nosniff)

Naming convention className or class_name

I noticed that dash bootstrap components have deprecated the className keyword in favor of class_name. Have you made any thoughts about which convention to follow, @snehilvj? If you end up choosing to follow that convention (i.e. to use class_name), I guess it would be better to make the switch sooner than later.

Accordion Component Issues with v0.6.0

Hello,

When upgrading from v0.5.0 to v0.6.0, the behavior of the accordion component appears to have changed. The first screenshot is when using v0.5.0:

This second screenshot is the exact same code but is using v0.6.0 of dmc:

I can do some more debugging on my end but first I wanted to check and see if anything was intentionally changed with the accordion component for this update.

Thanks in advance for any help!

SegmentedControl treats value 0 as falsey

It appears that the SegmentedControl component is treating a value of 0 as falsey. For example:

dmc.SegmentedControl(id='test', data=[
    {'label': '0 Outs', 'value': 0},
    {'label': '1 Out', 'value': 1},
    {'label': '2 Outs', 'value': 2}
], size='sm', color='green', value=0),

Yields the following:

bandicam.2022-03-07.13-30-48-412.mp4

onLabel and offLabel not working in switch component (Inner Labels)

Inner Labels

import dash_mantine_components as dmc

dmc.Switch(
label="I agree to sell my privacy",
onLabel="ON",
offLabel="OFF"
)

Also the bullet is not positioned at center of slot, its is top aligned

Additional arguments/properties for dmc.AccordionItem

dmc.AccordionItem needs style and class_name properties to allow for component-level styling.

Would also be very useful for dmc.AccordionItem to have a boolean opened property that indicates whether or not the item is opened.

Color index support

Is there any supprt for color index as per https://mantine.dev/theming/colors/#colors-index-reference?

The following code seems to have no effect
dmc.Button( "Load data", variant="filled", color="green.9", fullWidth=True, n_clicks=0, ),

Ps. great library many thanks!!

Add thousand separator to input components

Hello! It would be verry useful with thousand separators in NumberInput components, with option on which separator to use (eg. "," or whitespace).

Documentation for the library

Hi
I'm starting this thread as I need some help from the community in creating the documentation for the library.

I have started a project dmc-demo for this, and its deployed here. The latest version that's been released is 0.2.1, but before I move on with further releases, I'd like to work on the documentation, without which, people can obviously not use it properly.

I am already looking at the docs for official dash components and the docs for dash bootstrap components.

If anyone has any suggestions for the docs or some resources I can use, or some pointers for starting out, please do provide them.

Thanks

@emilhe @Karan-S-Mittal

Add Pagination component

Hello, it would be very helpful that the package supports Pagination component
https://mantine.dev/core/pagination/

Currently I have to use dash bootstrap Pagination as a workaround

Publish to unpkg CDN

Hi! Thanks for this project that brings great components to the Dash ecosystem!

I would like to use dash-mantine-components for a Dash project in production where I prefer to use the unpkg CDN for delivering the JS sources of Dash components. However I noticed that the sources for dash-mantine-components are inexistent on unpkg.

Do you plan to publish your components to NPM to make them available on unpkg?
Thanks!

Component similar to Loader

Hi

Thanks for putting this together and your help earlier with Loader. May I request for a loader component similar to the below. The one you helped with earlier, seems to work with a Button. I now have a requirement to show loader when, say, the page/tab loads. One option is to use Skeleton, however, I feel Loader looks better

https://dash.plotly.com/dash-core-components/loading

please do let me know if there is a way to achieve this and sorry if I missed anything

Thanks

How to implement Dash bootstrap theme to dash mantine components

I had integrated mantine components like buttons, text input, accordion etc to my bootstrap based Dash APP. while selecting the DARK themes all component labels and text is unreadable. Is there a way to resolve this. is there an simple way to resolve this at least.

the label colours and text colours.

Notification cannot be opened multiple times in version 0.5.0

import dash

app = dash.Dash(external_stylesheets=[dbc.themes.BOOTSTRAP])
import dash_mantine_components as dmc
from dash import Output, Input, html

# from dash_iconify import DashIconify

app.layout = dmc.NotificationsProvider(
    [
        html.Div(id="notifications-container"),
        dmc.Button("Show Notification", id="notify"),
    ]
)


@app.callback(
    Output("notifications-container", "children"),
    Input("notify", "n_clicks"),
    prevent_initial_call=True,
)
def n_clicks(n_clicks):
    return dmc.Notification(
        title="Hey there!",
        id="simple-notify",
        action="show",
        message="Notifications in Dash, Awesome!",
        # icon=[DashIconify(icon="ic:round-celebration")],
    )


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