Dash Mantine Components new release - 0.11.0a0

Hi all

A new version of dmc is available now based on Mantine v5 - 0.11.0a0 :fire: :fire: . Here are the release notes from GitHub verbatim:

This is an alpha release based on Mantine v5. This version of dmc is a big overhaul with lots of new features but at the cost of backward compatibility for many components. Documentation for this release can be found here. You might see some red in the browser dev tools window, but all of that will be fixed in due time.

Changed

  • Updates for Mantine v5.
    • New component APIs such as for Tabs, Accordion, RadioGroup, etc.
    • Prop names
  • Adopted typescript which simplified the code a lot. Thanks to the Plotly team for providing that ability.
  • Organisation of components source code.

Added

  • New components:
    • FloatingTooltip
    • Aside, Footer
    • RangeSlider

Removed

  • Notification and NotificationsProvider component for now, as they are not compiling for some reason.

Special thanks to @AnnMarieW for sponsoring and supporting the development of this project.


PS: If you or your organisation like using dash-mantine-components and want to support my work on dmc and other projects such as dash-iconify, dash.nprogress, etc, then you can do so by visiting this. Any kind of support is highly appreciated.

12 Likes

Hey @snehilvj - This new release is Awseome :rocket: Thanks for all the work you do on dash-mantine-components. It’s an amazing library!

I just wanted to provide a little more information on some of the cool new features in this release.

As Snehil mentioned, there are some breaking changes to props, propnames and components in this release. These changes provide great new features – and make it so the library keeps up with the underlying Mantine library which is undergoing rapid development. If you are using dash-mantine-componets in production, be sure to pin your current version until you are ready to upgrade.

You can find the official version of the docs here (currently 0.10.2):

And the Latest alpha release (0.11.0a0) here:

Note that this is a temporary link for the alpha release and it may not be available in the future.

You’ll see the biggest breaking changes in the Accordion, Tabs and RadioGroup components.
These components are now made up of subcomponents to make them more customizable.
For example, you can use style props such as p, px, mx, etc. on each of the sub component along with className, and id. Since each sub-component has a children prop, it makes it easy to add things like images and icons and other components.

For Dash it also means that you will be able to write callback on each sub component. :tada:


Accordion

The new version of the dbc.Accordion now has dbc.AccordionControl component for the label,
and the dbc.AccordionPanel component for the content. This allow for a lot more customization of the Accordion.

Basic Example

image

New way in 0.11.0a0

dmc.Accordion(
    children=[
        dmc.AccordionItem(
            [
                dmc.AccordionControl("Customization"),
                dmc.AccordionPanel(
                    "Colors, fonts, shadows and many other parts are customizable to fit your design needs"
                ),
            ],
        ),
        dmc.AccordionItem(
            [
                dmc.AccordionControl("Flexibility"),
                dmc.AccordionPanel(
                    "Configure temp appearance and behavior with vast amount of settings or overwrite any part of "
                    "component styles "
                ),
            ],
        ),
    ],
)

Old way - Version <0.10.2

dmc.Accordion(
    children=[
        dmc.AccordionItem(
            "Colors, fonts, shadows and many other parts are customizable to fit your design needs",
            label="Customization",
        ),
        dmc.AccordionItem(
            "Configure temp appearance and behavior with vast amount of settings or overwrite any part of component "
            "styles",
            label="Flexibility",
        ),
    ],
)

Accordion example with components

accordion

import dash_mantine_components as dmc
from dash import Dash

app = Dash(__name__)

def content(title, pct):
    return dmc.Grid(
        children=[
            dmc.Col(dmc.Text(f"{title}", weight=700), span=2 ),
            dmc.Col(dmc.Text(f"{pct}% budget used", align="center"), span=3),
            dmc.Col(dmc.Progress(value=pct, label=f"{pct}", size="xl", color="green"), span=7 ),
        ],
        gutter="sm",

)

accordion =  dmc.Accordion(
    dmc.AccordionItem(
        [
            dmc.AccordionControl(content("Transportation", 25)),
            dmc.AccordionPanel([content("Trains", 40), content("Planes", 75), content("Automobiles", 30)])
        ],
        value="1"
    ),

)

app.layout= dmc.Container(accordion)

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

New prop for Accordion: variant

variant="separated" is great for FAQ
image


