Dash Mantine Components 0.14.1

Dash Python
,
1

Hi All

dmc 0.14.1 is out now! It’s a breaking release so please be careful while upgrading. Few components are still missing from the docs (and a fewer from the package as well) and will be added in due time. In dmc 0.14.x we took a jump from underlying Mantine v5 to Mantine v7. The changelog is so big, that I think it’s better to use Mantine’s changelog: Version v7.0.0 | Mantine.

You can still use the older version (0.12), docs for which are available at: https://dmc-docs-0-12.onrender.com.

You can also select the docs version from the top left of dash-mantine-components.com.

PS: Looking back, I think this release could have been handled better, nevertheless, thanks to the supportive community (especially the people on dmc discord, dmc 0.14 is out.

14 Likes
2

One of the best dash packages available, if you haven’t seen it yet, should absolutely check it out.

1 Like
4

Thanks for pinning the post @adamschroeder. I have added a migration guide to the Migration Guide. Please let me know if I missed any thing.

1 Like
5

markdown2dash 0.1.1 is also out. This library helps you render your markdown into a fully functional dash app. Check out its output here: http://markdown2dash.onrender.com. It’s a free tier hosting, so might take some time to load. DMC docs are completely generated using this package.

1 Like
6

Dash Mantine is absolutely awesome, big THANK YOU to all collaborators! The Migration Guide to this new version was key to make a smooth change.

I have a question for some time and with v0.14 this seems to be more relevant. On Python’s IDE (I use Spyder) I can see the Keyword arguments available for each component.

For instance for a dmc.Text I can see:

Keyword arguments:

- gradient (dict; optional):
    Gradient configuration, ignored when `variant` is not `gradient`,
    `theme.defaultGradient` by default.

    `gradient` is a dict with keys:

    - deg (number; optional)

    - from (string; required)

    - to (string; required)

...

- truncate (boolean | number | string | dict | list; optional):
    Side on which Text must be truncated, if `True`, text is truncated
    from the start.

...

- mah (string | number; optional)

- maw (string | number; optional)

- mb (number; optional)

and so on.

Note that some keyword arguments are well explained, like the “gradient” and “truncate” examples above. I mean, after the argument name there are a few important lines of text to explain what is this argument used for and how to configure it.

On the other hand some others keyword arguments doesn’t have such explanation, as the “mah”, “maw” and “mb” examples above. I’ve tried to find some more information about these keywords either at the dmc docs and at Matine docs, but didn’t find anything.

Is there any documentation available to tell what is the meaning of these keyword arguments and how should we use them?

Thank you!

7

Hello, these are style props. You can see them on this page of docs: Style Props

So instead style={“padding”: 0} you can use just p=0. There are even more options for additional responsive styling etc.

2 Likes
8

What @martin2097 said + the following:

Not sure if you noticed, the docs are changing fast. I already have some items in my backlog and now added one more. Thanks for the feedback.

1 Like
9

Thanks . This is a great package.
Is there a way to change to the previous dark mode? Right now, for example, as we can see below:

  • cannot see the changes by toggling on different choices.
  • even cannot see the line connecting the components.
    Not sure if it is a Chrome browser issue.

image
image1883×707 43.1 KB

10

This is a css loading issue. Try a hard reload. Few people have faced this issue and I’m not aware of the cause.

11

I wish I would have seen this earlier. I spent several days trying to figure out why my app was suddenly broken in a bad way. I am using dmc.Switch. Where I was deploying started using dmc 0.14.1. Whenever a page loaded that was using dmc.Switch the page would not show. I would not get any errors or anything to tell me why. I finally narrowed it down to dmc.Switch. :frowning_face:

12

Many thanks for your effort.
However, there are huge changes to my app, especially Keyword arguments of DMC components used.
Following up the upgrade, I was wonder if there is a fast way to change the argument names such as “spacing” → “gap”, “position” → “pos”, “weight” -->“fw”, and many more.
Also, some arguments such as “Creatable” in dmc.Select(), seem no long exist. Were they completely removed in the new dmc version?
Cheers,

13

You can always do find and replace. I don’t know any other way that might help in this. About creatable parameter, yes it has been removed. But you can use TagsInput to achieve the same effect as MultiSelect with creatable prop enabled. I have added this component but will be available in 0.14.3.

14

Hi @snehilvj, quick question.
Has the Styles API changed in this new DMC version? I’m asking because I think that a nice feature for user experience is to highlight the property of a component (like a border or a background) when the user is hovering the mouse over it.

And the way I used to do that was with Styles API, like the MWE below.

import dash
from dash import Dash
import dash_mantine_components as dmc

dash._dash_renderer._set_react_version('18.2.0')

app = Dash(__name__)

app.layout=dmc.MantineProvider(
    dmc.Button(
        'Button',
        styles={
            'label': {
                'color': 'pink',
                '&:hover':{
                    'color': 'green'
                }
            }                
        }
    )
)

app.run_server(debug=True, port=8050)

But the ‘&:hover’ declaration seems not to be working in this new DMC version, I mean, the button’s label remain pink, even when I hover the mouse over it (when the label’s color should change to green).

By the way, is there another way to accomplish this task of highlighting the property of a component when the user is hovering the mouse over it?

Thank you!

15

Yeah version V7 in Mantine dropped support for nested styles object. They now do it using postcss. Thing is postcss needs to be compiled at build time. So this doesn’t carry over to dash ecosystem directly. I have been trying to find a way to do it but no success so far. You can still use classNames property and css to achieve this effect. Have a look at Styles API.

2 Likes
16

Really great package @snehilvj. Many thanks for all your efforts.
Any chance that the TransferList component will come back in a later release? Or is there an easy alternative to this?

17

Unfortunately, Mantine has dropped support for TransferList so unless that changes, it won’t be available in DMC.

18

Hey @Werner

I created an all-in-one component to get the TransferList component working with DMC 0.14, feel free to use and modify it if it works for you!

This GitHub repo has the for the component as well as an example app to show how to use it.

dmc-transferlist-aio

6 Likes
19

Would love to see this coming back somehow :')

1 Like
20

Many thanks @RenaudLN . Looks great. Will try to migrate my dmc 0.13 with TransferLists included in the next days and provide feedback.