📣 Dash Mantine Components new release 0.15.1

Dash Python
1

We’re thrilled to announce the release of Dash Mantine Components 0.15.1. You’ll find lots of new features, component updates, fixes, and documentation enhancements. Let’s dive into the highlights!

:art: New Features

:star2: Plotly Figure Templates with Mantine Themes

Dash Mantine Components now includes Mantine-themed Plotly figure templates to style your figures with colors, fonts, and layouts that match Mantine’s design system. Use the mantine_light or mantine_dark templates when using the Mantine light or dark color schemes. It’s also possible to customize the templates too!

Here’s how you can use them:

# Adds 'mantine_light' and 'mantine_dark' figure templates
dmc.add_figure_templates()

px.histogram(
    dff, x='lifeExp', 
    title='2007 Distribution of Life Expectancy', 
    template="mantine_dark"
)

:point_right: Explore live demos:

template=“mantine_light”

template=“mantine_dark”

Plotly Figure Templates with a custom Mantine Theme

Learn how to create Plolty Figure templates based on your custom Mantine theme. These figure templates were
created for a Mantine theme with the primary color of green.

For more details and examples see the Figure Template documentation


:cyclone: New SemiCircleProgress Component

Visualize progress with the SemiCircleProgress component!

:open_book: Check out the SemiCircleProgress documentation for details.

:performing_arts: Auto-Generated Colors for Avatars

The Avatar component now can automatically generates colors based on the user’s name.

:bulb: See examples in the Avatar documentation.

image

:chart_with_upwards_trend: LineChart with gradient

:bulb: Learn more: LineChart Gradient documentation

image

:hamburger: Added lineSize prop to Burger

#432 by @ChinoUkaegbu :pray:

Now you can control both the size of the Burger component and the lineSize (width of the lines)

:open_book: Try it in the Burger documentation.

:white_check_mark: More New Props

  • Added acceptValueOnBlur to TagsInput .
  • Added hideWithOnePage prop to Pagination which hides pagination when there is only one page.
  • Added disabled prop to Radio #427 by @namakshenas

:hammer_and_wrench: Fixed

  • Popover - enabled the popover to close when clicking outside #423 by @magicmq
  • Fixed Issue #413 where the increment/decrement buttons didn’t work correctly when the NumberInput value is a number represented by a string. This was fixed upstream in Mantine 7.14.2
  • Fixed Issue #439 where the Slider did not respect the restrictToMarks with keyboard inputs. This was fixed upstream in Mantine 7.14.3
  • Enabled searchValue in the MultiSelect component to be updated in a callback #441. This fix makes it easy to select multiple items based on the same search criteria.

:book: New in the Docs

Help Center

In the dmc-docs Github, you will find a help_center folder with complete minimal examples that you can run.

  • An app with a theme switch component and the default Mantine-themed Plotly figure templates. Shows how to update multiple figures in a callback with pattern matching callbacks and Patch for high performance updates.
  • An example of creating a custom Mantine-themed Plotly figure templates for an app that uses green as the primary color.

TagsInput

The TagsInput component is similar to MultiSelect but allows users to add new options by typing them directly into the input field. This section has been updated with 18 new examples!

:pray: Thank You, Contributors!

Special thanks to New Contributors

Thanks you also to @alexcjohnson for reviewing all the pull requests and providing invaluable feedback :slightly_smiling_face:

6 Likes