faq = dmc.Accordion(
    children=[
        dmc.AccordionItem(
            [
                dmc.AccordionControl("How Can I reset my password"),
                dmc.AccordionPanel(
                    "Answer here"
                ),
            ],
            value="password",
        ),
        dmc.AccordionItem(
            [
                dmc.AccordionControl("How to I update my credit card on file"),
                dmc.AccordionPanel(
                   "Answer here"
                ),
            ],
            value="creditcard",
        ),
    ],
    variant="separated"
)

Tabs

Tabs is now made up of dmc.TabsList which has dmc.Tabs as children. The dmc.Tabs give you fine control of styling each individual tab. This makes it super easy to include things like image and icons.

Be sure to check out all the ways you can customize the tabs in the new docs Tabs section

New way in 0.11.0a0

dmc.Tabs(
    [
        dmc.TabsList(
            [
                dmc.Tab("Gallery", value="gallery"),
                dmc.Tab("Messages", value="messages"),
                dmc.Tab("Settings", value="settings"),
            ]
        ),
        dmc.TabsPanel("Gallery tab content", value="gallery"),
        dmc.TabsPanel("Messages tab content", value="messages"),
        dmc.TabsPanel("Settings tab content", value="settings"),
    ],
    color="red",
    orientation="vertical",
)

Version <0.10.2

dmc.Tabs(
    color="red",
    orientation="vertical",
    children=[
        dmc.Tab(label="Gallery", children=["Gallery tab content"]),
        dmc.Tab(label="Messages", children=["Messages tab content"]),
        dmc.Tab(label="Settings", children=["Settings tab content"]),
    ]
)

RadioGroup

The RadioGroup is now composed of the dmc.RadioGroup and dmc.Radio components - making it possible to customize each radio button in the group.

New way in 0.11.0a0

data = [["react", "React"], ["ng", "Angular"], ["svelte", "Svelte"], ["vue", "Vue"]]

dmc.RadioGroup(
    [dmc.Radio(l, value=k) for k, l in data],
    id="radiogroup-simple",
    value="react",
    label="Select your favorite framework/library",
    size="sm",
    mt=10,
)

Version <0.10.2

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",
),
dmc.Space(h=10),
dmc.Text(id="radio-output"),

New Components

dmc.JsonInput
image

dmc.RangeSlider
image

dmc.FloatingTooltip
floatingtooltip

Aside, Footer

  • These work the same as the Navbar, but are in different positions. You can see this in action in the new docs. See the code

Simple example: (by Snehil)

from dash import Dash
from dash_iconify import DashIconify

import dash_mantine_components as dmc

app = Dash(__name__)

app.layout = dmc.Container(
    fluid=True,
    children=[
        # add top navigation
        dmc.Header("Title", fixed=True, height=70, p="md"),
        # add left side pane
        dmc.Navbar(
            "Side nav", fixed=True, width={"base": 300}, position={"top": 70}, p="md"
        ),
        # add right side pane
        dmc.Aside(
            "Table of contents",
            fixed=True,
            width={"base": 300},
            position={"top": 70, "right": 0},
            p="md",
        ),
        # add bottom section
        dmc.Footer("Footer", fixed=True, height=70, p="md"),
    ],
)


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

New Props

There are many, many new props for new functionality and for styling. Best to check with the docs


Take the new release for a spin! When you find cool new stuff, feel free to share an example here

4 Likes

Hi @snehilvj ,

Thanks for amazing library, I’m almost using Dash Bootstrap Component for my Dash and I have a question that is there anyway to change theme of dmc same with dbc? Something like external_stylesheets=[dbc.themes.LUX]. Thank you.

It’s not currently possible.

1 Like

@everyone

0.11.0a1 is out!

Added

  • New components:
    • Card, CardSection
    • Burger
    • AppShell
  • Persistence props
  • name prop in text inputs for forms.
  • Ability to debounce callbacks by specifying a duration in all text inputs.

Fixed

  • Button not showing disabled state.
  • Inability to move RangeSlider left handle when min prop is set to a negative value. (Fixed in upstream)

Card component screenshots:

Will soon update docs too for the new components.

4 Likes

Woohoo.

This makes my flask-login flow work with dmc!

Thanks @snehilvj

1 Like

Good to know!

Hope that will be release soon. Something like theme changing in you website like that:
Screenshot 2022-11-09 114047

Thank you.

1 Like