├── .gitignore ├── LICENSE ├── README.md ├── assets ├── app.png ├── custom_loadingoverlay.gif ├── examples-js │ ├── barcolor.js │ ├── celcius_label.js │ ├── chart-tooltip.js │ ├── disabled_dates.js │ ├── format-number-intl.js │ ├── format-scatter-chart.js │ ├── format-usd.js │ ├── option_filter.js │ ├── option_sort.js │ ├── render_option_multiselect.js │ ├── render_option_select.js │ ├── render_option_tagsinput.js │ └── scale-label.js ├── examples │ ├── chart-color.css │ ├── chart-grid-text-colors.css │ ├── checkbox.css │ ├── light-dark-demo.css │ ├── light-dark-var.css │ └── remove_placeholder.css ├── favicon.ico ├── hotkey.js ├── m2d.css ├── radiocard.css ├── script.js └── styles.css ├── components ├── appshell.py ├── header.py └── navbar.py ├── docs ├── accordion │ ├── accordion.md │ ├── chevron.py │ ├── compose.py │ ├── default.py │ ├── disabled.py │ ├── icons.py │ ├── interactive.py │ ├── label.py │ ├── multiple.py │ ├── state.py │ ├── styles.py │ └── transition.py ├── actionicon │ ├── actionicon.md │ ├── autocontrast.py │ ├── colors.py │ ├── gradient.py │ ├── group.py │ ├── interactive.py │ ├── loader_props.py │ ├── loading.py │ ├── simple.py │ ├── size_input.py │ └── variant.py ├── affix │ ├── affix.md │ └── simple.py ├── alert │ ├── alert.md │ ├── auto.py │ ├── colors.py │ ├── dismissible.py │ ├── interactive.py │ └── simple.py ├── anchor │ ├── anchor.md │ ├── simple.py │ ├── text.py │ └── underline.py ├── appshell │ └── appshell.md ├── areachart │ ├── area_animation.py │ ├── areachart.md │ ├── areacolor-light-dark.py │ ├── areacolor.py │ ├── axislabels.py │ ├── clickdata.py │ ├── connectnulls.py │ ├── customizedots.py │ ├── dashedarealine.py │ ├── data.py │ ├── fillopacity.py │ ├── grid-text-color-light-dark.py │ ├── grid-text-color.py │ ├── highlighthover.py │ ├── hoverdata.py │ ├── interactive.py │ ├── legend.py │ ├── legendposition.py │ ├── percent.py │ ├── referencelines.py │ ├── removetooltip.py │ ├── rightyaxis.py │ ├── rotatexaxislabels.py │ ├── serieslabels.py │ ├── split.py │ ├── splitcolors.py │ ├── stacked.py │ ├── strokedasharray.py │ ├── strokewidth.py │ ├── sync.py │ ├── tooltipanimation.py │ ├── units.py │ ├── valueformatter.py │ ├── vertical.py │ ├── xaxisoffset.py │ ├── xyaxis.py │ └── yaxisscale.py ├── aspectratio │ ├── aspectratio.md │ ├── flex.py │ ├── map.py │ ├── simple.py │ └── video.py ├── avatar │ ├── allowedinitialscolors.py │ ├── avatar.md │ ├── contributors.py │ ├── group.py │ ├── initials.py │ ├── interactive.py │ ├── placeholder.py │ ├── simple.py │ └── tooltip.py ├── badge │ ├── badge.md │ ├── colors.py │ ├── gradient.py │ ├── interactive.py │ ├── radius.py │ ├── rounded.py │ ├── section.py │ ├── size.py │ └── variant.py ├── barchart │ ├── area-color-light-dark.py │ ├── areacolor.py │ ├── axislabels.py │ ├── bar_animation.py │ ├── bar_value_label.py │ ├── barchart.md │ ├── barcolor.py │ ├── barprops.py │ ├── clickdata.py │ ├── custom-tooltip.py │ ├── data.py │ ├── grid-text-color-light-dark.py │ ├── highlighthover.py │ ├── hoverdata.py │ ├── interactive.py │ ├── legend.py │ ├── legendposition.py │ ├── percent.py │ ├── referencelines.py │ ├── removetooltip.py │ ├── serieslabels.py │ ├── stacked.py │ ├── stacked_mixed.py │ ├── strokedasharray.py │ ├── svg.py │ ├── sync.py │ ├── tooltipanimation.py │ ├── units.py │ ├── value-formatter.py │ ├── vertical.py │ ├── waterfall.py │ ├── xaxisoffset.py │ ├── xyaxis.py │ └── yaxisscale.py ├── blockquote │ ├── blockquote.md │ ├── icon.py │ └── simple.py ├── box │ └── box.md ├── breadcrumbs │ ├── breadcrumbs.md │ └── simple.py ├── bubblechart │ ├── area-color-light-dark.py │ ├── bubblechart.md │ ├── clickdata.py │ ├── data.py │ ├── grid-text-color-light-dark.py │ ├── hoverdata.py │ ├── interactive.py │ ├── remove_tooltip.py │ ├── simple.py │ └── valueformatter.py ├── burger │ ├── burger.md │ ├── color.py │ ├── interactive.py │ └── simple.py ├── button │ ├── button.md │ ├── colors.py │ ├── compact.py │ ├── full.py │ ├── gradient.py │ ├── group.py │ ├── icons.py │ ├── interactive-justify.py │ ├── interactive.py │ ├── justify.py │ ├── loader-props.py │ ├── loading.py │ └── variant.py ├── card │ ├── border.py │ ├── card.md │ └── simple.py ├── carousel │ ├── active.py │ ├── autoplay.py │ ├── autoplay_props.py │ ├── autoscroll.py │ ├── cards.py │ ├── carousel.md │ ├── containerquery.py │ ├── controls_icons.py │ ├── drag_free.py │ ├── hide_inactive_controls.py │ ├── images.py │ ├── indicator_styles.py │ ├── initial.py │ ├── interactive.py │ ├── responsive.py │ ├── show_controls_on_hover.py │ ├── simple.py │ ├── size_gap.py │ ├── tabs.py │ └── vertical.py ├── center │ ├── center.md │ ├── inline.py │ └── simple.py ├── changelogs │ └── V2.0.0.md ├── chartsintro │ └── chartsintro.md ├── checkbox │ ├── checkbox.md │ ├── checkboxcard.py │ ├── checkboxcardgroup.py │ ├── checkboxindicator.py │ ├── colors.py │ ├── group.py │ ├── iconcolor.py │ ├── icons.py │ ├── indeterminate.py │ ├── interactive.py │ ├── link.py │ ├── simple.py │ ├── sizes.py │ └── states.py ├── chip │ ├── chip.md │ ├── chipgroup_checklist.py │ ├── chipgroup_radio.py │ ├── chipgroup_radio_deselectable.py │ ├── icon.py │ ├── interactive.py │ ├── root.py │ ├── simple.py │ ├── states.py │ └── tooltip.py ├── code-highlight │ ├── code-highlight.md │ ├── copy_btn.py │ ├── expandable.py │ ├── inline.py │ ├── simple.py │ └── tabs.py ├── code │ ├── block.py │ ├── code.md │ ├── colors.py │ └── inline.py ├── collapse │ ├── collapse.md │ ├── nested.py │ ├── simple.py │ └── transition.py ├── colorinput │ ├── colorinput.md │ ├── disable-free-input.py │ ├── eyedropper.py │ ├── formats.py │ ├── interactive.py │ ├── preview.py │ ├── simple.py │ ├── swatches-only.py │ └── swatches.py ├── colorpicker │ ├── colorpicker.md │ ├── formats.py │ ├── picker.py │ ├── simple.py │ └── swatches.py ├── colors │ ├── color_c_props.py │ ├── color_index.py │ ├── color_prop.py │ ├── colors.md │ ├── colorswatch.py │ ├── custom_colors.py │ ├── light-dark-function.py │ ├── light-dark-var.py │ ├── light-dark.py │ ├── primaryshade.py │ └── theme_colors.py ├── compositechart │ ├── axislabels.py │ ├── chartcolor.py │ ├── clickdata.py │ ├── compositechart.md │ ├── custom-tooltip.py │ ├── customizedots.py │ ├── dashedlines.py │ ├── data.py │ ├── grid-text-color-light-dark.py │ ├── highlighthover.py │ ├── hoverdata.py │ ├── interactive.py │ ├── legend.py │ ├── legendposition.py │ ├── line-color-light-dark.py │ ├── pointslabels.py │ ├── referencelines.py │ ├── removetooltip.py │ ├── serieslabels.py │ ├── strokedasharray.py │ ├── strokewidth.py │ ├── sync.py │ ├── tooltipanimation.py │ ├── units.py │ ├── valueformatter.py │ ├── xaxisoffset.py │ ├── xyaxis.py │ └── yaxisscale.py ├── container │ ├── container.md │ ├── fluid.py │ └── simple.py ├── cssvariables │ ├── button.py │ ├── cssvariable_list.py │ ├── cssvariable_list_dark.py │ ├── cssvariable_list_light.py │ └── cssvariables.md ├── dash-iconify │ ├── dash-iconify.md │ ├── dmc.py │ └── props.py ├── dashprops │ └── functions-as-props.md ├── dateinput │ ├── clearable.py │ ├── dateinput.md │ ├── formats.py │ ├── interactive.py │ ├── minmax.py │ ├── simple.py │ └── time.py ├── datepicker │ ├── allowdeselect.py │ ├── datepicker.md │ ├── defaultdate.py │ ├── disabledates.py │ ├── disabledates_function.py │ ├── firstdayofweek.py │ ├── hideoutsidedates.py │ ├── hideweekdays.py │ ├── labelformat.py │ ├── level.py │ ├── maxlevel.py │ ├── minmax.py │ ├── multiple.py │ ├── numberofcolumns.py │ ├── range.py │ ├── rangesingledate.py │ ├── simple.py │ ├── weekenddays.py │ ├── weeknumbers.py │ └── yearmonformat.py ├── datepickerinput │ ├── clearable.py │ ├── columns.py │ ├── datepickerinput.md │ ├── errors.py │ ├── formats.py │ ├── locale.py │ ├── modal.py │ ├── multiple.py │ ├── range.py │ └── simple.py ├── datesprovider │ ├── consistentweeks.py │ ├── datesprovider.md │ └── simple.py ├── datetimepicker │ ├── clearable.py │ ├── datetimepicker.md │ ├── disabled.py │ ├── interactive.py │ ├── modal.py │ ├── seconds.py │ ├── simple.py │ ├── time-picker-props.py │ └── valueformat.py ├── divider │ ├── color.py │ ├── divider.md │ ├── label.py │ ├── orientation.py │ ├── simple.py │ └── sizes.py ├── donutchart │ ├── angle.py │ ├── chartlabel.py │ ├── clickdata.py │ ├── data.py │ ├── donut.md │ ├── donut_animation.py │ ├── hoverdata.py │ ├── paddingangle.py │ ├── segmentcolor.py │ ├── segmentlabels.py │ ├── size.py │ ├── stroke.py │ ├── strokewidth.py │ ├── tooltipdatasource.py │ ├── usage.py │ └── withouttooltip.py ├── drawer │ ├── drawer.md │ ├── placement.py │ ├── simple.py │ ├── sizes.py │ └── transition.py ├── fieldset │ ├── disabled.py │ ├── fieldset.md │ └── interactive.py ├── figuretemplates │ ├── mantine_figure_templates.py │ ├── multiple_figures.py │ ├── plotly_figure_templates.py │ ├── templates.md │ └── theme_switch.py ├── flex │ ├── flex.md │ ├── interactive.py │ └── responsive.py ├── getting-started │ ├── getting-started.md │ ├── hello_world.py │ └── interactive.py ├── grid │ ├── auto.py │ ├── columns.py │ ├── container.py │ ├── fit.py │ ├── grid.md │ ├── gutter-grow.py │ ├── gutter.py │ ├── justify.py │ ├── multiple.py │ ├── offset.py │ ├── order.py │ ├── simple.py │ └── span.py ├── group │ ├── group.md │ ├── interactive.py │ └── preventgrowoverflow.py ├── helpcenter │ └── helpcenter.md ├── highlight │ ├── highlight.md │ ├── interactive.py │ ├── multiple.py │ ├── simple.py │ ├── styles.py │ └── text.py ├── hovercard │ ├── delay.py │ ├── hovercard.md │ ├── interactive.py │ └── simple.py ├── image │ ├── background.py │ ├── fit.py │ ├── height.py │ ├── image.md │ ├── placeholder.py │ └── simple.py ├── indicator │ ├── indicator.md │ ├── inline.py │ ├── interactive.py │ ├── offset.py │ └── processing.py ├── inputwrapper │ ├── inputwrapper.md │ ├── interactive.py │ └── simple.py ├── jsoninput │ ├── jsoninput.md │ └── simple.py ├── kbd │ ├── kbd.md │ └── simple.py ├── linechart │ ├── axislabels.py │ ├── clickdata.py │ ├── connectnulls.py │ ├── custom-tooltip.py │ ├── customizedots.py │ ├── dashedarealine.py │ ├── data.py │ ├── gradient.py │ ├── grid-text-color-light-dark.py │ ├── highlighthover.py │ ├── hoverdata.py │ ├── interactive.py │ ├── legend.py │ ├── legendposition.py │ ├── line-color-light-dark.py │ ├── line.md │ ├── line_animation.py │ ├── linecolor.py │ ├── referencelines.py │ ├── removetooltip.py │ ├── rightyaxis.py │ ├── rotatexaxislabels.py │ ├── serieslabels.py │ ├── strokedasharray.py │ ├── strokewidth.py │ ├── sync.py │ ├── tooltipanimation.py │ ├── units.py │ ├── valueformatter.py │ ├── vertical.py │ ├── xaxisoffset.py │ ├── xyaxis.py │ └── yaxisscale.py ├── list │ ├── icons.py │ ├── interactive.py │ ├── list.md │ ├── nested.py │ └── simple.py ├── loader │ ├── button.py │ ├── interactive.py │ ├── loader.md │ └── simple.py ├── loadingoverlay │ ├── customimageoverlay.py │ ├── customize.py │ ├── loadingoverlay.md │ └── simple.py ├── mantine-api │ ├── colorswatch.py │ ├── mantine.md │ └── styles-api.py ├── mantineprovider │ └── mantineprovider.md ├── mark │ ├── color.py │ ├── mark.md │ └── simple.py ├── menu │ ├── colors.py │ ├── custom.py │ ├── menu.md │ ├── simple.py │ ├── submenus.py │ └── transition.py ├── migration │ ├── button.py │ ├── hidden.py │ ├── migration.md │ └── notification-migration.md ├── modal │ ├── modal.md │ ├── scroll.py │ ├── simple.py │ ├── sizes.py │ └── vertical.py ├── monthpickerinput │ ├── clearable.py │ ├── columns.py │ ├── disabled.py │ ├── icon.py │ ├── minmax.py │ ├── modal.py │ ├── monthpickerinput.md │ ├── multiple.py │ ├── range.py │ ├── simple.py │ └── valueformat.py ├── multiselect │ ├── check.py │ ├── check_option.py │ ├── clearable.py │ ├── dropdown_animation.py │ ├── dropdown_offset.py │ ├── dropdown_padding.py │ ├── dropdown_position.py │ ├── dropdown_shadow.py │ ├── dropdown_width.py │ ├── error.py │ ├── grouping.py │ ├── hide.py │ ├── interactive.py │ ├── large_data_sets.py │ ├── left_right.py │ ├── max-selected.py │ ├── multiselect.md │ ├── nothing_found.py │ ├── opened.py │ ├── option_filter.py │ ├── option_sort.py │ ├── placeholder.py │ ├── popover.py │ ├── render_option.py │ ├── scrollable.py │ ├── searchable.py │ └── simple.py ├── navlink │ ├── active.py │ ├── basic.py │ ├── navlink.md │ └── nested.py ├── notification │ ├── api.py │ ├── autoclose.py │ ├── clean.py │ ├── hide.py │ ├── notification.md │ ├── position.py │ ├── queue.py │ ├── show.py │ └── update.py ├── numberformatter │ ├── numberformatter.md │ ├── prefix_suffix.py │ └── simple.py ├── numberinput │ ├── clamp.py │ ├── controls.py │ ├── decimal_numbers.py │ ├── decimal_scale.py │ ├── decimal_separator.py │ ├── disabled.py │ ├── fixed_decimal_scale.py │ ├── hold.py │ ├── icon.py │ ├── interactive.py │ ├── minmax.py │ ├── negative.py │ ├── numberinput.md │ ├── prefix_suffix.py │ └── thousand_separator.py ├── pagination │ ├── boundaries.py │ ├── interactive.py │ ├── pagination.md │ ├── siblings.py │ └── withpages.py ├── paper │ ├── interactive.py │ └── paper.md ├── passwordinput │ ├── disabled.py │ ├── error.py │ ├── icon.py │ ├── interactive.py │ └── passwordinput.md ├── piechart │ ├── angle.py │ ├── clickdata.py │ ├── data.py │ ├── enabletooltip.py │ ├── hoverdata.py │ ├── interactive.py │ ├── pie.md │ ├── pie_animation.py │ ├── segmentcolor.py │ ├── segmentlabels.py │ ├── segmentstroke.py │ ├── size.py │ ├── stroke.py │ ├── tooltipdatasource.py │ └── usage.py ├── pininput │ ├── accessibility.py │ ├── disabled.py │ ├── error.py │ ├── length.py │ ├── masked.py │ ├── onetime.py │ ├── pininput.md │ ├── placeholder.py │ ├── simple.py │ └── type.py ├── popover │ ├── clickoutside.py │ ├── focustrap.py │ ├── hidedetached.py │ ├── inline.py │ ├── overlay.py │ ├── popover.md │ ├── same-width.py │ └── simple.py ├── progress │ ├── floatingtooltip.py │ ├── interactive.py │ ├── progress.md │ ├── sections.py │ ├── simple.py │ └── tooltip.py ├── radarchart │ ├── changecolor.py │ ├── chartparts.py │ ├── multipleseries.py │ ├── radar.md │ ├── radar_animation.py │ ├── rechartprops.py │ └── usage.py ├── radiogroup │ ├── callback.py │ ├── color.py │ ├── deselectable.py │ ├── group.py │ ├── interactive.py │ ├── radiocard.py │ ├── radiocardgroup.py │ ├── radiogroup.md │ ├── radioindicator.py │ └── size.py ├── rating │ ├── fractions.py │ ├── icons.py │ ├── interactive.py │ ├── rating.md │ └── readonly.py ├── responsive-styles │ ├── container-queries.py │ ├── hiddenfrom.py │ ├── mediaqueries.py │ ├── responsive-styles.md │ └── size.py ├── richtexteditor │ ├── content.py │ ├── image.py │ ├── labels.py │ ├── placeholder.py │ ├── richtexteditor.md │ ├── selected.py │ ├── table.py │ ├── text_color.py │ ├── usage.py │ └── variant.py ├── ringprogress │ ├── interactive.py │ ├── label.py │ ├── ringprogress.md │ ├── root.py │ ├── simple.py │ └── tooltip.py ├── scatterchart │ ├── clickdata.py │ ├── custom-tooltip.py │ ├── customizedots.py │ ├── customtooltip.py │ ├── data.py │ ├── grid-text-color-light-dark.py │ ├── hoverdata.py │ ├── legend.py │ ├── legendposition.py │ ├── multipleseries.py │ ├── point_labels.py │ ├── referencelines.py │ ├── removetooltip.py │ ├── scatter.md │ ├── scatter_animation.py │ ├── strokedasharray.py │ ├── tooltipanimation.py │ ├── tooltiplabels.py │ ├── units.py │ ├── usage.py │ ├── valueformatter.py │ └── xyaxis.py ├── scrollarea │ ├── horizontal.py │ ├── interactive.py │ ├── scrollarea.md │ └── text.py ├── segmentedcontrol │ ├── colors.py │ ├── disabled.py │ ├── full.py │ ├── radius.py │ ├── react.py │ ├── segmentedcontrol.md │ ├── simple.py │ ├── sizes.py │ └── transitions.py ├── select │ ├── allow_deselect.py │ ├── check_option.py │ ├── clearable.py │ ├── dropdown_animation.py │ ├── dropdown_offset.py │ ├── dropdown_padding.py │ ├── dropdown_position.py │ ├── dropdown_shadow.py │ ├── dropdown_width.py │ ├── error.py │ ├── grouping.py │ ├── interactive.py │ ├── large_data_sets.py │ ├── left_right.py │ ├── nothing_found.py │ ├── opened.py │ ├── option_filter.py │ ├── option_sort.py │ ├── popover.py │ ├── render_option.py │ ├── scrollable.py │ ├── searchable.py │ ├── select.md │ └── simple.py ├── semicircleprogress │ ├── empty_segment_color.py │ ├── interactive.py │ ├── label_position.py │ ├── semicircleprogress.md │ ├── simple.py │ └── transition.py ├── simplegrid │ ├── container.py │ ├── responsive.py │ ├── simple.py │ └── simplegrid.md ├── skeleton │ ├── dccloading.py │ ├── graphs.py │ ├── simple.py │ └── skeleton.md ├── slider │ ├── disabled.py │ ├── drag.py │ ├── interactive.py │ ├── inverted.py │ ├── label.py │ ├── marks.py │ ├── minrange.py │ ├── range.py │ ├── restrictomarks.py │ ├── scale.py │ ├── simple.py │ ├── slider.md │ ├── step.py │ ├── styles.py │ ├── thumbchildren.py │ └── thumbsize.py ├── space │ ├── simple.py │ └── space.md ├── sparkline │ ├── areacolor-light-dark.py │ ├── interactive.py │ ├── spark_animation.py │ ├── sparkline.md │ └── trendcolors.py ├── spoiler │ ├── simple.py │ └── spoiler.md ├── stack │ ├── interactive.py │ ├── simple.py │ └── stack.md ├── stepper │ ├── basic.py │ ├── color.py │ ├── icons.py │ ├── loading.py │ ├── size.py │ ├── stepper.md │ └── vertical.py ├── style-props │ ├── props.md │ ├── props.py │ └── responsive.py ├── styles-api │ ├── badge.py │ ├── button.py │ ├── conditional.py │ ├── data-attributes.py │ ├── datepickerinput.py │ ├── input.py │ ├── slider.py │ └── styles.md ├── switch │ ├── callback.py │ ├── icons.py │ ├── interactive.py │ ├── label.py │ ├── switch.md │ └── thumb.py ├── table │ ├── data.py │ ├── scrollcontainer.py │ ├── simple.py │ ├── spacing.py │ ├── striped.py │ ├── table.md │ ├── tableprops.py │ └── vertical.py ├── tabs │ ├── activation.py │ ├── callback.py │ ├── color.py │ ├── content.py │ ├── deactivation.py │ ├── disabled.py │ ├── icons.py │ ├── interactive.py │ ├── inverted.py │ ├── position.py │ ├── right.py │ ├── section.py │ ├── styleprops.py │ ├── styles.py │ ├── tabs.md │ ├── variant.py │ └── vertical.py ├── tagsinput │ ├── acceptvalueonblur.py │ ├── clearable.py │ ├── disabled.py │ ├── disabledoptions.py │ ├── dropdown_animation.py │ ├── dropdown_offset.py │ ├── dropdown_padding.py │ ├── dropdown_position.py │ ├── dropdown_shadow.py │ ├── dropdown_width.py │ ├── duplicates.py │ ├── grouping.py │ ├── interactive.py │ ├── large_data_sets.py │ ├── left_right.py │ ├── max-selected.py │ ├── opened.py │ ├── option_filter.py │ ├── option_sort.py │ ├── popover.py │ ├── readonly.py │ ├── render_option.py │ ├── scrollable.py │ ├── simple.py │ ├── split.py │ ├── suggestions.py │ └── tagsinput.md ├── text │ ├── dimmed.py │ ├── gradient.py │ ├── inherit.py │ ├── lineclamp.py │ ├── simple.py │ ├── span.py │ ├── text.md │ └── truncate.py ├── textarea │ ├── autosize.py │ ├── error.py │ ├── inputProps.py │ ├── interactive.py │ └── textarea.md ├── textinput │ ├── disabled.py │ ├── error.py │ ├── icon.py │ ├── interactive.py │ ├── right.py │ └── textinput.md ├── theme-object │ ├── autocontrast.py │ ├── default-radius.py │ ├── luminance.py │ ├── theme.py │ └── themeobject.md ├── theme-switch-components │ ├── themeswitch.md │ ├── themeswitch.py │ └── themeswitch2.py ├── themeicon │ ├── colors.py │ ├── gradient.py │ ├── interactive.py │ └── themeicon.md ├── timegrid │ ├── allowdeselect.py │ ├── ampmlabels.py │ ├── disabled.py │ ├── disabletime.py │ ├── error.py │ ├── interactive.py │ ├── minmax.py │ ├── simple.py │ └── timegrid.md ├── timeinput │ ├── error.py │ ├── icon.py │ ├── interactive.py │ ├── simple.py │ └── timeinput.md ├── timeline │ ├── bullets.py │ ├── interactive.py │ ├── simple.py │ └── timeline.md ├── timepicker │ ├── ampmlabels.py │ ├── clearable.py │ ├── debounce.py │ ├── debouncems.py │ ├── disabled.py │ ├── dropdownposition.py │ ├── dropdownwidth.py │ ├── error.py │ ├── format.py │ ├── interactive.py │ ├── minmax.py │ ├── presets.py │ ├── presetsgroup.py │ ├── presetsrange.py │ ├── readonly.py │ ├── simple.py │ ├── step.py │ ├── timepicker.md │ ├── withdropdown.py │ └── withseconds.py ├── title │ ├── simple.py │ └── title.md ├── tooltip │ ├── boxwrapperprops.py │ ├── colors.py │ ├── delay.py │ ├── floating.py │ ├── inline.py │ ├── interactive-arrow.py │ ├── interactive.py │ ├── multiline.py │ ├── offset.py │ ├── position.py │ ├── tooltip.md │ ├── transitions.py │ └── usage.py ├── tree │ ├── checkboxes.py │ ├── data.py │ ├── expand-all.py │ ├── expanded-collapsed.py │ ├── expanded-preset.py │ ├── expandedicon-custom.py │ ├── expandedicon-none.py │ ├── iconside.py │ ├── simple.py │ └── tree.md ├── typography │ ├── font_size.py │ ├── headings.py │ └── typography.md ├── typographystylesprovider │ ├── html.py │ ├── markdown.py │ └── typographystylesprovider.md ├── visuallyhidden │ ├── simple.py │ └── visuallyhidden.md └── yearpickerinput │ ├── clearable.py │ ├── columns.py │ ├── disabled.py │ ├── icon.py │ ├── minmax.py │ ├── modal.py │ ├── multiple.py │ ├── range.py │ ├── simple.py │ ├── valueformat.py │ └── yearpickerinput.md ├── help_center ├── aggrid │ ├── README.md │ ├── app_cell_editors.py │ ├── app_cell_renderer_button.py │ ├── app_cell_renderer_cards.py │ ├── assets │ │ ├── dashAgGridComponentFunctions.js │ │ └── dashAgGridFunctions.js │ ├── conditional_formatting_theme_switch.py │ └── requirements.txt ├── appshell │ ├── alt_layout.py │ ├── appshell_with_theme_switch.py │ ├── basic_appshell.py │ ├── collapse_desktop.py │ ├── full_layout.py │ ├── mobile_navbar.py │ ├── navbar_scroll.py │ ├── requirements.txt │ └── responsive_sizes.py ├── cards │ ├── kpi_grid.py │ ├── progress_card.py │ └── ring_progress_cards.py ├── theme │ ├── action_icon_custom_variants.py │ ├── add_sizes_checkbox.py │ ├── assets │ │ └── theme.css │ ├── button_custom_variants.py │ ├── change_fonts.py │ ├── change_headings.py │ ├── default_radius.py │ ├── focus_class_name.py │ └── luminance_threshold.py ├── theme_switch │ ├── action_icon.py │ └── switch.py ├── theme_switch_figure_templates │ ├── README.md │ ├── app.py │ ├── img_dark.png │ ├── img_light.png │ └── requirements.txt ├── theme_switch_figure_templates_custom │ ├── README.md │ ├── app.py │ ├── img_dark.png │ ├── img_light.png │ ├── my_figure_templates.py │ └── requirements.txt └── theme_switch_figure_templates_simple │ ├── README.md │ ├── app.py │ └── requirements.txt ├── lib ├── configurator.py ├── constants.py ├── directives │ ├── functions_as_props.py │ ├── kwargs.py │ ├── source.py │ ├── styles_api_text.py │ └── toc.py └── utils.py ├── pages ├── home.py ├── markdown.py └── not_found_404.py ├── poetry.lock ├── pyproject.toml ├── releasing.md ├── render ├── build.sh └── run.sh ├── requirements.txt └── run.py /README.md: -------------------------------------------------------------------------------- 1 | # Dash Mantine Components Documentation 2 | Official documentation for [Dash Mantine Components](https://github.com/snehilvj/dash-mantine-components) library. This documentation is entirely created using components from dash-mantine-components. 3 |
4 | You can find it hosted [here](https://dash-mantine-components.com). 5 | 6 | 7 | ## Steps to run the docs app locally: 8 | ``` 9 | pip install -r requirements.txt 10 | python run.py 11 | ``` 12 | 13 | -------------------------------------------------------------------------------- /assets/app.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/snehilvj/dmc-docs/62024ae668615efe989481085e7a875747fa0a06/assets/app.png -------------------------------------------------------------------------------- /assets/custom_loadingoverlay.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/snehilvj/dmc-docs/62024ae668615efe989481085e7a875747fa0a06/assets/custom_loadingoverlay.gif -------------------------------------------------------------------------------- /assets/examples-js/barcolor.js: -------------------------------------------------------------------------------- 1 | var dmcfuncs = window.dashMantineFunctions = window.dashMantineFunctions || {}; 2 | 3 | // Highlights bars with value > 700 in teal, others in red 4 | dmcfuncs.barColor = (value) => { 5 | return value > 700 ? 'teal.8' : 'red.8'; 6 | }; 7 | -------------------------------------------------------------------------------- /assets/examples-js/celcius_label.js: -------------------------------------------------------------------------------- 1 | 2 | var dmcfuncs = window.dashMantineFunctions = window.dashMantineFunctions || {}; 3 | 4 | dmcfuncs.celsiusLabel = (value) => `${value} °C`; 5 | -------------------------------------------------------------------------------- /assets/examples-js/disabled_dates.js: -------------------------------------------------------------------------------- 1 | var dmcfuncs = window.dashMantineFunctions = window.dashMantineFunctions || {}; 2 | 3 | dmcfuncs.excludeDate = function(dateStr) { 4 | const date = dayjs(dateStr, "YYYY-MM-DD"); 5 | return date.isValid() && date.day() !== 5; 6 | } 7 | -------------------------------------------------------------------------------- /assets/examples-js/format-number-intl.js: -------------------------------------------------------------------------------- 1 | var dmcfuncs = window.dashMantineFunctions = window.dashMantineFunctions || {}; 2 | 3 | dmcfuncs.formatNumberIntl = (value) => { 4 | return new Intl.NumberFormat('en-US').format(value); 5 | }; 6 | -------------------------------------------------------------------------------- /assets/examples-js/format-scatter-chart.js: -------------------------------------------------------------------------------- 1 | var dmcfuncs = window.dashMantineFunctions = window.dashMantineFunctions || {}; 2 | 3 | 4 | dmcfuncs.formatCurrency = (value) => { 5 | return `$${new Intl.NumberFormat('en-US').format(value)}`; 6 | }; 7 | 8 | 9 | dmcfuncs.formatYears = (value) => { 10 | return `${value} years` 11 | }; 12 | 13 | -------------------------------------------------------------------------------- /assets/examples-js/format-usd.js: -------------------------------------------------------------------------------- 1 | var dmcfuncs = window.dashMantineFunctions = window.dashMantineFunctions || {}; 2 | 3 | dmcfuncs.formatUsd = function (value) { 4 | return `${value.toFixed(2)} USD`; 5 | }; 6 | -------------------------------------------------------------------------------- /assets/examples-js/option_filter.js: -------------------------------------------------------------------------------- 1 | var dmcfuncs = window.dashMantineFunctions = window.dashMantineFunctions || {}; 2 | 3 | dmcfuncs.filterCountries = function ({ options, search }) { 4 | const queryWords = search.toLowerCase().trim().split(" "); 5 | return options.filter((option) => { 6 | const words = option.label.toLowerCase().trim().split(" "); 7 | return queryWords.every((word) => 8 | words.some((labelWord) => labelWord.includes(word)) 9 | ); 10 | }); 11 | }; 12 | -------------------------------------------------------------------------------- /assets/examples-js/option_sort.js: -------------------------------------------------------------------------------- 1 | var dmcfuncs = window.dashMantineFunctions = window.dashMantineFunctions || {}; 2 | 3 | dmcfuncs.filterPythonLibs = function ({ options, search }) { 4 | const query = search.toLowerCase().trim(); 5 | const result = options.filter((option) => 6 | option.label.toLowerCase().trim().includes(query) 7 | ); 8 | result.sort((a, b) => a.label.localeCompare(b.label)); 9 | return result; 10 | }; 11 | -------------------------------------------------------------------------------- /assets/examples-js/scale-label.js: -------------------------------------------------------------------------------- 1 | var dmcfuncs = window.dashMantineFunctions = window.dashMantineFunctions || {}; 2 | 3 | dmcfuncs.getScale = (v) => Math.pow(2, v); 4 | 5 | dmcfuncs.valueLabelFormat = (value) => { 6 | const units = ['KB', 'MB', 'GB', 'TB']; 7 | let unitIndex = 0; 8 | let scaledValue = value; 9 | 10 | while (scaledValue >= 1024 && unitIndex < units.length - 1) { 11 | unitIndex += 1; 12 | scaledValue /= 1024; 13 | } 14 | 15 | return `${scaledValue} ${units[unitIndex]}`; 16 | }; 17 | -------------------------------------------------------------------------------- /assets/examples/chart-color.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --chart-color: var(--mantine-color-orange-8) 3 | } 4 | 5 | :root[data-mantine-color-scheme="dark"] { 6 | --chart-color: var(--mantine-color-lime-4); 7 | } 8 | 9 | -------------------------------------------------------------------------------- /assets/examples/chart-grid-text-colors.css: -------------------------------------------------------------------------------- 1 | 2 | .chart-grid-text-colors { 3 | --chart-grid-color: var(--mantine-color-blue-5); 4 | --chart-text-color: var(--mantine-color-blue-8); 5 | } 6 | 7 | [data-mantine-color-scheme='dark'] .chart-grid-text-colors { 8 | --chart-grid-color: var(--mantine-color-blue-3); 9 | --chart-text-color: var(--mantine-color-blue-2); 10 | } 11 | -------------------------------------------------------------------------------- /assets/examples/checkbox.css: -------------------------------------------------------------------------------- 1 | 2 | .dmc-api-demo-root { 3 | border: 1px solid light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-4)); 4 | padding: var(--mantine-spacing-xs) var(--mantine-spacing-sm); 5 | border-radius: var(--mantine-radius-md); 6 | font-weight: 500; 7 | cursor: pointer; 8 | 9 | &[data-checked] { 10 | background-color: var(--mantine-color-blue-filled); 11 | border-color: var(--mantine-color-blue-filled); 12 | color: var(--mantine-color-white); 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /assets/examples/remove_placeholder.css: -------------------------------------------------------------------------------- 1 | .dmc-docs-demo .mantine-MultiSelect-inputField { 2 | &:not(:only-child)::placeholder { 3 | color: transparent; 4 | } 5 | } -------------------------------------------------------------------------------- /assets/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/snehilvj/dmc-docs/62024ae668615efe989481085e7a875747fa0a06/assets/favicon.ico -------------------------------------------------------------------------------- /assets/hotkey.js: -------------------------------------------------------------------------------- 1 | hotkeys('ctrl+k, cmd+k', function (event, handler){ 2 | document.getElementById("select-component").focus() 3 | }); 4 | -------------------------------------------------------------------------------- /assets/radiocard.css: -------------------------------------------------------------------------------- 1 | /* used for both CheckboxCard and RadioCard*/ 2 | .checkboxcard-root { 3 | position: relative; 4 | padding: var(--mantine-spacing-md); 5 | transition: border-color 150ms ease; 6 | 7 | &[data-checked] { 8 | border-color: var(--mantine-primary-color-filled); 9 | } 10 | } 11 | 12 | .checkboxcard-root:hover { 13 | background-color: light-dark( 14 | var(--mantine-color-gray-0), 15 | var(--mantine-color-dark-6) 16 | ); 17 | } -------------------------------------------------------------------------------- /docs/actionicon/autocontrast.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | from dash_iconify import DashIconify 3 | 4 | 5 | component = dmc.Group( 6 | [ 7 | dmc.ActionIcon( 8 | children=DashIconify(icon="tabler:heart", width=18, height=18), 9 | color="lime.3" 10 | ), 11 | dmc.ActionIcon( 12 | children=DashIconify(icon="tabler:heart", width=18, height=18), 13 | color="lime.3", 14 | autoContrast=True 15 | ), 16 | ] 17 | ) -------------------------------------------------------------------------------- /docs/actionicon/loader_props.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | component = dmc.ActionIcon(size="xl", loading=True, loaderProps={"type": "dots"}) -------------------------------------------------------------------------------- /docs/actionicon/size_input.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | component = dmc.Group([ 4 | dmc.TextInput(placeholder="sm sixe input", size="sm"), 5 | dmc.ActionIcon( 6 | size="input-sm", 7 | variant="default", 8 | children="SM" 9 | ) 10 | ]) -------------------------------------------------------------------------------- /docs/actionicon/variant.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | from dash_iconify import DashIconify 3 | 4 | component = dmc.Group( 5 | [ 6 | dmc.ActionIcon( 7 | DashIconify(icon="clarity:settings-line"), color="blue", variant=variant 8 | ) 9 | for variant in [ 10 | "subtle", 11 | "filled", 12 | "outline", 13 | "light", 14 | "default", 15 | "transparent", 16 | "gradient", 17 | ] 18 | ] 19 | ) 20 | -------------------------------------------------------------------------------- /docs/affix/simple.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | component = dmc.Affix( 4 | dmc.Button("I'm in an Affix Component"), position={"bottom": 20, "right": 20} 5 | ) 6 | -------------------------------------------------------------------------------- /docs/alert/simple.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | component = dmc.Alert( 4 | "Something happened! You made a mistake and there is no going back, your data was lost forever!", 5 | title="Simple Alert!", 6 | ) 7 | -------------------------------------------------------------------------------- /docs/anchor/simple.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | component = dmc.Anchor( 4 | "Dash Mantine Components Announcement", 5 | href="https://community.plotly.com/t/dash-mantine-components/58414", 6 | ) 7 | -------------------------------------------------------------------------------- /docs/anchor/text.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | component = dmc.Anchor( 4 | "A link with pink to yellow gradient", 5 | href="#text-props", 6 | variant="gradient", 7 | gradient={"from": "pink", "to": "yellow"}, 8 | fw=500, 9 | fz="lg", 10 | ) 11 | -------------------------------------------------------------------------------- /docs/areachart/areacolor-light-dark.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | from .data import data 3 | 4 | component = dmc.AreaChart( 5 | h=300, 6 | dataKey="date", 7 | data=data, 8 | withGradient=True, 9 | series=[{"name": "Apples", "color": "var(--chart-color)"}], 10 | ) 11 | 12 | -------------------------------------------------------------------------------- /docs/areachart/areacolor.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | from .data import data 3 | from lib.configurator import Configurator 4 | 5 | 6 | target = dmc.AreaChart( 7 | h=300, 8 | dataKey="date", 9 | data=data, 10 | withGradient=True, 11 | series=[{"name": "Apples", "color": "orange.7"}], 12 | ) 13 | 14 | configurator = Configurator(target) 15 | 16 | configurator.add_switch("withGradient", True) 17 | 18 | component = configurator.panel 19 | -------------------------------------------------------------------------------- /docs/areachart/axislabels.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | from .data import data 3 | 4 | component = dmc.AreaChart( 5 | h=300, 6 | dataKey="date", 7 | data=data, 8 | type="stacked", 9 | xAxisLabel="Date", 10 | yAxisLabel="Amount", 11 | series=[ 12 | {"name": "Apples", "color": "indigo.6"}, 13 | {"name": "Oranges", "color": "blue.6"}, 14 | {"name": "Tomatoes", "color": "teal.6"}, 15 | ], 16 | ) 17 | -------------------------------------------------------------------------------- /docs/areachart/dashedarealine.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | from .data import data 3 | 4 | component = dmc.AreaChart( 5 | h=300, 6 | dataKey="date", 7 | data=data, 8 | type="stacked", 9 | strokeWidth=1, 10 | dotProps={"r": 2}, 11 | activeDotProps={"r": 3, "strokeWidth": 1}, 12 | series=[ 13 | {"name": "Apples", "color": "indigo.6"}, 14 | {"name": "Oranges", "color": "blue.6"}, 15 | {"name": "Tomatoes", "color": "teal.6", "strokeDasharray": "5 5"}, 16 | ], 17 | ) 18 | -------------------------------------------------------------------------------- /docs/areachart/data.py: -------------------------------------------------------------------------------- 1 | data = [ 2 | {"date": "Mar 22", "Apples": 2890, "Oranges": 2338, "Tomatoes": 2452}, 3 | {"date": "Mar 23", "Apples": 2756, "Oranges": 2103, "Tomatoes": 2402}, 4 | {"date": "Mar 24", "Apples": 3322, "Oranges": 986, "Tomatoes": 1821}, 5 | {"date": "Mar 25", "Apples": 3470, "Oranges": 2108, "Tomatoes": 2809}, 6 | {"date": "Mar 26", "Apples": 3129, "Oranges": 1726, "Tomatoes": 2290}, 7 | ] 8 | -------------------------------------------------------------------------------- /docs/areachart/grid-text-color-light-dark.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | from .data import data 3 | 4 | component = dmc.AreaChart( 5 | h=300, 6 | dataKey="date", 7 | data=data, 8 | type="stacked", 9 | className="chart-grid-text-colors", 10 | series=[ 11 | {"name": "Apples", "color": "indigo.6"}, 12 | {"name": "Oranges", "color": "blue.6"}, 13 | {"name": "Tomatoes", "color": "teal.6"}, 14 | ], 15 | ) 16 | -------------------------------------------------------------------------------- /docs/areachart/grid-text-color.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | from .data import data 3 | 4 | component = dmc.AreaChart( 5 | h=300, 6 | dataKey="date", 7 | data=data, 8 | type="stacked", 9 | gridColor="gray.5", 10 | textColor = "gray.9", 11 | series=[ 12 | {"name": "Apples", "color": "indigo.6"}, 13 | {"name": "Oranges", "color": "blue.6"}, 14 | {"name": "Tomatoes", "color": "teal.6"}, 15 | ], 16 | ) 17 | -------------------------------------------------------------------------------- /docs/areachart/highlighthover.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | from .data import data 3 | 4 | component = dmc.AreaChart( 5 | h=300, 6 | dataKey="date", 7 | data=data, 8 | type="stacked", 9 | series=[ 10 | {"name": "Apples", "color": "indigo.6"}, 11 | {"name": "Oranges", "color": "blue.6"}, 12 | {"name": "Tomatoes", "color": "teal.6"}, 13 | ], 14 | highlightHover=True 15 | ) 16 | -------------------------------------------------------------------------------- /docs/areachart/legend.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | from .data import data 3 | 4 | component = dmc.AreaChart( 5 | h=300, 6 | dataKey="date", 7 | data=data, 8 | type="stacked", 9 | withLegend=True, 10 | series=[ 11 | {"name": "Apples", "color": "indigo.6"}, 12 | {"name": "Oranges", "color": "blue.6"}, 13 | {"name": "Tomatoes", "color": "teal.6"}, 14 | ], 15 | ) 16 | -------------------------------------------------------------------------------- /docs/areachart/legendposition.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | from .data import data 3 | 4 | component = dmc.AreaChart( 5 | h=300, 6 | dataKey="date", 7 | data=data, 8 | type="stacked", 9 | withLegend=True, 10 | legendProps={"verticalAlign": "bottom", "height": 50}, 11 | series=[ 12 | {"name": "Apples", "color": "indigo.6"}, 13 | {"name": "Oranges", "color": "blue.6"}, 14 | {"name": "Tomatoes", "color": "teal.6"}, 15 | ], 16 | ) 17 | -------------------------------------------------------------------------------- /docs/areachart/percent.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | from .data import data 3 | 4 | component = dmc.AreaChart( 5 | h=300, 6 | dataKey="date", 7 | data=data, 8 | type="percent", 9 | series=[ 10 | {"name": "Apples", "color": "indigo.6"}, 11 | {"name": "Oranges", "color": "blue.6"}, 12 | {"name": "Tomatoes", "color": "teal.6"}, 13 | ], 14 | ) 15 | -------------------------------------------------------------------------------- /docs/areachart/removetooltip.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | from .data import data 3 | 4 | component = dmc.AreaChart( 5 | h=300, 6 | dataKey="date", 7 | data=data, 8 | type="stacked", 9 | withTooltip=False, 10 | series=[ 11 | {"name": "Apples", "color": "indigo.6"}, 12 | {"name": "Oranges", "color": "blue.6"}, 13 | {"name": "Tomatoes", "color": "teal.6"}, 14 | ], 15 | ) 16 | -------------------------------------------------------------------------------- /docs/areachart/rotatexaxislabels.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | from .data import data 3 | 4 | component = dmc.AreaChart( 5 | h=300, 6 | dataKey="date", 7 | data=data, 8 | type="stacked", 9 | tickLine="xy", 10 | xAxisProps={"angle": -20}, 11 | series=[ 12 | {"name": "Apples", "color": "indigo.6"}, 13 | {"name": "Oranges", "color": "blue.6"}, 14 | {"name": "Tomatoes", "color": "teal.6"}, 15 | ], 16 | ) 17 | -------------------------------------------------------------------------------- /docs/areachart/stacked.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | from .data import data 3 | 4 | component = dmc.AreaChart( 5 | h=300, 6 | dataKey="date", 7 | data=data, 8 | type="stacked", 9 | series=[ 10 | {"name": "Apples", "color": "indigo.6"}, 11 | {"name": "Oranges", "color": "blue.6"}, 12 | {"name": "Tomatoes", "color": "teal.6"}, 13 | ], 14 | ) 15 | -------------------------------------------------------------------------------- /docs/areachart/strokedasharray.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | from .data import data 3 | 4 | component = dmc.AreaChart( 5 | h=300, 6 | dataKey="date", 7 | data=data, 8 | type="stacked", 9 | strokeDasharray="15 15", 10 | series=[ 11 | {"name": "Apples", "color": "indigo.6"}, 12 | {"name": "Oranges", "color": "blue.6"}, 13 | {"name": "Tomatoes", "color": "teal.6"}, 14 | ], 15 | ) 16 | -------------------------------------------------------------------------------- /docs/areachart/tooltipanimation.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | from .data import data 3 | 4 | component = dmc.AreaChart( 5 | h=300, 6 | dataKey="date", 7 | data=data, 8 | type="stacked", 9 | tooltipAnimationDuration=200, 10 | series=[ 11 | {"name": "Apples", "color": "indigo.6"}, 12 | {"name": "Oranges", "color": "blue.6"}, 13 | {"name": "Tomatoes", "color": "teal.6"}, 14 | ], 15 | ) 16 | -------------------------------------------------------------------------------- /docs/areachart/units.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | from .data import data 3 | 4 | component = dmc.AreaChart( 5 | h=300, 6 | dataKey="date", 7 | data=data, 8 | type="stacked", 9 | unit="$", 10 | series=[ 11 | {"name": "Apples", "color": "indigo.6"}, 12 | {"name": "Oranges", "color": "blue.6"}, 13 | {"name": "Tomatoes", "color": "teal.6"}, 14 | ], 15 | ) 16 | -------------------------------------------------------------------------------- /docs/areachart/valueformatter.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | from .data import data 3 | 4 | component = dmc.AreaChart( 5 | h=300, 6 | dataKey="date", 7 | data=data, 8 | type="stacked", 9 | tickLine="xy", 10 | valueFormatter={"function": "formatNumberIntl"}, 11 | series=[ 12 | {"name": "Apples", "color": "indigo.6"}, 13 | {"name": "Oranges", "color": "blue.6"}, 14 | {"name": "Tomatoes", "color": "teal.6"}, 15 | ], 16 | ) 17 | -------------------------------------------------------------------------------- /docs/areachart/vertical.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | from .data import data 3 | 4 | component = dmc.AreaChart( 5 | h=300, 6 | dataKey="date", 7 | data=data, 8 | type="stacked", 9 | orientation="vertical", 10 | series=[ 11 | {"name": "Apples", "color": "indigo.6"}, 12 | {"name": "Oranges", "color": "blue.6"}, 13 | {"name": "Tomatoes", "color": "teal.6"}, 14 | ], 15 | ) 16 | -------------------------------------------------------------------------------- /docs/areachart/xaxisoffset.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | from .data import data 3 | 4 | component = dmc.AreaChart( 5 | h=300, 6 | dataKey="date", 7 | data=data, 8 | type="stacked", 9 | xAxisProps={"padding": {"left": 30, "right": 30}}, 10 | series=[ 11 | {"name": "Apples", "color": "indigo.6"}, 12 | {"name": "Oranges", "color": "blue.6"}, 13 | {"name": "Tomatoes", "color": "teal.6"}, 14 | ], 15 | ) 16 | -------------------------------------------------------------------------------- /docs/aspectratio/flex.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | from dash import html 3 | 4 | component = html.Div( 5 | dmc.AspectRatio( 6 | ratio=1, 7 | style={"flex": "0 0 100px"}, 8 | children=[ 9 | dmc.Image( 10 | src="https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/avatars/avatar-6.png", 11 | alt="Avatar", 12 | ) 13 | ], 14 | ), 15 | style={"display": "flex"}, 16 | ) -------------------------------------------------------------------------------- /docs/aspectratio/map.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | from dash import html 3 | 4 | component = dmc.AspectRatio( 5 | html.Iframe( 6 | src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3025.3063874233135!2d-74.04668908358428!3d40.68924937933441!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c25090129c363d%3A0x40c6a5770d25022b!2sStatue%20of%20Liberty%20National%20Monument!5e0!3m2!1sen!2sru!4v1644262070010!5m2!1sen!2sru", 7 | title="Google map", 8 | ), 9 | ratio=16 / 9, 10 | ) 11 | -------------------------------------------------------------------------------- /docs/aspectratio/simple.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | component = dmc.AspectRatio( 4 | dmc.Image( 5 | src="https://www.nasa.gov/wp-content/uploads/2022/07/web_first_images_release.png", 6 | alt="Carina Nebula", 7 | ), 8 | ratio=720 / 1080, 9 | maw=400, 10 | mx="auto", 11 | ) 12 | -------------------------------------------------------------------------------- /docs/aspectratio/video.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | from dash import html 3 | 4 | component = dmc.AspectRatio( 5 | html.Iframe( 6 | src="https://www.youtube.com/embed/KsTKREWoVC4", 7 | title="YouTube video player", 8 | allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; fullscreen", 9 | ), 10 | ratio=16 / 9, 11 | ) 12 | -------------------------------------------------------------------------------- /docs/avatar/allowedinitialscolors.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | names = [ 4 | "John Doe", 5 | "Jane Mol", 6 | "Alex Lump", 7 | "Sarah Condor", 8 | "Mike Johnson", 9 | "Kate Kok", 10 | "Tom Smith", 11 | ] 12 | 13 | component = dmc.Group( 14 | [ 15 | dmc.Avatar(name=n, color="initials", allowedInitialsColors=["blue", "red"]) 16 | for n in names 17 | ] 18 | ) 19 | -------------------------------------------------------------------------------- /docs/avatar/initials.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | 4 | 5 | names = [ 6 | "John Doe", 7 | "Jane Mol", 8 | "Alex Lump", 9 | "Sarah Condor", 10 | "Mike Johnson", 11 | "Kate Kok", 12 | "Tom Smith", 13 | ] 14 | 15 | avatars = [dmc.Avatar(name=name, color="initials") for name in names] 16 | 17 | component = dmc.Group(avatars) -------------------------------------------------------------------------------- /docs/avatar/interactive.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | from lib.configurator import Configurator 4 | 5 | target = dmc.Avatar() 6 | 7 | configurator = Configurator(target, center_component=True) 8 | 9 | configurator.add_select("variant", ["filled", "light", "outline", "transparent", "white", "default"], "filled") 10 | configurator.add_slider("radius", "sm") 11 | configurator.add_slider("size", "md") 12 | 13 | component = configurator.panel 14 | -------------------------------------------------------------------------------- /docs/avatar/placeholder.py: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/snehilvj/dmc-docs/62024ae668615efe989481085e7a875747fa0a06/docs/avatar/placeholder.py -------------------------------------------------------------------------------- /docs/badge/interactive.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | from lib.configurator import Configurator 4 | 5 | target = dmc.Badge("Badge") 6 | 7 | configurator = Configurator(target, center_component=True) 8 | 9 | configurator.add_select( 10 | "variant", ["light", "filled", "outline", "dot", "gradient"], "light" 11 | ) 12 | configurator.add_colorpicker("color", "blue") 13 | configurator.add_slider("size", "md") 14 | configurator.add_slider("radius", "xl") 15 | 16 | component = configurator.panel 17 | -------------------------------------------------------------------------------- /docs/badge/radius.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | component = dmc.Group( 4 | [ 5 | dmc.Badge("Sale", radius="xs"), 6 | dmc.Badge("Sale", radius="sm"), 7 | dmc.Badge("Sale", radius="md"), 8 | dmc.Badge("Sale", radius="lg"), 9 | dmc.Badge("Sale", radius="xl"), 10 | ] 11 | ) 12 | -------------------------------------------------------------------------------- /docs/badge/rounded.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | component = dmc.Group( 4 | [ 5 | dmc.Badge(1, size="xs", circle=True), 6 | dmc.Badge(7, size="sm", circle=True), 7 | dmc.Badge(9, size="md", circle=True), 8 | dmc.Badge(3, size="lg", circle=True), 9 | dmc.Badge(8, size="xl", circle=True), 10 | ] 11 | ) 12 | -------------------------------------------------------------------------------- /docs/badge/section.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | component = dmc.Badge( 4 | "Badge with Avatar", 5 | leftSection=dmc.Avatar( 6 | src="https://avatars.githubusercontent.com/u/91216500?v=4", 7 | size=24, 8 | radius="xl", 9 | mr=5, 10 | ), 11 | sx={"paddingLeft": 0}, 12 | size="lg", 13 | radius="xl", 14 | color="teal", 15 | ) 16 | -------------------------------------------------------------------------------- /docs/badge/size.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | component = dmc.Group( 4 | [ 5 | dmc.Badge("Sale", size="xs"), 6 | dmc.Badge("Sale", size="sm"), 7 | dmc.Badge("Sale", size="md"), 8 | dmc.Badge("Sale", size="lg"), 9 | dmc.Badge("Sale", size="xl"), 10 | ] 11 | ) 12 | -------------------------------------------------------------------------------- /docs/badge/variant.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | component = dmc.Group( 4 | [ 5 | dmc.Badge("Default light badge"), 6 | dmc.Badge("Dot badge", variant="dot"), 7 | dmc.Badge("Outline badge", variant="outline"), 8 | dmc.Badge("Filled badge", variant="filled"), 9 | ] 10 | ) 11 | -------------------------------------------------------------------------------- /docs/barchart/area-color-light-dark.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | from .data import data 3 | 4 | component = dmc.BarChart( 5 | h=300, 6 | dataKey="date", 7 | data=data, 8 | series=[{"name": "Smartphones", "color": "var(--chart-color)"}], 9 | ) -------------------------------------------------------------------------------- /docs/barchart/areacolor.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | from lib.configurator import Configurator 4 | from .data import data 5 | 6 | target = dmc.BarChart( 7 | h=300, 8 | dataKey="date", 9 | data=data, 10 | fillOpacity=0.5, 11 | series=[{"name": "Smartphones", "color": "orange.7"}], 12 | ) 13 | 14 | configurator = Configurator(target) 15 | 16 | configurator.add_number_slider("fillOpacity", 0.5, min=0, max=1, step=0.1) 17 | 18 | component = configurator.panel 19 | -------------------------------------------------------------------------------- /docs/barchart/axislabels.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | from .data import data 3 | 4 | component = dmc.BarChart( 5 | h=300, 6 | dataKey="month", 7 | data=data, 8 | type="stacked", 9 | xAxisLabel="Date", 10 | yAxisLabel="Amount", 11 | series=[ 12 | {"name": "Smartphones", "color": "violet.6"}, 13 | {"name": "Laptops", "color": "blue.6"}, 14 | {"name": "Tablets", "color": "teal.6"}, 15 | ], 16 | ) 17 | -------------------------------------------------------------------------------- /docs/barchart/bar_value_label.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | from .data import data 3 | 4 | component = dmc.BarChart( 5 | h=300, 6 | dataKey="month", 7 | data=data, 8 | withBarValueLabel=True, 9 | withLegend=True, 10 | withTooltip=False, 11 | series=[ 12 | {"name": "Smartphones", "color": "violet.6"}, 13 | {"name": "Laptops", "color": "blue.6"}, 14 | {"name": "Tablets", "color": "teal.6"}, 15 | ], 16 | valueFormatter={"function": "formatNumberIntl"}, 17 | ) 18 | -------------------------------------------------------------------------------- /docs/barchart/barprops.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | from .data import data 3 | 4 | component = dmc.BarChart( 5 | h=300, 6 | dataKey="month", 7 | data=data, 8 | orientation="vertical", 9 | yAxisProps={"width": 80}, 10 | barProps={"radius": 50}, 11 | series=[{"name": "Smartphones", "color": "violet.6"}], 12 | ) 13 | -------------------------------------------------------------------------------- /docs/barchart/data.py: -------------------------------------------------------------------------------- 1 | data = [ 2 | {"month": "January", "Smartphones": 1200, "Laptops": 900, "Tablets": 200}, 3 | {"month": "February", "Smartphones": 1900, "Laptops": 1200, "Tablets": 400}, 4 | {"month": "March", "Smartphones": 400, "Laptops": 1000, "Tablets": 200}, 5 | {"month": "April", "Smartphones": 1000, "Laptops": 200, "Tablets": 800}, 6 | {"month": "May", "Smartphones": 800, "Laptops": 1400, "Tablets": 1200}, 7 | {"month": "June", "Smartphones": 750, "Laptops": 600, "Tablets": 1000}, 8 | ] 9 | -------------------------------------------------------------------------------- /docs/barchart/grid-text-color-light-dark.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | from .data import data 3 | 4 | component = dmc.BarChart( 5 | h=300, 6 | dataKey="month", 7 | data=data, 8 | type="stacked", 9 | className="chart-grid-text-colors", 10 | series=[ 11 | {"name": "Smartphones", "color": "violet.6"}, 12 | {"name": "Laptops", "color": "blue.6"}, 13 | {"name": "Tablets", "color": "teal.6"}, 14 | ], 15 | ) 16 | -------------------------------------------------------------------------------- /docs/barchart/highlighthover.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | from .data import data 3 | 4 | component = dmc.BarChart( 5 | h=300, 6 | dataKey="month", 7 | data=data, 8 | type="stacked", 9 | series=[ 10 | {"name": "Smartphones", "color": "violet.6"}, 11 | {"name": "Laptops", "color": "blue.6"}, 12 | {"name": "Tablets", "color": "teal.6"}, 13 | ], 14 | withLegend=True, 15 | withTooltip=False, 16 | highlightHover=True 17 | ) 18 | -------------------------------------------------------------------------------- /docs/barchart/legend.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | from .data import data 3 | 4 | component = dmc.BarChart( 5 | h=300, 6 | dataKey="month", 7 | data=data, 8 | withLegend=True, 9 | series=[ 10 | {"name": "Smartphones", "color": "violet.6"}, 11 | {"name": "Laptops", "color": "blue.6"}, 12 | {"name": "Tablets", "color": "teal.6"}, 13 | ], 14 | ) 15 | -------------------------------------------------------------------------------- /docs/barchart/legendposition.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | from .data import data 3 | 4 | component = dmc.BarChart( 5 | h=300, 6 | dataKey="month", 7 | data=data, 8 | withLegend=True, 9 | legendProps={"verticalAlign": "bottom", "height": 50}, 10 | series=[ 11 | {"name": "Smartphones", "color": "violet.6"}, 12 | {"name": "Laptops", "color": "blue.6"}, 13 | {"name": "Tablets", "color": "teal.6"}, 14 | ], 15 | ) 16 | -------------------------------------------------------------------------------- /docs/barchart/percent.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | from .data import data 3 | 4 | component = dmc.BarChart( 5 | h=300, 6 | dataKey="month", 7 | data=data, 8 | type="percent", 9 | series=[ 10 | {"name": "Smartphones", "color": "violet.6"}, 11 | {"name": "Laptops", "color": "blue.6"}, 12 | {"name": "Tablets", "color": "teal.6"}, 13 | ], 14 | ) 15 | -------------------------------------------------------------------------------- /docs/barchart/removetooltip.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | from .data import data 3 | 4 | component = dmc.BarChart( 5 | h=300, 6 | dataKey="month", 7 | data=data, 8 | withTooltip=False, 9 | series=[ 10 | {"name": "Smartphones", "color": "violet.6"}, 11 | {"name": "Laptops", "color": "blue.6"}, 12 | {"name": "Tablets", "color": "teal.6"}, 13 | ], 14 | ) 15 | -------------------------------------------------------------------------------- /docs/barchart/stacked.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | from .data import data 3 | 4 | component = dmc.BarChart( 5 | h=300, 6 | dataKey="month", 7 | data=data, 8 | type="stacked", 9 | series=[ 10 | {"name": "Smartphones", "color": "violet.6"}, 11 | {"name": "Laptops", "color": "blue.6"}, 12 | {"name": "Tablets", "color": "teal.6"}, 13 | ], 14 | ) 15 | -------------------------------------------------------------------------------- /docs/barchart/stacked_mixed.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | from .data import data 3 | 4 | component = dmc.BarChart( 5 | h=300, 6 | dataKey="month", 7 | data=data, 8 | series=[ 9 | {"name": "Smartphones", "color": "violet.6", "stackId": "a"}, 10 | {"name": "Laptops", "color": "blue.6", "stackId": "b"}, 11 | {"name": "Tablets", "color": "teal.6", "stackId": "b"}, 12 | ], 13 | ) 14 | -------------------------------------------------------------------------------- /docs/barchart/strokedasharray.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | from .data import data 3 | 4 | component = dmc.BarChart( 5 | h=300, 6 | dataKey="month", 7 | data=data, 8 | type="stacked", 9 | strokeDasharray="15 15", 10 | series=[ 11 | {"name": "Smartphones", "color": "violet.6"}, 12 | {"name": "Laptops", "color": "blue.6"}, 13 | {"name": "Tablets", "color": "teal.6"}, 14 | ], 15 | ) 16 | -------------------------------------------------------------------------------- /docs/barchart/tooltipanimation.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | from .data import data 3 | 4 | component = dmc.BarChart( 5 | h=300, 6 | dataKey="month", 7 | data=data, 8 | tooltipAnimationDuration=200, 9 | series=[ 10 | {"name": "Smartphones", "color": "violet.6"}, 11 | {"name": "Laptops", "color": "blue.6"}, 12 | {"name": "Tablets", "color": "teal.6"}, 13 | ], 14 | ) 15 | -------------------------------------------------------------------------------- /docs/barchart/units.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | from .data import data 3 | 4 | component = dmc.BarChart( 5 | h=300, 6 | dataKey="month", 7 | data=data, 8 | unit="$", 9 | series=[ 10 | {"name": "Smartphones", "color": "violet.6"}, 11 | {"name": "Laptops", "color": "blue.6"}, 12 | {"name": "Tablets", "color": "teal.6"}, 13 | ], 14 | ) 15 | -------------------------------------------------------------------------------- /docs/barchart/value-formatter.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | from .data import data 3 | 4 | component = dmc.BarChart( 5 | h=300, 6 | data=data, 7 | dataKey="month", 8 | series=[ 9 | {"name": "Smartphones", "color": "violet.6"}, 10 | {"name": "Laptops", "color": "blue.6"}, 11 | {"name": "Tablets", "color": "teal.6"}, 12 | ], 13 | valueFormatter={"function": "formatNumberIntl"}, 14 | ) 15 | -------------------------------------------------------------------------------- /docs/barchart/vertical.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | from .data import data 3 | 4 | component = dmc.BarChart( 5 | h=300, 6 | dataKey="month", 7 | data=data, 8 | type="stacked", 9 | orientation="vertical", 10 | series=[ 11 | {"name": "Smartphones", "color": "violet.6"}, 12 | {"name": "Laptops", "color": "blue.6"}, 13 | {"name": "Tablets", "color": "teal.6"}, 14 | ], 15 | ) 16 | -------------------------------------------------------------------------------- /docs/barchart/xaxisoffset.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | from .data import data 3 | 4 | component = dmc.BarChart( 5 | h=300, 6 | dataKey="month", 7 | data=data, 8 | type="stacked", 9 | xAxisProps={"padding": {"left": 30, "right": 30}}, 10 | series=[ 11 | {"name": "Smartphones", "color": "violet.6"}, 12 | {"name": "Laptops", "color": "blue.6"}, 13 | {"name": "Tablets", "color": "teal.6"}, 14 | ], 15 | ) 16 | -------------------------------------------------------------------------------- /docs/barchart/yaxisscale.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | from .data import data 3 | 4 | component = dmc.BarChart( 5 | h=300, 6 | dataKey="month", 7 | data=data, 8 | yAxisProps={"domain": [0, 250]}, 9 | series=[ 10 | {"name": "Smartphones", "color": "violet.6"}, 11 | {"name": "Laptops", "color": "blue.6"}, 12 | {"name": "Tablets", "color": "teal.6"}, 13 | ], 14 | ) 15 | -------------------------------------------------------------------------------- /docs/blockquote/icon.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | from dash_iconify import DashIconify 3 | 4 | component = dmc.Blockquote( 5 | "Doth mother know you weareth her drapes?", 6 | cite="- Ironman", 7 | icon=DashIconify(icon="codicon:flame", width=30), 8 | color="red", 9 | ) 10 | -------------------------------------------------------------------------------- /docs/blockquote/simple.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | component = dmc.Blockquote( 4 | "Everything we hear is an opinion, not a fact. Everything we see is a perspective, not the truth.", 5 | cite="- Marcus Aurelius , Meditations", 6 | ) 7 | -------------------------------------------------------------------------------- /docs/bubblechart/area-color-light-dark.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | from .data import data 3 | 4 | component = dmc.BubbleChart( 5 | h=60, 6 | data=data, 7 | range=[16, 225], 8 | label="Sales/hour", 9 | color="var(--chart-color)", 10 | dataKey={"x": "hour", "y": "index", "z": "value"} 11 | ) -------------------------------------------------------------------------------- /docs/bubblechart/data.py: -------------------------------------------------------------------------------- 1 | data = [ 2 | {"hour": "08:00", "index": 1, "value": 150}, 3 | {"hour": "10:00", "index": 1, "value": 166}, 4 | {"hour": "12:00", "index": 1, "value": 170}, 5 | {"hour": "14:00", "index": 1, "value": 150}, 6 | {"hour": "16:00", "index": 1, "value": 200}, 7 | {"hour": "18:00", "index": 1, "value": 400}, 8 | {"hour": "20:00", "index": 1, "value": 100}, 9 | {"hour": "22:00", "index": 1, "value": 160}, 10 | ] 11 | -------------------------------------------------------------------------------- /docs/bubblechart/grid-text-color-light-dark.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | from .data import data 3 | 4 | component = dmc.BubbleChart( 5 | h=60, 6 | data=data, 7 | range=[16, 225], 8 | label="Sales/hour", 9 | className="chart-grid-text-colors", 10 | dataKey={"x": "hour", "y": "index", "z": "value"} 11 | ) 12 | -------------------------------------------------------------------------------- /docs/bubblechart/remove_tooltip.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | from .data import data 3 | 4 | 5 | component = dmc.BubbleChart( 6 | gridColor="gray.5", 7 | textColor="gray.9", 8 | h=60, 9 | data=data, 10 | range=[16, 225], 11 | label="Sales/hour", 12 | color="lime.6", 13 | dataKey={"x": "hour", "y": "index", "z": "value"}, 14 | withTooltip=False 15 | ) -------------------------------------------------------------------------------- /docs/bubblechart/simple.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | from .data import data 3 | 4 | 5 | component = dmc.BubbleChart( 6 | gridColor="gray.5", 7 | textColor="gray.9", 8 | h=60, 9 | data=data, 10 | range=[16, 225], 11 | label="Sales/hour", 12 | color="lime.6", 13 | dataKey={"x": "hour", "y": "index", "z": "value"} 14 | ) -------------------------------------------------------------------------------- /docs/bubblechart/valueformatter.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | from .data import data 3 | 4 | component = dmc.BubbleChart( 5 | h=60, 6 | data=data, 7 | range=[16, 225], 8 | label="Sales/hour", 9 | color="lime.6", 10 | dataKey={"x": "hour", "y": "index", "z": "value"}, 11 | valueFormatter={"function": "formatUsd"}, 12 | ) -------------------------------------------------------------------------------- /docs/burger/color.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | component = dmc.Group( 4 | [ 5 | dmc.Burger(), 6 | dmc.Burger(color="red"), 7 | dmc.Burger(color="green"), 8 | ] 9 | ) 10 | -------------------------------------------------------------------------------- /docs/burger/interactive.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | from lib.configurator import Configurator 4 | 5 | target = dmc.Burger(size="md", lineSize=2) 6 | 7 | configurator = Configurator(target, center_component=True) 8 | 9 | configurator.add_slider("size", "md") 10 | configurator.add_number_slider("lineSize",2, min=1, max=10) 11 | 12 | component = configurator.panel 13 | -------------------------------------------------------------------------------- /docs/burger/simple.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | from dash import Input, Output, callback, html 3 | 4 | component = html.Div( 5 | [dmc.Burger(id="burger-button", opened=False), dmc.Text(id="burger-state", mt="md")] 6 | ) 7 | 8 | 9 | @callback(Output("burger-state", "children"), Input("burger-button", "opened")) 10 | def is_open(opened): 11 | return str(opened) 12 | -------------------------------------------------------------------------------- /docs/button/colors.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | colors = [ 4 | "gray", 5 | "red", 6 | "pink", 7 | "grape", 8 | "violet", 9 | "indigo", 10 | "blue", 11 | "lime", 12 | "yellow", 13 | "orange", 14 | ] 15 | 16 | component = dmc.Group( 17 | [dmc.Button(color.title(), color=color) for color in colors], 18 | ) 19 | -------------------------------------------------------------------------------- /docs/button/compact.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | sizes = ["xs", "sm", "md", "lg", "xl"] 4 | 5 | component = dmc.Stack( 6 | [ 7 | dmc.Group( 8 | [dmc.Button(f"Normal {size}", size=size) for size in sizes], 9 | ), 10 | dmc.Group( 11 | [dmc.Button(f"Compact {size}", size=f"compact-{size}") for size in sizes], 12 | ), 13 | ] 14 | ) 15 | -------------------------------------------------------------------------------- /docs/button/full.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | component = dmc.Button("Click to open the app", fullWidth=True, variant="outline") 4 | -------------------------------------------------------------------------------- /docs/button/group.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | component = dmc.ButtonGroup( 4 | [ 5 | dmc.Button("First", variant="outline"), 6 | dmc.Button("Second", variant="outline"), 7 | dmc.Button("Third", variant="outline"), 8 | ] 9 | ) 10 | -------------------------------------------------------------------------------- /docs/button/loader-props.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | component = dmc.Button("Loading Props", loaderProps={"type": "dots"}, loading=True) 4 | -------------------------------------------------------------------------------- /docs/button/variant.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | component = dmc.Group( 4 | [ 5 | dmc.Button("Default button"), 6 | dmc.Button("Subtle button", variant="subtle"), 7 | dmc.Button("Gradient button", variant="gradient"), 8 | dmc.Button("Filled button", variant="filled"), 9 | dmc.Button("Light button", variant="light"), 10 | dmc.Button("Outline button", variant="outline"), 11 | ] 12 | ) 13 | -------------------------------------------------------------------------------- /docs/carousel/autoplay_props.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | component = dmc.Carousel( 4 | [ 5 | dmc.CarouselSlide(dmc.Center("Slide-1", bg="blue", c="white", p=60)), 6 | dmc.CarouselSlide(dmc.Center("Slide-2", bg="blue", c="white", p=60)), 7 | dmc.CarouselSlide(dmc.Center("Slide-3", bg="blue", c="white", p=60)), 8 | ], 9 | id="carousel-autoplay-props", 10 | emblaOptions={"loop": True}, 11 | autoplay={"delay": 2000, "stopOnMouseEnter": True, "stopOnInteraction": False}, 12 | ) 13 | -------------------------------------------------------------------------------- /docs/carousel/autoscroll.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | component = dmc.Carousel( 4 | [ 5 | dmc.CarouselSlide(dmc.Center("Slide-1", bg="blue", c="white", p=60)), 6 | dmc.CarouselSlide(dmc.Center("Slide-2", bg="blue", c="white", p=60)), 7 | dmc.CarouselSlide(dmc.Center("Slide-3", bg="blue", c="white", p=60)), 8 | ], 9 | id="carousel-autoscroll", 10 | emblaOptions={"loop": True}, 11 | autoScroll=True, 12 | ) 13 | -------------------------------------------------------------------------------- /docs/carousel/drag_free.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | component = dmc.Carousel( 4 | [ 5 | dmc.CarouselSlide( 6 | dmc.Center(f"Slide {i}", ta="center", bg="blue", c="white", h="100%") 7 | ) 8 | for i in range(1, 7) 9 | ], 10 | id="carousel-drag-free", 11 | withIndicators=True, 12 | height=200, 13 | slideGap="md", 14 | emblaOptions = {"loop": True, "align": "start", "dragFree": True}, 15 | ) 16 | -------------------------------------------------------------------------------- /docs/carousel/hide_inactive_controls.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | component = dmc.Carousel( 4 | [ 5 | dmc.CarouselSlide(dmc.Center(f"Slide {i}", bg="blue", c="white", h="100%")) 6 | for i in range(1, 4) 7 | ], 8 | id="carousel-hide-inactive-controls", 9 | height=200, 10 | classNames={"control": "dmc-control"}, 11 | ) 12 | -------------------------------------------------------------------------------- /docs/carousel/indicator_styles.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | component = dmc.Carousel( 4 | [ 5 | dmc.CarouselSlide(dmc.Center(f"Slide {i}", bg="blue", c="white", h="100%")) 6 | for i in range(1, 4) 7 | ], 8 | id="carousel-indicator-styles", 9 | withIndicators=True, 10 | height=200, 11 | emblaOptions = {"loop": True}, 12 | classNames={"indicator": "dmc-indicator"}, 13 | ) 14 | -------------------------------------------------------------------------------- /docs/carousel/show_controls_on_hover.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | component = dmc.Carousel( 4 | [ 5 | dmc.CarouselSlide(dmc.Center(f"Slide {i}", bg="blue", c="white", h="100%")) 6 | for i in range(1, 4) 7 | ], 8 | id="carousel-show-controls-on-hover", 9 | height=200, 10 | classNames={"controls": "dmc-controls", "root": "dmc-root"}, 11 | ) 12 | -------------------------------------------------------------------------------- /docs/carousel/simple.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | component = dmc.Carousel( 4 | [ 5 | dmc.CarouselSlide(dmc.Center("Slide-1", bg="blue", c="white", p=60)), 6 | dmc.CarouselSlide(dmc.Center("Slide-2", bg="blue", c="white", p=60)), 7 | dmc.CarouselSlide(dmc.Center("Slide-3", bg="blue", c="white", p=60)), 8 | ], 9 | id="carousel-simple", 10 | ) 11 | -------------------------------------------------------------------------------- /docs/carousel/size_gap.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | component = dmc.Carousel( 4 | [ 5 | dmc.CarouselSlide(dmc.Center(f"Slide {i}", bg="blue", c="white", h="100%")) 6 | for i in range(1, 7) 7 | ], 8 | id="carousel-size", 9 | withIndicators=True, 10 | height=200, 11 | slideSize="33.3333%", 12 | slideGap="md", 13 | emblaOptions = {"loop": True, "align": "start", "slidesToScroll": 3}, 14 | ) 15 | -------------------------------------------------------------------------------- /docs/carousel/vertical.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | component = dmc.Carousel( 4 | [ 5 | dmc.CarouselSlide( 6 | dmc.Center(f"Slide {i}", ta="center", bg="blue", c="white", h="100%") 7 | ) 8 | for i in range(1, 7) 9 | ], 10 | id="carousel-vertical", 11 | orientation="vertical", 12 | withIndicators=True, 13 | height=200, 14 | emblaOptions={"loop": True}, 15 | ) 16 | -------------------------------------------------------------------------------- /docs/center/simple.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | component = dmc.Center( 4 | style={"height": 200, "width": "100%"}, 5 | children=[ 6 | dmc.Badge("Free", style={"marginRight": 5}), 7 | dmc.Anchor("Click now!", href="https://mantine.dev/"), 8 | ], 9 | ) 10 | -------------------------------------------------------------------------------- /docs/checkbox/checkboxindicator.py: -------------------------------------------------------------------------------- 1 | 2 | import dash_mantine_components as dmc 3 | 4 | component = dmc.Group([ 5 | dmc.CheckboxIndicator(), 6 | dmc.CheckboxIndicator(checked=True), 7 | dmc.CheckboxIndicator(disabled=True), 8 | dmc.CheckboxIndicator(disabled=True, checked=True) 9 | ]) 10 | -------------------------------------------------------------------------------- /docs/checkbox/iconcolor.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | component = dmc.Checkbox( 4 | checked=True, 5 | color="lime.4", 6 | iconColor="dark.8", 7 | size="md", 8 | label="Bright lime checkbox" 9 | ) -------------------------------------------------------------------------------- /docs/checkbox/icons.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | from dash_iconify import DashIconify 3 | 4 | 5 | component = dmc.Stack([ 6 | dmc.Checkbox( 7 | label="Custom checked icon", 8 | checked=True, 9 | icon=DashIconify(icon="ion:bag-check-sharp"), 10 | size="lg", 11 | ), 12 | dmc.Checkbox( 13 | label="Custom indeterminate icons", 14 | indeterminate=True, 15 | indeterminateIcon=DashIconify(icon="mdi:dots-circle", ), 16 | size="lg", 17 | ), 18 | ]) -------------------------------------------------------------------------------- /docs/checkbox/link.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | component = dmc.Checkbox( 4 | id="checkbox-simple", 5 | label=dmc.Text( 6 | ["I accept the ", dmc.Anchor("Terms and Conditions", href="#"), "."] 7 | ), 8 | ) 9 | -------------------------------------------------------------------------------- /docs/checkbox/simple.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | from dash import html, Output, Input, callback 3 | 4 | component = html.Div( 5 | [ 6 | dmc.Checkbox( 7 | id="checkbox-state", label="I agree to sell my privacy", checked=True, mb=10 8 | ), 9 | dmc.Text(id="checkbox-output"), 10 | ] 11 | ) 12 | 13 | 14 | @callback(Output("checkbox-output", "children"), Input("checkbox-state", "checked")) 15 | def checkbox(checked): 16 | return str(checked) 17 | -------------------------------------------------------------------------------- /docs/chip/icon.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | from dash_iconify import DashIconify 3 | 4 | component = dmc.Chip( 5 | "Forbidden", 6 | icon=DashIconify(icon="bi-x-circle"), 7 | color="red", 8 | checked=True, 9 | m="sm", 10 | ) 11 | -------------------------------------------------------------------------------- /docs/chip/interactive.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | from lib.configurator import Configurator 4 | 5 | target = dmc.Chip("Awesome chip", checked=True) 6 | 7 | configurator = Configurator(target, center_component=True) 8 | 9 | configurator.add_segmented_control("variant", ["filled", "outline", "light"], "light") 10 | configurator.add_colorpicker("color", "indigo") 11 | configurator.add_slider("size", "sm") 12 | configurator.add_slider("radius", "lg") 13 | 14 | component = configurator.panel 15 | -------------------------------------------------------------------------------- /docs/chip/root.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | component = dmc.Chip( 4 | "Chip with props added to root", 5 | wrapperProps={"data-testid": "wrapper"}, 6 | checked=True, 7 | ) 8 | -------------------------------------------------------------------------------- /docs/chip/simple.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | from dash import Output, Input, callback 3 | 4 | 5 | component = dmc.Box( 6 | [ 7 | dmc.Chip("Awesome chip", checked=True, id="chip-state"), 8 | dmc.Text(id="chip-container"), 9 | ], 10 | p=20, 11 | ) 12 | 13 | 14 | @callback(Output("chip-container", "children"), Input("chip-state", "checked")) 15 | def checkbox(checked): 16 | return f"The chip is selected: {checked}" 17 | -------------------------------------------------------------------------------- /docs/chip/tooltip.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | component = dmc.Tooltip( 4 | label="chip tooltip", 5 | children=dmc.Chip("chip with tooltip", checked=True), 6 | ) 7 | -------------------------------------------------------------------------------- /docs/code-highlight/inline.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | component = dmc.Text( 4 | [ 5 | "You can highlight code inline ", 6 | dmc.InlineCodeHighlight( 7 | code='dmc.InlineCodeHighlight(code="Your code string here", language="python")', 8 | language="python", 9 | ), 10 | " Is not that cool?", 11 | ] 12 | ) 13 | -------------------------------------------------------------------------------- /docs/code-highlight/simple.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | component = dmc.CodeHighlight( 4 | language="python", 5 | code="""# Kadane's Algorithm 6 | 7 | class Solution: 8 | def maxSubArray(self, nums: List[int]) -> int: 9 | curr, summ = nums[0], nums[0] 10 | for n in nums[1:]: 11 | curr = max(n, curr + n) 12 | summ = max(summ, curr) 13 | return summ""", 14 | ) 15 | -------------------------------------------------------------------------------- /docs/code/block.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | component = dmc.Code( 4 | """from dash import Dash 5 | import dash_mantine_components as dmc 6 | 7 | app = Dash(__name__) 8 | 9 | app.layout = dmc.Button("Settings") 10 | 11 | if __name__ == "__main__": 12 | app.run_server(debug=True)""", 13 | block=True, 14 | ) 15 | -------------------------------------------------------------------------------- /docs/code/colors.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | code = "import collections" 4 | 5 | component = dmc.Group( 6 | children=[ 7 | dmc.Code(code, color=color) for color in ["red", "blue", "green", "pink"] 8 | ], 9 | ) 10 | -------------------------------------------------------------------------------- /docs/code/inline.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | component = dmc.Code("app = Dash(__name__)") 4 | -------------------------------------------------------------------------------- /docs/colorinput/disable-free-input.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | 4 | component = dmc.ColorInput( 5 | disallowInput=True, label="Your favorite color", value="#e05e5e", w=250 6 | ) 7 | -------------------------------------------------------------------------------- /docs/colorinput/eyedropper.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | 4 | component = dmc.ColorInput( 5 | withEyeDropper=True, label="Pick any color from the page", w=250 6 | ) 7 | -------------------------------------------------------------------------------- /docs/colorinput/formats.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | from lib.configurator import Configurator 4 | 5 | target = dmc.ColorInput(value="#C5D899", format="rgb", label="Select color", w=250) 6 | 7 | configurator = Configurator(target) 8 | 9 | configurator.add_select("format", ["hex", "hexa", "rgba", "rgb", "hsl", "hsla"], "rgb") 10 | 11 | component = configurator.panel 12 | -------------------------------------------------------------------------------- /docs/colorinput/simple.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | from dash import Output, Input, html, callback 3 | 4 | component = html.Div( 5 | [ 6 | dmc.ColorInput(id="color-input", label="Your favorite color", w=250), 7 | dmc.Space(h=10), 8 | dmc.Text(id="selected-color-input"), 9 | ] 10 | ) 11 | 12 | 13 | @callback(Output("selected-color-input", "children"), Input("color-input", "value")) 14 | def pick(color): 15 | return f"You selected: {color}" 16 | -------------------------------------------------------------------------------- /docs/colorinput/swatches-only.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | colors = dmc.DEFAULT_THEME["colors"] 4 | 5 | component = dmc.ColorInput( 6 | label="Your favorite color", 7 | value="#40c057", 8 | disallowInput=True, 9 | w=250, 10 | withPicker=False, 11 | swatches=colors["red"] + colors["green"], 12 | ) 13 | -------------------------------------------------------------------------------- /docs/colorpicker/picker.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | # fmt: off 4 | swatches = [ 5 | "#25262b", "#868e96", "#fa5252", "#e64980", "#be4bdb", "#7950f2", "#4c6ef5", 6 | "#228be6", "#15aabf", "#12b886", "#40c057", "#82c91e", "#fab005", "#fd7e14" 7 | ] 8 | # fmt: on 9 | 10 | component = dmc.ColorPicker(swatches=swatches, swatchesPerRow=7, withPicker=False) 11 | -------------------------------------------------------------------------------- /docs/colorpicker/simple.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | from dash import Output, Input, html, callback 3 | 4 | component = html.Div( 5 | [ 6 | dmc.ColorPicker(id="color-picker", format="rgba", value="rgba(41, 96, 214, 1)"), 7 | dmc.Space(h=10), 8 | dmc.Text(id="selected-color"), 9 | ] 10 | ) 11 | 12 | 13 | @callback(Output("selected-color", "children"), Input("color-picker", "value")) 14 | def pick(color): 15 | return color 16 | -------------------------------------------------------------------------------- /docs/colorpicker/swatches.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | # fmt: off 4 | swatches = [ 5 | "#25262b", "#868e96", "#fa5252", "#e64980", "#be4bdb", "#7950f2", "#4c6ef5", 6 | "#228be6", "#15aabf", "#12b886", "#40c057", "#82c91e", "#fab005", "#fd7e14" 7 | ] 8 | # fmt: on 9 | 10 | component = dmc.Group( 11 | gap=40, 12 | children=[ 13 | dmc.ColorPicker(swatches=swatches), 14 | dmc.ColorPicker(swatches=swatches, swatchesPerRow=9), 15 | ], 16 | ) 17 | -------------------------------------------------------------------------------- /docs/colors/color_c_props.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | component = dmc.Button("Button with color and c props", color="#C3FF36", c="black") -------------------------------------------------------------------------------- /docs/colors/colorswatch.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | colors = dmc.DEFAULT_THEME["colors"] 4 | 5 | component= dmc.SimpleGrid([ 6 | dmc.Card([ 7 | dmc.Box(h=100, w=100, bg=f"{c}.{i}" ), 8 | dmc.Text(f"{c} {i}", size="sm"), 9 | dmc.Text(f"{colors[c][i]}", size="sm", c="dimmed") 10 | ]) for c in list(colors) for i in range(10) 11 | ], cols={ "base": 5, "lg": 10 }, spacing="xs") 12 | 13 | -------------------------------------------------------------------------------- /docs/colors/custom_colors.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | component = dmc.Button("Custom Colors!", color="myColor") 4 | -------------------------------------------------------------------------------- /docs/colors/light-dark-var.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | component = dmc.Box([ 4 | 5 | dmc.Text( 6 | "Click the theme switch in the header to see how the background changes in different modes:" 7 | ), 8 | dmc.Text( 9 | "CSS variable defined for light and dark scheme", 10 | style={"backgroundColor": "var(--my-light-dark-colors"}, 11 | p="lg", 12 | m="md" 13 | ), 14 | ]) -------------------------------------------------------------------------------- /docs/colors/light-dark.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | component = dmc.Box([ 4 | 5 | dmc.Text( 6 | "Click the theme switch in the header to see how the background changes in different modes" 7 | ), 8 | dmc.Text( 9 | "CSS class defined for light and dark scheme", 10 | className="light-dark-demo", 11 | p="lg", 12 | m="md" 13 | ), 14 | ]) -------------------------------------------------------------------------------- /docs/colors/primaryshade.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | component = dmc.Group([ 4 | dmc.Button("Button", color="blue.3"), 5 | dmc.Button("Button", variant="light", color="blue.3"), 6 | dmc.Button("Button", variant="outline", color="blue.3") 7 | ]) 8 | -------------------------------------------------------------------------------- /docs/colors/theme_colors.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | from dash import html 3 | 4 | component = html.Div( 5 | " This is a blue element", 6 | style={ 7 | "backgroundColor": dmc.DEFAULT_THEME["colors"]["blue"][1], 8 | "color": dmc.DEFAULT_THEME["colors"]["blue"][9], 9 | "padding": dmc.DEFAULT_THEME["spacing"]["lg"] 10 | } 11 | ) -------------------------------------------------------------------------------- /docs/compositechart/chartcolor.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | from .data import data 3 | 4 | component = dmc.CompositeChart( 5 | h=300, 6 | data=data, 7 | dataKey="date", 8 | withLegend=True, 9 | maxBarWidth=30, 10 | series=[ 11 | {"name": "Apples", "color": "blue", "type": "line"}, 12 | ] 13 | ) 14 | -------------------------------------------------------------------------------- /docs/compositechart/grid-text-color-light-dark.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | from .data import data 3 | 4 | component = dmc.CompositeChart( 5 | h=300, 6 | dataKey="date", 7 | data=data, 8 | maxBarWidth=30, 9 | className="chart-grid-text-colors", 10 | series=[ 11 | {"name": "Tomatoes", "color": "rgba(18, 120, 255, 0.2)", "type": "bar"}, 12 | {"name": "Apples", "color": "red.8", "type": "line"}, 13 | {"name": "Oranges", "color": "yellow.8", "type": "area"}, 14 | ] 15 | ) 16 | -------------------------------------------------------------------------------- /docs/compositechart/legend.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | from .data import data 3 | 4 | component = dmc.CompositeChart( 5 | h=300, 6 | data=data, 7 | dataKey="date", 8 | withLegend=True, 9 | maxBarWidth=30, 10 | series=[ 11 | {"name": "Tomatoes", "color": "rgba(18, 120, 255, 0.2)", "type": "bar"}, 12 | {"name": "Apples", "color": "red.8", "type": "line"}, 13 | {"name": "Oranges", "color": "yellow.8", "type": "area"}, 14 | ] 15 | ) 16 | -------------------------------------------------------------------------------- /docs/compositechart/line-color-light-dark.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | from .data import data 3 | 4 | component = dmc.CompositeChart( 5 | h=300, 6 | dataKey="date", 7 | data=data, 8 | series=[{"name": "Apples", "color": "var(--chart-color)", "type": "line" }], 9 | ) 10 | 11 | -------------------------------------------------------------------------------- /docs/compositechart/pointslabels.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | from .data import data 3 | 4 | component = dmc.CompositeChart( 5 | h=300, 6 | data=data, 7 | dataKey="date", 8 | withPointLabels=True, 9 | withLegend=True, 10 | maxBarWidth=30, 11 | series=[ 12 | {"name": "Tomatoes", "color": "rgba(18, 120, 255, 0.2)", "type": "bar"}, 13 | {"name": "Apples", "color": "red.8", "type": "line"}, 14 | {"name": "Oranges", "color": "yellow.8", "type": "area"}, 15 | ] 16 | ) 17 | -------------------------------------------------------------------------------- /docs/compositechart/removetooltip.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | from .data import data 3 | 4 | component = dmc.CompositeChart( 5 | h=300, 6 | data=data, 7 | dataKey="date", 8 | withTooltip=False, 9 | maxBarWidth=30, 10 | series=[ 11 | {"name": "Tomatoes", "color": "rgba(18, 120, 255, 0.2)", "type": "bar"}, 12 | {"name": "Apples", "color": "red.8", "type": "line"}, 13 | {"name": "Oranges", "color": "yellow.8", "type": "area"}, 14 | ] 15 | ) 16 | -------------------------------------------------------------------------------- /docs/compositechart/strokedasharray.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | from .data import data 3 | 4 | component = dmc.CompositeChart( 5 | h=300, 6 | data=data, 7 | dataKey="date", 8 | strokeDasharray="15 15", 9 | maxBarWidth=30, 10 | series=[ 11 | {"name": "Tomatoes", "color": "rgba(18, 120, 255, 0.2)", "type": "bar"}, 12 | {"name": "Apples", "color": "red.8", "type": "line"}, 13 | {"name": "Oranges", "color": "yellow.8", "type": "area"}, 14 | ] 15 | ) 16 | -------------------------------------------------------------------------------- /docs/compositechart/tooltipanimation.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | from .data import data 3 | 4 | component = dmc.CompositeChart( 5 | h=300, 6 | data=data, 7 | dataKey="date", 8 | tooltipAnimationDuration=200, 9 | maxBarWidth=30, 10 | series=[ 11 | {"name": "Tomatoes", "color": "rgba(18, 120, 255, 0.2)", "type": "bar"}, 12 | {"name": "Apples", "color": "red.8", "type": "line"}, 13 | {"name": "Oranges", "color": "yellow.8", "type": "area"}, 14 | ] 15 | ) 16 | -------------------------------------------------------------------------------- /docs/compositechart/units.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | from .data import data 3 | 4 | component = dmc.CompositeChart( 5 | h=300, 6 | data=data, 7 | dataKey="date", 8 | unit="$", 9 | maxBarWidth=30, 10 | series=[ 11 | {"name": "Tomatoes", "color": "rgba(18, 120, 255, 0.2)", "type": "bar"}, 12 | {"name": "Apples", "color": "red.8", "type": "line"}, 13 | {"name": "Oranges", "color": "yellow.8", "type": "area"}, 14 | ] 15 | ) 16 | -------------------------------------------------------------------------------- /docs/compositechart/valueformatter.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | from .data import data 3 | 4 | component = dmc.CompositeChart( 5 | h=300, 6 | data=data, 7 | dataKey="date", 8 | maxBarWidth=30, 9 | valueFormatter={"function": "formatNumberIntl"}, 10 | series=[ 11 | {"name": "Tomatoes", "color": "rgba(18, 120, 255, 0.2)", "type": "bar"}, 12 | {"name": "Apples", "color": "red.8", "type": "line"}, 13 | {"name": "Oranges", "color": "yellow.8", "type": "area"}, 14 | ] 15 | ) 16 | -------------------------------------------------------------------------------- /docs/container/fluid.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | from dash import html 3 | 4 | 5 | component = dmc.Container( 6 | "Fluid container has 100% max-width", 7 | fluid=True, 8 | h=50, 9 | bg="var(--mantine-color-blue-light)" 10 | ) 11 | -------------------------------------------------------------------------------- /docs/cssvariables/button.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | component = dmc.Button("Pink filled button", color="pink", variant="filled") -------------------------------------------------------------------------------- /docs/dash-iconify/props.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | from dash_iconify import DashIconify 3 | 4 | component = dmc.Group( 5 | [ 6 | DashIconify(icon="ion:logo-github", width=30, rotate=1, flip="horizontal"), 7 | DashIconify(icon="flat-ui:settings", width=30), 8 | DashIconify( 9 | icon="feather:info", 10 | color=dmc.DEFAULT_THEME["colors"]["yellow"][5], 11 | width=30, 12 | ), 13 | ] 14 | ) 15 | -------------------------------------------------------------------------------- /docs/dateinput/clearable.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | component = dmc.DateInput( 4 | clearable=True, label="Date input", placeholder="Date Input", w=250 5 | ) 6 | -------------------------------------------------------------------------------- /docs/dateinput/minmax.py: -------------------------------------------------------------------------------- 1 | from datetime import datetime, timedelta 2 | 3 | import dash_mantine_components as dmc 4 | 5 | component = dmc.DateInput( 6 | minDate=datetime.now(), 7 | maxDate=datetime.now() + timedelta(days=7), 8 | placeholder="Date input", 9 | label="Select valid date", 10 | w=250, 11 | ) 12 | -------------------------------------------------------------------------------- /docs/datepicker/defaultdate.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | component = dmc.Center( 4 | dmc.DatePicker(defaultDate="2015-02-01") 5 | ) 6 | 7 | -------------------------------------------------------------------------------- /docs/datepicker/disabledates.py: -------------------------------------------------------------------------------- 1 | 2 | import dash_mantine_components as dmc 3 | 4 | component = dmc.Center( 5 | dmc.DatePicker( 6 | value="2024-11-05", 7 | defaultDate="2024-11-01", 8 | disabledDates=["2024-11-06", "2024-11-07", "2024-11-08"], 9 | m="lg" 10 | ) 11 | ) 12 | 13 | -------------------------------------------------------------------------------- /docs/datepicker/disabledates_function.py: -------------------------------------------------------------------------------- 1 | 2 | import dash_mantine_components as dmc 3 | 4 | component = dmc.Center( 5 | dmc.DatePicker( 6 | value="2024-11-08", 7 | defaultDate="2024-11-01", 8 | disabledDates={"function": "excludeDate"}, 9 | m="lg" 10 | ) 11 | ) -------------------------------------------------------------------------------- /docs/datepicker/firstdayofweek.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | component = dmc.Group([ 4 | dmc.DatePicker(firstDayOfWeek=0), 5 | dmc.DatePicker(firstDayOfWeek=6) 6 | ], justify="center", gap="xl") 7 | 8 | -------------------------------------------------------------------------------- /docs/datepicker/hideoutsidedates.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | component = dmc.Center( 4 | dmc.DatePicker(hideOutsideDates=True) 5 | ) 6 | 7 | -------------------------------------------------------------------------------- /docs/datepicker/hideweekdays.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | component = dmc.Center( 4 | dmc.DatePicker(hideWeekdays=True) 5 | ) 6 | 7 | -------------------------------------------------------------------------------- /docs/datepicker/labelformat.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | component = dmc.Center( 4 | dmc.DatePicker( 5 | decadeLabelFormat="YY", 6 | yearLabelFormat="YYYY [year]", 7 | monthLabelFormat="MM/YY", 8 | ) 9 | ) 10 | 11 | -------------------------------------------------------------------------------- /docs/datepicker/level.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | component = dmc.Group([ 4 | dmc.DatePicker(level="decade"), 5 | dmc.DatePicker(level="year") 6 | ], justify="center") 7 | 8 | -------------------------------------------------------------------------------- /docs/datepicker/maxlevel.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | component = dmc.Group([ 4 | dmc.DatePicker(maxLevel="year"), 5 | dmc.DatePicker(maxLevel="month") 6 | ], justify="center", gap="xl") 7 | 8 | -------------------------------------------------------------------------------- /docs/datepicker/minmax.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | component = dmc.Center( 4 | dmc.DatePicker( 5 | minDate="2025-05-10", 6 | maxDate = "2025-05-25" 7 | ) 8 | ) 9 | 10 | -------------------------------------------------------------------------------- /docs/datepicker/numberofcolumns.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | component = dmc.Center( 4 | dmc.DatePicker(numberOfColumns=2) 5 | ) 6 | 7 | -------------------------------------------------------------------------------- /docs/datepicker/range.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | from dash import Input, Output, html, callback 3 | 4 | 5 | component = dmc.Stack([ 6 | dmc.DatePicker( 7 | id="date-picker-range", 8 | value=[], 9 | type="range" 10 | ), 11 | dmc.Text(id="date-picker-out-range"), 12 | 13 | ], align="center") 14 | 15 | 16 | @callback( 17 | Output("date-picker-out-range", "children"), Input("date-picker-range", "value") 18 | ) 19 | def update_output(d): 20 | return f"You selected {str(d)}" -------------------------------------------------------------------------------- /docs/datepicker/simple.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | from dash import Input, Output, html, callback 3 | 4 | 5 | component = dmc.Stack([ 6 | dmc.DatePicker(id="date-picker"), 7 | dmc.Text(id="selected-date-picker", mt=10), 8 | ], align="center") 9 | 10 | 11 | @callback( 12 | Output("selected-date-picker", "children"), Input("date-picker", "value") 13 | ) 14 | def update_output(d): 15 | return f"You selected {d}" 16 | -------------------------------------------------------------------------------- /docs/datepicker/weekenddays.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | component = dmc.Center( 4 | dmc.DatePicker(weekendDays=[1,2]) 5 | ) 6 | 7 | -------------------------------------------------------------------------------- /docs/datepicker/weeknumbers.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | component = dmc.Center( 4 | dmc.DatePicker(withWeekNumbers=True) 5 | ) 6 | 7 | -------------------------------------------------------------------------------- /docs/datepicker/yearmonformat.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | component = dmc.Center( 4 | dmc.DatePicker(monthsListFormat="MM", yearsListFormat="YY") 5 | ) 6 | 7 | -------------------------------------------------------------------------------- /docs/datepickerinput/clearable.py: -------------------------------------------------------------------------------- 1 | from datetime import datetime 2 | 3 | import dash_mantine_components as dmc 4 | 5 | component = dmc.Stack( 6 | [ 7 | dmc.DatePickerInput( 8 | value=datetime.now().date(), 9 | label="Date not clearable", 10 | w=200, 11 | ), 12 | dmc.DatePickerInput( 13 | value=datetime.now().date(), 14 | label="Date clearable", 15 | w=200, 16 | clearable=True, 17 | ), 18 | ] 19 | ) 20 | -------------------------------------------------------------------------------- /docs/datepickerinput/columns.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | component = dmc.DatePickerInput(w=250, type="range", numberOfColumns=2) 4 | -------------------------------------------------------------------------------- /docs/datepickerinput/locale.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | component = dmc.DatesProvider( 4 | dmc.DatePickerInput(id="fr-date-picker-input", w=200, label="Sélectionner une date"), 5 | settings={"locale": "fr"}, 6 | ) 7 | -------------------------------------------------------------------------------- /docs/datepickerinput/modal.py: -------------------------------------------------------------------------------- 1 | from datetime import datetime 2 | 3 | import dash_mantine_components as dmc 4 | 5 | component = dmc.DatePickerInput( 6 | value=datetime.now().date(), 7 | dropdownType="modal", 8 | w=200, 9 | ) 10 | -------------------------------------------------------------------------------- /docs/datesprovider/consistentweeks.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | component = dmc.DatesProvider( 4 | children=dmc.DatePickerInput( 5 | h=400, 6 | popoverProps={ 7 | "opened": True, 8 | "position": "bottom", 9 | "middlewares":{ "flip": False, "shift": False } 10 | } 11 | ), 12 | settings={"consistentWeeks": True}, 13 | ) 14 | -------------------------------------------------------------------------------- /docs/datesprovider/simple.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | component = dmc.DatesProvider( 4 | children=dmc.Stack( 5 | [ 6 | dmc.DatePickerInput( 7 | w=250, 8 | label="Sélectionner une date", 9 | ), 10 | dmc.DatePickerInput( 11 | w=250, 12 | label="Sélectionner une autre date", 13 | ), 14 | ] 15 | ), 16 | settings={"locale": "fr", "firstDayOfWeek": 0, "weekendDays": [0]}, 17 | ) 18 | -------------------------------------------------------------------------------- /docs/datetimepicker/clearable.py: -------------------------------------------------------------------------------- 1 | from datetime import datetime 2 | 3 | import dash_mantine_components as dmc 4 | 5 | component = dmc.DateTimePicker( 6 | clearable=True, 7 | value="2025-01-01", 8 | label="Pick date and time (clearable)", 9 | placeholder="Pick Date and time", 10 | ) 11 | -------------------------------------------------------------------------------- /docs/datetimepicker/disabled.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | component = dmc.DateTimePicker( 4 | disabled=True, 5 | label="Pick date and time (Disabled)", 6 | placeholder="Pick date and time", 7 | ) 8 | -------------------------------------------------------------------------------- /docs/datetimepicker/modal.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | component = dmc.DateTimePicker( 4 | dropdownType="modal", 5 | label="Pick date and time (picker in modal)", 6 | placeholder="Pick date and time", 7 | ) 8 | -------------------------------------------------------------------------------- /docs/datetimepicker/seconds.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | component = dmc.DateTimePicker( 4 | label="Pick date and time", 5 | placeholder="Pick date and time", 6 | withSeconds=True, 7 | ) 8 | -------------------------------------------------------------------------------- /docs/datetimepicker/time-picker-props.py: -------------------------------------------------------------------------------- 1 | from datetime import datetime 2 | 3 | import dash_mantine_components as dmc 4 | 5 | component = dmc.DateTimePicker( 6 | label="Pick date and time", 7 | placeholder="Pick Date and time", 8 | timePickerProps={ 9 | "withDropdown": True, 10 | "popoverProps": { "withinPortal": False }, 11 | "format": '12h', 12 | } 13 | ) 14 | -------------------------------------------------------------------------------- /docs/datetimepicker/valueformat.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | component = dmc.DateTimePicker( 4 | valueFormat="DD MMM YYYY hh:mm A", 5 | label="Pick date and time (Value Formatter)", 6 | placeholder="Pick date and time", 7 | ) 8 | -------------------------------------------------------------------------------- /docs/divider/color.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | component = dmc.Divider(color="red") 4 | -------------------------------------------------------------------------------- /docs/divider/label.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | component = dmc.Stack( 4 | [ 5 | dmc.Divider(label="Click on update button to refresh"), 6 | dmc.Divider(label="Divider with centered content", labelPosition="center"), 7 | dmc.Divider(label="Divider with content on the right", labelPosition="right"), 8 | ], 9 | ) 10 | -------------------------------------------------------------------------------- /docs/divider/orientation.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | component = dmc.Group( 4 | [ 5 | dmc.Badge("Badge 1"), 6 | dmc.Divider(orientation="vertical", style={"height": 20}), 7 | dmc.Badge("Badge 2"), 8 | dmc.Divider(orientation="vertical", style={"height": 20}), 9 | dmc.Badge("Badge 3"), 10 | ] 11 | ) 12 | -------------------------------------------------------------------------------- /docs/divider/simple.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | component = dmc.Stack( 4 | children=[ 5 | dmc.Divider(variant="solid"), 6 | dmc.Divider(variant="dashed"), 7 | dmc.Divider(variant="dotted"), 8 | ], 9 | ) 10 | -------------------------------------------------------------------------------- /docs/divider/sizes.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | component = dmc.Stack( 4 | children=[ 5 | dmc.Divider(size="xs"), 6 | dmc.Divider(size="sm"), 7 | dmc.Divider(size="md"), 8 | dmc.Divider(size="lg"), 9 | dmc.Divider(size="xl"), 10 | dmc.Divider(size=10), 11 | ], 12 | ) 13 | -------------------------------------------------------------------------------- /docs/donutchart/angle.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | from .data import data 3 | 4 | component = dmc.DonutChart(data=data, startAngle=180, endAngle=0) 5 | -------------------------------------------------------------------------------- /docs/donutchart/chartlabel.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | from .data import data 3 | 4 | component = dmc.DonutChart(data=data, chartLabel="Users by country") 5 | -------------------------------------------------------------------------------- /docs/donutchart/data.py: -------------------------------------------------------------------------------- 1 | data = [ 2 | {"name": "USA", "value": 400, "color": "indigo.6"}, 3 | {"name": "India", "value": 300, "color": "yellow.6"}, 4 | {"name": "Japan", "value": 100, "color": "teal.6"}, 5 | {"name": "Other", "value": 200, "color": "gray.6"}, 6 | ] 7 | -------------------------------------------------------------------------------- /docs/donutchart/paddingangle.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | from .data import data 3 | 4 | from lib.configurator import Configurator 5 | 6 | target = dmc.DonutChart(data=data, paddingAngle=30) 7 | 8 | configurator = Configurator(target) 9 | configurator.add_number_slider("paddingAngle", 30, min=0, max=30) 10 | 11 | component = configurator.panel 12 | -------------------------------------------------------------------------------- /docs/donutchart/segmentcolor.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | data = [ 4 | {"name": "USA", "value": 400, "color": "blue"}, 5 | {"name": "Other", "value": 200, "color": "gray.6"}, 6 | ] 7 | 8 | component = dmc.DonutChart(data=data) 9 | -------------------------------------------------------------------------------- /docs/donutchart/segmentlabels.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | from .data import data 3 | 4 | from lib.configurator import Configurator 5 | 6 | target = dmc.DonutChart(data=data, withLabels=True, withLabelsLine=True) 7 | 8 | configurator = Configurator(target) 9 | 10 | configurator.add_switch("withLabelsLine", True) 11 | 12 | component = configurator.panel 13 | -------------------------------------------------------------------------------- /docs/donutchart/size.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | from .data import data 3 | 4 | from lib.configurator import Configurator 5 | 6 | target = dmc.DonutChart(data=data, size=160, thickness=20) 7 | 8 | configurator = Configurator(target) 9 | configurator.add_number_slider("size", 275, min=80, max=300) 10 | configurator.add_number_slider("thickness", 20, min=2, max=30) 11 | 12 | component = configurator.panel 13 | -------------------------------------------------------------------------------- /docs/donutchart/stroke.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | from .data import data 3 | 4 | component = dmc.DonutChart(data=data, strokeColor="var(--card-bg)") 5 | -------------------------------------------------------------------------------- /docs/donutchart/strokewidth.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | from .data import data 3 | 4 | from lib.configurator import Configurator 5 | 6 | target = dmc.DonutChart( 7 | data=data, 8 | ) 9 | 10 | configurator = Configurator(target) 11 | 12 | configurator.add_number_slider("strokeWidth", 0, min=0, max=5) 13 | 14 | component = configurator.panel 15 | -------------------------------------------------------------------------------- /docs/donutchart/usage.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | from .data import data 3 | 4 | component = dmc.DonutChart(data=data) 5 | -------------------------------------------------------------------------------- /docs/donutchart/withouttooltip.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | from .data import data 3 | 4 | component = dmc.DonutChart(data=data, withTooltip=False) 5 | -------------------------------------------------------------------------------- /docs/fieldset/disabled.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | component = dmc.Fieldset( 4 | children=[ 5 | dmc.TextInput(label="Your name", placeholder="Your name"), 6 | dmc.TextInput(label="Email", placeholder="Email"), 7 | dmc.Group([dmc.Button("Send")], justify="flex-end"), 8 | ], 9 | legend="Personal information", 10 | disabled=True, 11 | ) 12 | -------------------------------------------------------------------------------- /docs/figuretemplates/plotly_figure_templates.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | from dash import dcc 3 | import plotly.express as px 4 | 5 | df = px.data.gapminder() 6 | dff = df[df.year == 2007] 7 | 8 | component = dmc.SimpleGrid( 9 | [ 10 | dcc.Graph(figure=px.bar(dff, x="continent", y="pop", template="plotly_white", title="plotly_white theme")), 11 | dcc.Graph(figure=px.bar(dff, x="continent", y="pop", template="plotly_dark", title="plotly_dark theme")) 12 | ], 13 | cols=2 14 | ) 15 | -------------------------------------------------------------------------------- /docs/flex/responsive.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | component = dmc.Flex( 4 | [ 5 | dmc.Button("Button 1"), 6 | dmc.Button("Button 2"), 7 | dmc.Button("Button 3"), 8 | ], 9 | direction={"base": "column", "sm": "row"}, 10 | gap={"base": "sm", "sm": "lg"}, 11 | justify={"sm": "center"}, 12 | ) 13 | -------------------------------------------------------------------------------- /docs/getting-started/hello_world.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | component = dmc.Alert( 4 | "Welcome to Dash Mantine Components", 5 | title="Hello!", 6 | color="violet", 7 | ) -------------------------------------------------------------------------------- /docs/getting-started/interactive.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | from lib.configurator import Configurator 4 | 5 | target = dmc.Button("Settings") 6 | 7 | configurator = Configurator(target, center_component=True) 8 | 9 | configurator.add_select( 10 | "variant", 11 | ["link", "filled", "outline", "light", "gradient", "subtle", "default"], 12 | "filled", 13 | ) 14 | configurator.add_colorpicker("color", "indigo") 15 | configurator.add_switch("loading", False) 16 | 17 | component = configurator.panel 18 | -------------------------------------------------------------------------------- /docs/grid/auto.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | from dash import html 3 | 4 | style = { 5 | "border": f"1px solid {dmc.DEFAULT_THEME['colors']['indigo'][4]}", 6 | "textAlign": "center", 7 | } 8 | 9 | component = dmc.Grid( 10 | children=[ 11 | dmc.GridCol(html.Div("span=auto", style=style), span="auto"), 12 | dmc.GridCol(html.Div("span=6", style=style), span=6), 13 | dmc.GridCol(html.Div("span=auto", style=style), span="auto"), 14 | ], 15 | gutter="xl", 16 | ) 17 | -------------------------------------------------------------------------------- /docs/grid/columns.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | from dash import html 3 | 4 | style = { 5 | "border": f"1px solid {dmc.DEFAULT_THEME['colors']['indigo'][4]}", 6 | "textAlign": "center", 7 | } 8 | 9 | component = dmc.Grid( 10 | children=[ 11 | dmc.GridCol(html.Div("1", style=style), span=12), 12 | dmc.GridCol(html.Div("2", style=style), span=6), 13 | dmc.GridCol(html.Div("3", style=style), span=6), 14 | ], 15 | columns=24 16 | ) 17 | -------------------------------------------------------------------------------- /docs/grid/fit.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | from dash import html 3 | 4 | style = { 5 | "border": f"1px solid {dmc.DEFAULT_THEME['colors']['indigo'][4]}", 6 | "textAlign": "center", 7 | } 8 | 9 | component = dmc.Grid( 10 | children=[ 11 | dmc.GridCol(html.Div("content width", style=style), span="content"), 12 | dmc.GridCol(html.Div("2", style=style), span=6), 13 | ], 14 | gutter="xl", 15 | ) 16 | -------------------------------------------------------------------------------- /docs/grid/gutter.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | from dash import html 3 | 4 | style = { 5 | "border": f"1px solid {dmc.DEFAULT_THEME['colors']['indigo'][4]}", 6 | "textAlign": "center", 7 | } 8 | 9 | component = dmc.Grid( 10 | children=[ 11 | dmc.GridCol(html.Div("1", style=style), span=4), 12 | dmc.GridCol(html.Div("2", style=style), span=4), 13 | dmc.GridCol(html.Div("3", style=style), span=4), 14 | ], 15 | gutter={ "base": 5, "xs": "md", "md": "xl", "xl": 50 }, 16 | ) 17 | -------------------------------------------------------------------------------- /docs/grid/offset.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | from dash import html 3 | 4 | style = { 5 | "border": f"1px solid {dmc.DEFAULT_THEME['colors']['indigo'][4]}", 6 | "textAlign": "center", 7 | } 8 | 9 | component = dmc.Grid( 10 | children=[ 11 | dmc.GridCol(html.Div("1", style=style), span=3), 12 | dmc.GridCol(html.Div("2", style=style), span=3), 13 | dmc.GridCol(html.Div("3", style=style), span=3, offset=3), 14 | ], 15 | gutter="xl", 16 | ) 17 | -------------------------------------------------------------------------------- /docs/grid/simple.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | from dash import html 3 | 4 | style = { 5 | "border": f"1px solid {dmc.DEFAULT_THEME['colors']['indigo'][4]}", 6 | "textAlign": "center", 7 | } 8 | 9 | component = dmc.Grid( 10 | children=[ 11 | dmc.GridCol(html.Div("1", style=style), span=4), 12 | dmc.GridCol(html.Div("2", style=style), span=4), 13 | dmc.GridCol(html.Div("3", style=style), span=4), 14 | ], 15 | gutter="xl", 16 | ) 17 | -------------------------------------------------------------------------------- /docs/highlight/interactive.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | from lib.configurator import Configurator 4 | 5 | target = dmc.Highlight( 6 | "Highlight this, definitely this and also this!", highlight="this" 7 | ) 8 | 9 | configurator = Configurator(target) 10 | configurator.add_colorpicker("color", "lime") 11 | 12 | component = configurator.panel 13 | -------------------------------------------------------------------------------- /docs/highlight/multiple.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | component = dmc.Highlight( 4 | "Highlight this, definitely this and also that!", highlight=["this", "that"] 5 | ) 6 | -------------------------------------------------------------------------------- /docs/highlight/simple.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | component = dmc.Highlight( 4 | "Highlight this, definitely this and also this!", highlight="this" 5 | ) 6 | -------------------------------------------------------------------------------- /docs/highlight/text.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | component = dmc.Highlight( 4 | "Highlight this, definitely this and also this!", 5 | highlight="this", 6 | size="lg", 7 | c="green", 8 | color="yellow", 9 | ta="center", 10 | ) 11 | -------------------------------------------------------------------------------- /docs/image/fit.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | component = dmc.Image( 4 | radius="md", 5 | h=200, 6 | w="auto", 7 | fit="contain", 8 | src="https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/images/bg-9.png", 9 | ) 10 | -------------------------------------------------------------------------------- /docs/image/height.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | component = dmc.Image( 4 | radius="md", 5 | h=200, 6 | src="https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/images/bg-10.png", 7 | ) 8 | -------------------------------------------------------------------------------- /docs/image/placeholder.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | component = dmc.Image( 4 | radius="md", 5 | src=None, 6 | h=200, 7 | fallbackSrc="https://placehold.co/600x400?text=Placeholder", 8 | ) 9 | -------------------------------------------------------------------------------- /docs/image/simple.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | component = dmc.Image( 4 | radius="md", 5 | src="https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/images/bg-7.png", 6 | ) 7 | -------------------------------------------------------------------------------- /docs/indicator/inline.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | component = dmc.Indicator( 4 | dmc.Avatar( 5 | size="lg", 6 | radius="sm", 7 | src="https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/avatars/avatar-2.png", 8 | ), 9 | inline=True, 10 | size=16, 11 | label="New", 12 | ) 13 | -------------------------------------------------------------------------------- /docs/indicator/offset.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | component = dmc.Indicator( 4 | dmc.Avatar( 5 | size="lg", 6 | radius="xl", 7 | src="https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/avatars/avatar-3.png", 8 | ), 9 | inline=True, 10 | offset=7, 11 | position="bottom-end", 12 | color="red", 13 | withBorder=True, 14 | size=16, 15 | ) 16 | -------------------------------------------------------------------------------- /docs/indicator/processing.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | component = dmc.Indicator( 4 | dmc.Avatar( 5 | size="lg", 6 | radius="sm", 7 | src="https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/avatars/avatar-4.png", 8 | ), 9 | inline=True, 10 | color="red", 11 | size=12, 12 | processing=True, 13 | ) 14 | -------------------------------------------------------------------------------- /docs/jsoninput/simple.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | component = dmc.JsonInput( 4 | label="Your package.json", 5 | placeholder="Textarea will autosize to fit the content", 6 | validationError="Invalid JSON", 7 | formatOnBlur=True, 8 | autosize=True, 9 | minRows=4, 10 | ) 11 | -------------------------------------------------------------------------------- /docs/kbd/simple.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | from dash import html 3 | 4 | component = html.Div([dmc.Kbd("⌘"), " + ", dmc.Kbd("shift"), " + ", dmc.Kbd("M")]) 5 | -------------------------------------------------------------------------------- /docs/linechart/axislabels.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | from .data import data 3 | 4 | component = dmc.LineChart( 5 | h=300, 6 | dataKey="date", 7 | data=data, 8 | xAxisLabel="Date", 9 | yAxisLabel="Amount", 10 | series=[ 11 | {"name": "Apples", "color": "indigo.6"}, 12 | {"name": "Oranges", "color": "blue.6"}, 13 | {"name": "Tomatoes", "color": "teal.6"}, 14 | ], 15 | ) 16 | -------------------------------------------------------------------------------- /docs/linechart/custom-tooltip.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | from .data import data 3 | 4 | component = dmc.LineChart( 5 | h=300, 6 | dataKey="date", 7 | data=data, 8 | series=[ 9 | {"name": "Apples", "color": "indigo.6"}, 10 | {"name": "Oranges", "color": "blue.6"}, 11 | {"name": "Tomatoes", "color": "teal.6"}, 12 | ], 13 | tooltipProps={"content": {"function": "chartTooltip"}} 14 | ) 15 | -------------------------------------------------------------------------------- /docs/linechart/customizedots.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | from .data import data 3 | 4 | 5 | component = dmc.LineChart( 6 | h=300, 7 | dataKey="date", 8 | data=data, 9 | dotProps={"r": 6, "strokeWidth": 2, "stroke": "#fff"}, 10 | activeDotProps={"r": 8, "strokeWidth": 1, "fill": "#fff"}, 11 | series=[ 12 | {"name": "Apples", "color": "indigo.6"}, 13 | {"name": "Oranges", "color": "blue.6"}, 14 | {"name": "Tomatoes", "color": "teal.6"}, 15 | ], 16 | ) 17 | -------------------------------------------------------------------------------- /docs/linechart/dashedarealine.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | from .data import data 3 | 4 | component = dmc.LineChart( 5 | h=300, 6 | dataKey="date", 7 | data=data, 8 | strokeWidth=1, 9 | dotProps={"r": 2}, 10 | activeDotProps={"r": 3, "strokeWidth": 1}, 11 | series=[ 12 | {"name": "Apples", "color": "indigo.6"}, 13 | {"name": "Oranges", "color": "blue.6"}, 14 | {"name": "Tomatoes", "color": "teal.6", "strokeDasharray": "5 5"}, 15 | ], 16 | ) 17 | -------------------------------------------------------------------------------- /docs/linechart/data.py: -------------------------------------------------------------------------------- 1 | data = [ 2 | {"date": "Mar 22", "Apples": 2890, "Oranges": 2338, "Tomatoes": 2452}, 3 | {"date": "Mar 23", "Apples": 2756, "Oranges": 2103, "Tomatoes": 2402}, 4 | {"date": "Mar 24", "Apples": 3322, "Oranges": 986, "Tomatoes": 1821}, 5 | {"date": "Mar 25", "Apples": 3470, "Oranges": 2108, "Tomatoes": 2809}, 6 | {"date": "Mar 26", "Apples": 3129, "Oranges": 1726, "Tomatoes": 2290}, 7 | ] 8 | -------------------------------------------------------------------------------- /docs/linechart/grid-text-color-light-dark.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | from .data import data 3 | 4 | 5 | 6 | component = dmc.LineChart( 7 | h=300, 8 | dataKey="date", 9 | data=data, 10 | className="chart-grid-text-colors", 11 | series=[ 12 | {"name": "Apples", "color": "indigo.6"}, 13 | {"name": "Oranges", "color": "blue.6"}, 14 | {"name": "Tomatoes", "color": "teal.6"}, 15 | ], 16 | ) 17 | 18 | -------------------------------------------------------------------------------- /docs/linechart/highlighthover.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | from .data import data 3 | 4 | component = dmc.LineChart( 5 | h=300, 6 | dataKey="date", 7 | data=data, 8 | series=[ 9 | {"name": "Apples", "color": "indigo.6"}, 10 | {"name": "Oranges", "color": "blue.6"}, 11 | {"name": "Tomatoes", "color": "teal.6"}, 12 | ], 13 | withLegend=True, 14 | highlightHover=True, 15 | withTooltip=False, 16 | strokeWidth=4 17 | ) 18 | -------------------------------------------------------------------------------- /docs/linechart/legend.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | from .data import data 3 | 4 | component = dmc.LineChart( 5 | h=300, 6 | dataKey="date", 7 | data=data, 8 | withLegend=True, 9 | series=[ 10 | {"name": "Apples", "color": "indigo.6"}, 11 | {"name": "Oranges", "color": "blue.6"}, 12 | {"name": "Tomatoes", "color": "teal.6"}, 13 | ], 14 | ) 15 | -------------------------------------------------------------------------------- /docs/linechart/legendposition.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | from .data import data 3 | 4 | component = dmc.LineChart( 5 | h=300, 6 | dataKey="date", 7 | data=data, 8 | withLegend=True, 9 | legendProps={"verticalAlign": "bottom", "height": 50}, 10 | series=[ 11 | {"name": "Apples", "color": "indigo.6"}, 12 | {"name": "Oranges", "color": "blue.6"}, 13 | {"name": "Tomatoes", "color": "teal.6"}, 14 | ], 15 | ) 16 | -------------------------------------------------------------------------------- /docs/linechart/line-color-light-dark.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | from .data import data 3 | 4 | component = dmc.LineChart( 5 | h=300, 6 | dataKey="date", 7 | data=data, 8 | series=[{"name": "Apples", "color": "var(--chart-color)"}], 9 | ) 10 | -------------------------------------------------------------------------------- /docs/linechart/linecolor.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | from .data import data 3 | 4 | component = dmc.LineChart( 5 | h=300, 6 | dataKey="date", 7 | data=data, 8 | series=[{"name": "Apples", "color": "orange.7"}], 9 | ) 10 | -------------------------------------------------------------------------------- /docs/linechart/removetooltip.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | from .data import data 3 | 4 | component = dmc.LineChart( 5 | h=300, 6 | dataKey="date", 7 | data=data, 8 | withTooltip=False, 9 | series=[ 10 | {"name": "Apples", "color": "indigo.6"}, 11 | {"name": "Oranges", "color": "blue.6"}, 12 | {"name": "Tomatoes", "color": "teal.6"}, 13 | ], 14 | ) 15 | -------------------------------------------------------------------------------- /docs/linechart/rotatexaxislabels.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | from .data import data 3 | 4 | component = dmc.LineChart( 5 | h=300, 6 | dataKey="date", 7 | data=data, 8 | tickLine="xy", 9 | xAxisProps={"angle": -20}, 10 | series=[ 11 | {"name": "Apples", "color": "indigo.6"}, 12 | {"name": "Oranges", "color": "blue.6"}, 13 | {"name": "Tomatoes", "color": "teal.6"}, 14 | ], 15 | ) 16 | -------------------------------------------------------------------------------- /docs/linechart/serieslabels.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | from .data import data 3 | 4 | component = dmc.LineChart( 5 | h=300, 6 | dataKey="date", 7 | data=data, 8 | withLegend=True, 9 | legendProps={"verticalAlign": "bottom"}, 10 | series=[ 11 | {"name": "Apples", "label": "Apples sales", "color": "indigo.6"}, 12 | {"name": "Oranges", "label": "Oranges sales", "color": "blue.6"}, 13 | {"name": "Tomatoes", "label": "Tomatoes sales", "color": "teal.6"}, 14 | ], 15 | ) 16 | -------------------------------------------------------------------------------- /docs/linechart/strokedasharray.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | from .data import data 3 | 4 | component = dmc.LineChart( 5 | h=300, 6 | dataKey="date", 7 | data=data, 8 | strokeDasharray="15 15", 9 | series=[ 10 | {"name": "Apples", "color": "indigo.6"}, 11 | {"name": "Oranges", "color": "blue.6"}, 12 | {"name": "Tomatoes", "color": "teal.6"}, 13 | ], 14 | ) 15 | -------------------------------------------------------------------------------- /docs/linechart/tooltipanimation.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | from .data import data 3 | 4 | component = dmc.LineChart( 5 | h=300, 6 | dataKey="date", 7 | data=data, 8 | tooltipAnimationDuration=200, 9 | series=[ 10 | {"name": "Apples", "color": "indigo.6"}, 11 | {"name": "Oranges", "color": "blue.6"}, 12 | {"name": "Tomatoes", "color": "teal.6"}, 13 | ], 14 | ) 15 | -------------------------------------------------------------------------------- /docs/linechart/units.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | from .data import data 3 | 4 | component = dmc.LineChart( 5 | h=300, 6 | dataKey="date", 7 | data=data, 8 | unit="$", 9 | series=[ 10 | {"name": "Apples", "color": "indigo.6"}, 11 | {"name": "Oranges", "color": "blue.6"}, 12 | {"name": "Tomatoes", "color": "teal.6"}, 13 | ], 14 | ) 15 | -------------------------------------------------------------------------------- /docs/linechart/valueformatter.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | from .data import data 3 | 4 | component = dmc.LineChart( 5 | h=300, 6 | dataKey="date", 7 | data=data, 8 | valueFormatter={"function": "formatNumberIntl"}, 9 | series=[ 10 | {"name": "Apples", "color": "indigo.6"}, 11 | {"name": "Oranges", "color": "blue.6"}, 12 | {"name": "Tomatoes", "color": "teal.6"}, 13 | ], 14 | ) 15 | -------------------------------------------------------------------------------- /docs/linechart/vertical.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | from .data import data 3 | 4 | component = dmc.LineChart( 5 | h=300, 6 | dataKey="date", 7 | data=data, 8 | orientation="vertical", 9 | series=[ 10 | {"name": "Apples", "color": "indigo.6"}, 11 | {"name": "Oranges", "color": "blue.6"}, 12 | {"name": "Tomatoes", "color": "teal.6"}, 13 | ], 14 | ) 15 | -------------------------------------------------------------------------------- /docs/linechart/xaxisoffset.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | from .data import data 3 | 4 | component = dmc.LineChart( 5 | h=300, 6 | dataKey="date", 7 | data=data, 8 | xAxisProps={"padding": {"left": 30, "right": 30}}, 9 | series=[ 10 | {"name": "Apples", "color": "indigo.6"}, 11 | {"name": "Oranges", "color": "blue.6"}, 12 | {"name": "Tomatoes", "color": "teal.6"}, 13 | ], 14 | ) 15 | -------------------------------------------------------------------------------- /docs/linechart/xyaxis.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | from .data import data 3 | 4 | 5 | component = dmc.LineChart( 6 | h=300, 7 | dataKey="date", 8 | data=data, 9 | tickLine="xy", 10 | yAxisProps={"tickMargin": 15, "orientation": "right"}, 11 | xAxisProps={"tickMargin": 15, "orientation": "top"}, 12 | series=[ 13 | {"name": "Apples", "color": "indigo.6"}, 14 | {"name": "Oranges", "color": "blue.6"}, 15 | {"name": "Tomatoes", "color": "teal.6"}, 16 | ], 17 | ) 18 | -------------------------------------------------------------------------------- /docs/loader/interactive.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | from lib.configurator import Configurator 4 | 5 | target = dmc.Loader() 6 | 7 | configurator = Configurator(target, center_component=True) 8 | 9 | configurator.add_colorpicker("color", "red") 10 | configurator.add_slider("size", "md") 11 | configurator.add_segmented_control("type", ["oval", "bars", "dots"], "oval") 12 | 13 | component = configurator.panel 14 | -------------------------------------------------------------------------------- /docs/loader/simple.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | component = dmc.Loader(color="red", size="md", type="oval") 4 | -------------------------------------------------------------------------------- /docs/mantine-api/styles-api.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | component = dmc.Checkbox( 4 | classNames={"root": "dmc-api-demo-root"}, 5 | label="Checkbox button", 6 | w=180 7 | ) -------------------------------------------------------------------------------- /docs/mark/color.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | component = dmc.Text( 4 | ["Highlight ", dmc.Mark("this section", color="cyan"), " of the text."] 5 | ) 6 | -------------------------------------------------------------------------------- /docs/mark/simple.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | component = dmc.Text( 4 | [ 5 | "Thanks for checking out ", 6 | dmc.Mark("Dash Mantine Components."), 7 | " You are awesome!", 8 | ] 9 | ) 10 | -------------------------------------------------------------------------------- /docs/migration/button.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | from dash_iconify import DashIconify 4 | 5 | component = dmc.Button( 6 | "GitHub", 7 | leftSection=DashIconify(icon="radix-icons:github-logo", width=20), 8 | rightSection=dmc.Badge("3", circle=True, color="gray"), 9 | ) 10 | -------------------------------------------------------------------------------- /docs/migration/hidden.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | component = dmc.Group( 4 | [ 5 | dmc.Button("Hidden from sm", hiddenFrom="sm", color="orange"), 6 | dmc.Button("Visible from sm", visibleFrom="sm", color="cyan"), 7 | dmc.Button("Visible from md", visibleFrom="md", color="pink"), 8 | ], 9 | justify="center", 10 | ) 11 | -------------------------------------------------------------------------------- /docs/monthpickerinput/clearable.py: -------------------------------------------------------------------------------- 1 | from datetime import datetime 2 | 3 | import dash_mantine_components as dmc 4 | 5 | component = dmc.MonthPickerInput( 6 | clearable=True, 7 | value=datetime.now(), 8 | label="Pick date (clearable)", 9 | placeholder="Pick Date", 10 | ) 11 | -------------------------------------------------------------------------------- /docs/monthpickerinput/columns.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | component = dmc.MonthPickerInput( 4 | label="Pick date", placeholder="Pick date", numberOfColumns=2 5 | ) 6 | -------------------------------------------------------------------------------- /docs/monthpickerinput/disabled.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | component = dmc.MonthPickerInput( 4 | disabled=True, 5 | valueFormat="YYYY MMM", 6 | type="multiple", 7 | label="Pick month (Disabled)", 8 | placeholder="Pick month", 9 | ) 10 | -------------------------------------------------------------------------------- /docs/monthpickerinput/icon.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | from dash_iconify import DashIconify 3 | 4 | component = dmc.MonthPickerInput( 5 | leftSection=DashIconify(icon="fa:calendar"), 6 | leftSectionPointerEvents="none", 7 | label="Pick date", 8 | placeholder="Pick date", 9 | ) 10 | -------------------------------------------------------------------------------- /docs/monthpickerinput/minmax.py: -------------------------------------------------------------------------------- 1 | from datetime import datetime, timedelta 2 | 3 | import dash_mantine_components as dmc 4 | 5 | component = dmc.MonthPickerInput( 6 | minDate=datetime(2022, 1, 1), 7 | maxDate=datetime(2022, 8, 1), 8 | value=datetime(2022, 1, 1), 9 | placeholder="Date input", 10 | label="Select valid date", 11 | w=250, 12 | ) 13 | -------------------------------------------------------------------------------- /docs/monthpickerinput/modal.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | component = dmc.MonthPickerInput( 4 | dropdownType="modal", 5 | label="Pick date (picker in modal)", 6 | placeholder="Pick date", 7 | ) 8 | -------------------------------------------------------------------------------- /docs/monthpickerinput/multiple.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | component = dmc.MonthPickerInput( 4 | type="multiple", 5 | label="Pick multiple dates", 6 | placeholder="Pick dates", 7 | ) 8 | -------------------------------------------------------------------------------- /docs/monthpickerinput/range.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | component = dmc.MonthPickerInput( 4 | type="range", 5 | label="Pick dates range", 6 | placeholder="Pick dates range", 7 | ) 8 | -------------------------------------------------------------------------------- /docs/monthpickerinput/simple.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | component = dmc.MonthPickerInput( 4 | label="Pick date", 5 | placeholder="Pick date", 6 | ) 7 | -------------------------------------------------------------------------------- /docs/monthpickerinput/valueformat.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | component = dmc.MonthPickerInput( 4 | valueFormat="YYYY MMM", 5 | type="multiple", 6 | label="Pick month (Value Formatter)", 7 | placeholder="Pick month", 8 | ) 9 | -------------------------------------------------------------------------------- /docs/multiselect/check.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | component = dmc.MultiSelect( 4 | label="Control check icon", 5 | placeholder="Select all you like!", 6 | value=["Pandas", "TensorFlow"], 7 | data=["Pandas", "NumPy", "TensorFlow", "PyTorch"], 8 | w=400, 9 | mb=180, 10 | dropdownOpened=True, 11 | checkIconPosition="right", 12 | ) 13 | -------------------------------------------------------------------------------- /docs/multiselect/check_option.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | component = dmc.MultiSelect( 4 | label="Control check icon", 5 | data=["Pandas", "NumPy", "TensorFlow", "PyTorch"], 6 | value=["Pandas", "NumPy"], 7 | checkIconPosition="right", 8 | dropdownOpened=True, 9 | w=200, 10 | pb=150, 11 | id="multi-select-check-icon", 12 | ) 13 | -------------------------------------------------------------------------------- /docs/multiselect/clearable.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | component = dmc.MultiSelect( 4 | label="Select your favorite library", 5 | placeholder="Select all you like!", 6 | value=["Pandas", "TensorFlow"], 7 | data=["Pandas", "NumPy", "TensorFlow", "PyTorch"], 8 | clearable=True, 9 | w=400, 10 | mb=180, 11 | ) 12 | -------------------------------------------------------------------------------- /docs/multiselect/dropdown_animation.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | component = dmc.MultiSelect( 4 | label="Your favorite libraries", 5 | placeholder="Pick values", 6 | data=["Pandas", "NumPy", "TensorFlow", "PyTorch"], 7 | comboboxProps={"transitionProps": {"transition": "pop", "duration": 200}}, 8 | ) 9 | -------------------------------------------------------------------------------- /docs/multiselect/dropdown_offset.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | component = dmc.MultiSelect( 4 | label="Your favorite libraries", 5 | placeholder="Pick values", 6 | data=["Pandas", "NumPy", "TensorFlow", "PyTorch"], 7 | comboboxProps={ 8 | "position": "bottom", 9 | "middlewares": {"flip": False, "shift": False}, 10 | "offset": 0, 11 | }, 12 | ) 13 | -------------------------------------------------------------------------------- /docs/multiselect/dropdown_position.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | component = dmc.MultiSelect( 4 | label="Your favorite libraries", 5 | placeholder="Pick values", 6 | data=["Pandas", "NumPy", "TensorFlow", "PyTorch"], 7 | comboboxProps={"position": "top", "middlewares": {"flip": False, "shift": False}}, 8 | ) 9 | -------------------------------------------------------------------------------- /docs/multiselect/dropdown_shadow.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | component = dmc.MultiSelect( 4 | label="Your favorite libraries", 5 | placeholder="Pick values", 6 | data=["Pandas", "NumPy", "TensorFlow", "PyTorch"], 7 | comboboxProps={"shadow": "md"}, 8 | ) 9 | -------------------------------------------------------------------------------- /docs/multiselect/dropdown_width.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | component = dmc.MultiSelect( 4 | label="Your favorite libraries", 5 | placeholder="Pick values", 6 | data=["Pandas", "NumPy", "TensorFlow", "PyTorch"], 7 | comboboxProps={"position": "bottom-start", "width": 200}, 8 | ) 9 | -------------------------------------------------------------------------------- /docs/multiselect/error.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | from dash import Output, Input, callback 3 | 4 | component = dmc.MultiSelect( 5 | data=["USDINR", "EURUSD", "USDTWD", "USDJPY"], 6 | id="multi-select-error", 7 | value=["USDJPY"], 8 | w=400, 9 | ) 10 | 11 | 12 | @callback(Output("multi-select-error", "error"), Input("multi-select-error", "value")) 13 | def select_value(value): 14 | return "Select at least 2." if len(value) < 2 else "" 15 | -------------------------------------------------------------------------------- /docs/multiselect/hide.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | component = dmc.MultiSelect( 4 | label="Select your favorite libraries", 5 | placeholder="Select all you like!", 6 | hidePickedOptions=True, 7 | value=["Pandas", "TensorFlow"], 8 | data=["Pandas", "NumPy", "TensorFlow", "PyTorch"], 9 | w=400, 10 | mb=140, 11 | dropdownOpened=True, 12 | ) 13 | -------------------------------------------------------------------------------- /docs/multiselect/large_data_sets.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | component = dmc.MultiSelect( 4 | label="100,000 options", 5 | data=[f"Option {i}" for i in range(100000)], 6 | placeholder="use limit to optimize performance", 7 | limit=10, 8 | searchable=True, 9 | w=400, 10 | ) 11 | -------------------------------------------------------------------------------- /docs/multiselect/max-selected.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | component = dmc.MultiSelect( 4 | label="Select your favorite", 5 | description="You can select a maximum of 3 frameworks.", 6 | data=["Pandas", "NumPy", "TensorFlow", "PyTorch"], 7 | maxValues=3, 8 | w=400, 9 | ) 10 | -------------------------------------------------------------------------------- /docs/multiselect/nothing_found.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | component = dmc.MultiSelect( 4 | label="Pick your favorite libraries", 5 | data=["Pandas", "NumPy", "TensorFlow", "PyTorch"], 6 | searchable=True, 7 | nothingFoundMessage="Nothing found...", 8 | w=400, 9 | ) 10 | -------------------------------------------------------------------------------- /docs/multiselect/option_filter.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | component = dmc.MultiSelect( 4 | label="Your country", 5 | placeholder="Pick value", 6 | searchable=True, 7 | data=[ 8 | "Great Britain", 9 | "Canada", 10 | "United States", 11 | ], 12 | filter={"function": "filterCountries"}, 13 | ) 14 | -------------------------------------------------------------------------------- /docs/multiselect/option_sort.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | component = dmc.MultiSelect( 4 | label="Your favorite Python library", 5 | placeholder="Pick value", 6 | searchable=True, 7 | nothingFoundMessage="Nothing found...", 8 | data=[ 9 | "4 – NumPy", 10 | "1 – Pandas", 11 | "3 – Scikit-learn", 12 | "2 – Plotly", 13 | ], 14 | filter={"function": "filterPythonLibs"}, 15 | ) 16 | -------------------------------------------------------------------------------- /docs/multiselect/searchable.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | component = dmc.MultiSelect( 4 | label="Pick your favorite libraries", 5 | data=["Pandas", "NumPy", "TensorFlow", "PyTorch"], 6 | searchable=True, 7 | w=400, 8 | ) 9 | -------------------------------------------------------------------------------- /docs/numberformatter/prefix_suffix.py: -------------------------------------------------------------------------------- 1 | from dash import html 2 | import dash_mantine_components as dmc 3 | 4 | component = html.Div([ 5 | html.Div(["With prefix: ", dmc.NumberFormatter(value=100, prefix="$")]), 6 | html.Div(["With suffix: ", dmc.NumberFormatter(value=100, suffix=" RUB")]), 7 | ]) 8 | -------------------------------------------------------------------------------- /docs/numberformatter/simple.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | component = dmc.NumberFormatter(prefix="$ ", value=1000000, thousandSeparator=True) 4 | -------------------------------------------------------------------------------- /docs/numberinput/clamp.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | component = dmc.NumberInput( 4 | label="You cannot enter number less than 0 or greater than 100", 5 | placeholder="You cannot enter number less than 0 or greater than 100", 6 | clampBehavior="strict", 7 | min=0, 8 | max=100, 9 | w=450, 10 | ) 11 | -------------------------------------------------------------------------------- /docs/numberinput/controls.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | component = dmc.Stack( 4 | [ 5 | dmc.NumberInput(label="By default controls are visible", w=250), 6 | dmc.NumberInput( 7 | label="Hide controls", hideControls=True, w=250 8 | ), 9 | dmc.NumberInput( 10 | label="Disabled and hide controls", 11 | disabled=True, 12 | hideControls=True, 13 | w=250, 14 | ), 15 | ] 16 | ) 17 | -------------------------------------------------------------------------------- /docs/numberinput/decimal_numbers.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | component = dmc.NumberInput( 4 | label="Decimal numbers are not allowed", 5 | placeholder="Do not enter decimal numbers", 6 | allowDecimal=False, 7 | w=250, 8 | ) 9 | -------------------------------------------------------------------------------- /docs/numberinput/decimal_separator.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | component = dmc.NumberInput( 4 | label="Custom decimal separator", 5 | decimalSeparator=",", 6 | value=20.234, 7 | w=250, 8 | ) 9 | -------------------------------------------------------------------------------- /docs/numberinput/disabled.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | component = dmc.NumberInput(disabled=True, label="Disabled input", placeholder="Disabled input", p="lg"), 4 | 5 | -------------------------------------------------------------------------------- /docs/numberinput/fixed_decimal_scale.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | component = dmc.NumberInput( 4 | label="Always show 2 digits after decimal point", 5 | placeholder="Do not enter more than 2", 6 | decimalScale=2, 7 | fixedDecimalScale=True, 8 | value=2.2, 9 | w=250, 10 | ) 11 | -------------------------------------------------------------------------------- /docs/numberinput/hold.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | component = dmc.NumberInput( 4 | label="Step on hold", 5 | description="Step the value when clicking and holding the arrows", 6 | stepHoldDelay=500, 7 | stepHoldInterval=100, 8 | value=0, 9 | w=250, 10 | ) 11 | -------------------------------------------------------------------------------- /docs/numberinput/minmax.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | component = dmc.NumberInput( 4 | label="Enter value between 10 and 20", 5 | min=10, 6 | max=20, 7 | w=250, 8 | ) 9 | -------------------------------------------------------------------------------- /docs/numberinput/negative.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | component = dmc.NumberInput( 4 | label="Negative numbers are not allowed", 5 | placeholder="Do not enter negative numbers", 6 | allowNegative=False, 7 | w=300, 8 | ) 9 | -------------------------------------------------------------------------------- /docs/numberinput/prefix_suffix.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | component = dmc.Stack([ 4 | dmc.NumberInput( 5 | label="With prefix", 6 | placeholder="Dollars", 7 | prefix="$", 8 | value=100, 9 | w=250, 10 | mb="md" 11 | ), 12 | dmc.NumberInput( 13 | label="With suffix", 14 | placeholder="Percent", 15 | suffix="%", 16 | value=100, 17 | w=250, 18 | mt="md" 19 | ), 20 | ]) 21 | 22 | -------------------------------------------------------------------------------- /docs/pagination/boundaries.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | component = dmc.Stack( 4 | [ 5 | dmc.Pagination(total=20, boundaries=1, value=10), 6 | dmc.Pagination(total=20, boundaries=2, value=10, my=15), 7 | dmc.Pagination(total=20, boundaries=3, value=10), 8 | ] 9 | ) 10 | -------------------------------------------------------------------------------- /docs/pagination/siblings.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | component = dmc.Stack( 4 | [ 5 | dmc.Pagination(total=20, siblings=1, value=10), 6 | dmc.Pagination(total=20, siblings=2, value=10, my=15), 7 | dmc.Pagination(total=20, siblings=3, value=10), 8 | ] 9 | ) 10 | -------------------------------------------------------------------------------- /docs/passwordinput/disabled.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | component = dmc.PasswordInput( 4 | label="Password", 5 | placeholder="Your password", 6 | w=200, 7 | disabled=True, 8 | ) 9 | -------------------------------------------------------------------------------- /docs/passwordinput/error.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | 4 | component = dmc.Stack( 5 | [ 6 | dmc.PasswordInput( 7 | label="Your password", 8 | placeholder="Your password", 9 | w=250, 10 | error=True, 11 | ), 12 | dmc.PasswordInput( 13 | label="Your password", 14 | placeholder="Your password", 15 | w=250, 16 | error="Invalid Password", 17 | ), 18 | ], 19 | ) 20 | -------------------------------------------------------------------------------- /docs/passwordinput/icon.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | from dash_iconify import DashIconify 3 | 4 | component = dmc.PasswordInput( 5 | label="Your password:", 6 | w=250, 7 | placeholder="Your password", 8 | leftSection=DashIconify(icon="bi:shield-lock"), 9 | ) 10 | -------------------------------------------------------------------------------- /docs/piechart/angle.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | from .data import data 3 | 4 | component = dmc.PieChart(data=data, startAngle=180, endAngle=0) 5 | -------------------------------------------------------------------------------- /docs/piechart/data.py: -------------------------------------------------------------------------------- 1 | data = [ 2 | {"name": "USA", "value": 400, "color": "indigo.6"}, 3 | {"name": "India", "value": 300, "color": "yellow.6"}, 4 | {"name": "Japan", "value": 100, "color": "teal.6"}, 5 | {"name": "Other", "value": 200, "color": "gray.6"}, 6 | ] 7 | -------------------------------------------------------------------------------- /docs/piechart/enabletooltip.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | from .data import data 3 | 4 | component = dmc.PieChart(data=data, withTooltip=True) 5 | -------------------------------------------------------------------------------- /docs/piechart/segmentcolor.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | data = [ 4 | {"name": "USA", "value": 400, "color": "blue"}, 5 | {"name": "Other", "value": 200, "color": "gray.6"}, 6 | ] 7 | 8 | component = dmc.PieChart(data=data) 9 | -------------------------------------------------------------------------------- /docs/piechart/segmentlabels.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | from lib.configurator import Configurator 3 | from .data import data 4 | 5 | target = dmc.PieChart(data=data, withLabels=True) 6 | 7 | configurator = Configurator(target) 8 | 9 | configurator.add_switch("withLabelsLine", True) 10 | configurator.add_segmented_control("labelsPosition", ["inside", "outside"], "outside") 11 | configurator.add_segmented_control("labelsType", ["value", "percent"], "value") 12 | 13 | component = configurator.panel 14 | -------------------------------------------------------------------------------- /docs/piechart/segmentstroke.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | from lib.configurator import Configurator 3 | from .data import data 4 | 5 | target = dmc.PieChart(data=data, strokeWidth=1) 6 | 7 | configurator = Configurator(target) 8 | configurator.add_number_slider("strokeWidth", 1, min=0, max=2) 9 | 10 | component = configurator.panel 11 | -------------------------------------------------------------------------------- /docs/piechart/size.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | from lib.configurator import Configurator 4 | from .data import data 5 | 6 | target = dmc.PieChart(data=data, size=160) 7 | 8 | configurator = Configurator(target) 9 | configurator.add_number_slider("size", 275, min=80, max=300) 10 | 11 | component = configurator.panel 12 | -------------------------------------------------------------------------------- /docs/piechart/stroke.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | from .data import data 3 | 4 | component = dmc.PieChart(data=data, strokeColor="var(--card-bg)") 5 | -------------------------------------------------------------------------------- /docs/piechart/usage.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | from .data import data 3 | 4 | component = dmc.PieChart(data=data) 5 | -------------------------------------------------------------------------------- /docs/pininput/accessibility.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | component = dmc.Group( 4 | dmc.PinInput(oneTimeCode=True, **{"aria-label": "One Time Code"}), justify="center" 5 | ) 6 | -------------------------------------------------------------------------------- /docs/pininput/disabled.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | component = dmc.Group(dmc.PinInput(disabled=True), justify="center") 4 | -------------------------------------------------------------------------------- /docs/pininput/error.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | component = dmc.Group(dmc.PinInput(error=True), justify="center") 4 | -------------------------------------------------------------------------------- /docs/pininput/length.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | component = dmc.Group(dmc.PinInput(length=8), justify="center") 4 | -------------------------------------------------------------------------------- /docs/pininput/masked.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | component = dmc.Group(dmc.PinInput(mask=True), justify="center") 4 | -------------------------------------------------------------------------------- /docs/pininput/onetime.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | component = dmc.Group(dmc.PinInput(oneTimeCode=True), justify="center") 4 | -------------------------------------------------------------------------------- /docs/pininput/placeholder.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | component = dmc.Group(dmc.PinInput(placeholder="⊡"), justify="center") 4 | -------------------------------------------------------------------------------- /docs/pininput/simple.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | component = dmc.Group(dmc.PinInput(), justify="center") 4 | -------------------------------------------------------------------------------- /docs/pininput/type.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | component = dmc.Group(dmc.PinInput(type="number"), justify="center") 4 | -------------------------------------------------------------------------------- /docs/popover/inline.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | component = dmc.Flex( 4 | [ 5 | "Here is some text with", 6 | dmc.Popover( 7 | [ 8 | dmc.PopoverTarget(dmc.Mark(" an inline popover ")), 9 | dmc.PopoverDropdown(" more info"), 10 | ], 11 | middlewares={"flip": True, "shift": True, "inline": True}, 12 | ), 13 | "and more text after.", 14 | ], 15 | direction="row", 16 | gap="xs", 17 | ) 18 | -------------------------------------------------------------------------------- /docs/popover/overlay.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | component = dmc.Popover( 4 | [ 5 | dmc.PopoverTarget(dmc.Button("Toggle Popover")), 6 | dmc.PopoverDropdown(dmc.Text("This popover is opened on button click")), 7 | ], 8 | width=200, 9 | position="bottom", 10 | withArrow=True, 11 | shadow="md", 12 | withOverlay=True, 13 | overlayProps={"zIndex": 10000, "blur": '8px'}, 14 | zIndex=10001 15 | ) 16 | -------------------------------------------------------------------------------- /docs/popover/same-width.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | component = dmc.Popover( 4 | [ 5 | dmc.PopoverTarget(dmc.Button("Toggle Popover", w=200)), 6 | dmc.PopoverDropdown( 7 | dmc.Text( 8 | "This popover has same width as target, it is useful when you are building input dropdowns" 9 | ) 10 | ), 11 | ], 12 | width="target", 13 | position="bottom", 14 | withArrow=True, 15 | shadow="md", 16 | ) 17 | -------------------------------------------------------------------------------- /docs/popover/simple.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | component = dmc.Popover( 4 | [ 5 | dmc.PopoverTarget(dmc.Button("Toggle Popover")), 6 | dmc.PopoverDropdown(dmc.Text("This popover is opened on button click")), 7 | ], 8 | width=200, 9 | position="bottom", 10 | withArrow=True, 11 | shadow="md", 12 | ) 13 | -------------------------------------------------------------------------------- /docs/progress/sections.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | component = dmc.ProgressRoot( 4 | [ 5 | dmc.ProgressSection(dmc.ProgressLabel("Documents"), value=33, color="cyan"), 6 | dmc.ProgressSection(dmc.ProgressLabel("Photos"), value=28, color="pink"), 7 | dmc.ProgressSection(dmc.ProgressLabel("Others"), value=15, color="orange"), 8 | ], 9 | size="xl", 10 | ) 11 | -------------------------------------------------------------------------------- /docs/progress/simple.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | component = dmc.Progress(value=26, color="pink") 4 | -------------------------------------------------------------------------------- /docs/radiogroup/color.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | data = [ 4 | ["react", "React", "blue"], 5 | ["ng", "Angular", "orange"], 6 | ["svelte", "Svelte", "red"], 7 | ["dash", "Dash", "green"], 8 | ] 9 | 10 | component = dmc.RadioGroup( 11 | children=dmc.Stack([dmc.Radio(l, value=k, color=c) for k, l, c in data]), 12 | value="ng", 13 | size="sm", 14 | ) 15 | -------------------------------------------------------------------------------- /docs/radiogroup/radiocard.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | 4 | component = dmc.RadioCard( 5 | withBorder=True, 6 | p="md", 7 | checked=True, 8 | children=[ 9 | dmc.Center([ 10 | dmc.RadioIndicator(), 11 | dmc.Text("RadioCard", size="xl", pl="sm"), 12 | ], inline=True), 13 | ] 14 | ) 15 | 16 | -------------------------------------------------------------------------------- /docs/radiogroup/radioindicator.py: -------------------------------------------------------------------------------- 1 | 2 | import dash_mantine_components as dmc 3 | 4 | component = dmc.Group([ 5 | dmc.RadioIndicator(), 6 | dmc.RadioIndicator(checked=True), 7 | dmc.RadioIndicator(disabled=True), 8 | dmc.RadioIndicator(disabled=True, checked=True) 9 | ]) 10 | -------------------------------------------------------------------------------- /docs/rating/fractions.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | 4 | component = dmc.Stack( 5 | [ 6 | dmc.Group([dmc.Text("Fractions: 2"), dmc.Rating(fractions=2, value=1)]), 7 | dmc.Group([dmc.Text("Fractions: 3"), dmc.Rating(fractions=3, value=2.3333)]), 8 | dmc.Group([dmc.Text("Fractions: 4"), dmc.Rating(fractions=4, value=3.75)]), 9 | ] 10 | ) 11 | -------------------------------------------------------------------------------- /docs/rating/icons.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | from dash_iconify import DashIconify 3 | 4 | component = dmc.Rating( 5 | value=1, 6 | emptySymbol=DashIconify(icon="tabler:sun"), 7 | fullSymbol=DashIconify(icon="tabler:moon"), 8 | ) 9 | -------------------------------------------------------------------------------- /docs/rating/readonly.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | component = dmc.Group( 4 | children=dmc.Rating(fractions=2, value=3.5, readOnly=True), justify="center" 5 | ) 6 | -------------------------------------------------------------------------------- /docs/responsive-styles/container-queries.py: -------------------------------------------------------------------------------- 1 | from dash import html 2 | import dash_mantine_components as dmc 3 | 4 | component = html.Div( 5 | className="container-query-demo-root", 6 | children=html.Div( 7 | "Resize parent element to see container query in action", 8 | className="container-query-demo-child" 9 | ) 10 | ) 11 | -------------------------------------------------------------------------------- /docs/responsive-styles/mediaqueries.py: -------------------------------------------------------------------------------- 1 | 2 | from dash import html 3 | 4 | component = html.Div("Demo", className="media-query-demo") -------------------------------------------------------------------------------- /docs/responsive-styles/size.py: -------------------------------------------------------------------------------- 1 | from dash import html 2 | import dash_mantine_components as dmc 3 | 4 | # don't do this - It works in that the `size` changes based on screen size, but wont 5 | # work in callbacks. Plus you could have different user inputs showing on different 6 | # screen sizes 7 | component = html.Div([ 8 | dmc.TextInput(size="xs", hiddenFrom="sm", label="My input", placeholder="My input"), 9 | dmc.TextInput(size="xl", visibleFrom="sm", label="My input", placeholder="My input"), 10 | ]) 11 | 12 | -------------------------------------------------------------------------------- /docs/richtexteditor/image.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | content = """ 4 |

This is a basic example of implementing images. Drag to re-order.

5 | 6 | 7 | """ 8 | 9 | component = dmc.RichTextEditor( 10 | html=content, 11 | extensions=[ 12 | "StarterKit", 13 | "Image", 14 | ], 15 | ) 16 | -------------------------------------------------------------------------------- /docs/richtexteditor/placeholder.py: -------------------------------------------------------------------------------- 1 | from dash import html 2 | import dash_mantine_components as dmc 3 | 4 | component = dmc.RichTextEditor( 5 | extensions=[ 6 | "StarterKit", 7 | {"Placeholder": {"placeholder": "Write something..."}}, 8 | ], 9 | ) 10 | -------------------------------------------------------------------------------- /docs/ringprogress/root.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | component = dmc.RingProgress( 4 | sections=[ 5 | {"value": 40, "color": "yellow"}, 6 | ], 7 | rootColor="red", 8 | ) 9 | -------------------------------------------------------------------------------- /docs/ringprogress/tooltip.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | component = dmc.RingProgress( 4 | sections=[ 5 | {"value": 14, "color": "yellow", "label": "Docs", "tooltip": "Docs - 14GB"}, 6 | {"value": 17, "color": "red", "label": "Apps", "tooltip": "Apps - 17GB"}, 7 | {"value": 69, "color": "violet", "label": "Other", "tooltip": "Other - 69GB"}, 8 | ], 9 | ) 10 | -------------------------------------------------------------------------------- /docs/scatterchart/custom-tooltip.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | from .data import data1 3 | 4 | component = dmc.ScatterChart( 5 | h=350, 6 | data=data1, 7 | dataKey={"x": "age", "y": "BMI"}, 8 | xAxisLabel="Age", 9 | yAxisLabel="BMI", 10 | tooltipProps={"content": {"function": "chartTooltip"}} 11 | ) 12 | -------------------------------------------------------------------------------- /docs/scatterchart/customizedots.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | from .data import data1 3 | 4 | component = dmc.ScatterChart( 5 | h=300, 6 | data=data1, 7 | dataKey={"x": "age", "y": "BMI"}, 8 | xAxisLabel="Age", 9 | yAxisLabel="BMI", 10 | ) 11 | -------------------------------------------------------------------------------- /docs/scatterchart/customtooltip.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | from .data import data1 3 | 4 | component = dmc.ScatterChart( 5 | h=300, 6 | data=data1, 7 | dataKey={"x": "age", "y": "BMI"}, 8 | xAxisLabel="Age", 9 | yAxisLabel="BMI", 10 | tooltipProps={"wrapperStyle": {"backgroundColor": "red", "color": "yellow"}}, 11 | ) 12 | -------------------------------------------------------------------------------- /docs/scatterchart/grid-text-color-light-dark.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | from .data import data1 4 | 5 | component = dmc.ScatterChart( 6 | h=300, 7 | data=data1, 8 | dataKey={"x": "age", "y": "BMI"}, 9 | tickLine="xy", 10 | xAxisLabel="Age", 11 | yAxisLabel="BMI", 12 | className="chart-grid-text-colors", 13 | ) 14 | -------------------------------------------------------------------------------- /docs/scatterchart/legend.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | from .data import data2 3 | 4 | component = dmc.ScatterChart( 5 | h=300, 6 | data=data2, 7 | dataKey={"x": "age", "y": "BMI"}, 8 | xAxisLabel="Age", 9 | yAxisLabel="BMI", 10 | withLegend=True, 11 | ) 12 | -------------------------------------------------------------------------------- /docs/scatterchart/legendposition.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | from .data import data2 3 | 4 | component = dmc.ScatterChart( 5 | h=300, 6 | data=data2, 7 | dataKey={"x": "age", "y": "BMI"}, 8 | xAxisLabel="Age", 9 | yAxisLabel="BMI", 10 | withLegend=True, 11 | legendProps={"verticalAlign": "bottom", "height": 20}, 12 | ) 13 | -------------------------------------------------------------------------------- /docs/scatterchart/multipleseries.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | from .data import data2 3 | 4 | component = dmc.ScatterChart( 5 | h=300, 6 | data=data2, 7 | dataKey={"x": "age", "y": "BMI"}, 8 | xAxisLabel="Age", 9 | yAxisLabel="BMI", 10 | ) 11 | -------------------------------------------------------------------------------- /docs/scatterchart/point_labels.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | from .data import data1 3 | 4 | component = dmc.ScatterChart( 5 | h=300, 6 | data=data1, 7 | dataKey={"x": "age", "y": "BMI"}, 8 | tickLine="xy", 9 | xAxisLabel="Age", 10 | yAxisLabel="BMI", 11 | pointLabels="x", 12 | ) 13 | -------------------------------------------------------------------------------- /docs/scatterchart/referencelines.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | from .data import data1 3 | 4 | component = dmc.ScatterChart( 5 | h=300, 6 | data=data1, 7 | dataKey={"x": "age", "y": "BMI"}, 8 | xAxisLabel="Age", 9 | yAxisLabel="BMI", 10 | referenceLines=[ 11 | {"y": 14, "label": "Underweight ↓", "color": "red.7"}, 12 | {"y": 19, "label": "Normal weight", "color": "teal.7"}, 13 | {"y": 30, "label": "Overweight ↑", "color": "red.7"}, 14 | ], 15 | ) 16 | -------------------------------------------------------------------------------- /docs/scatterchart/removetooltip.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | from .data import data1 3 | 4 | component = dmc.ScatterChart( 5 | h=300, 6 | data=data1, 7 | dataKey={"x": "age", "y": "BMI"}, 8 | xAxisLabel="Age", 9 | yAxisLabel="BMI", 10 | withTooltip=False, 11 | ) 12 | -------------------------------------------------------------------------------- /docs/scatterchart/strokedasharray.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | from .data import data1 3 | 4 | component = dmc.ScatterChart( 5 | h=300, 6 | data=data1, 7 | dataKey={"x": "age", "y": "BMI"}, 8 | xAxisLabel="Age", 9 | yAxisLabel="BMI", 10 | strokeDasharray="15, 15", 11 | ) 12 | -------------------------------------------------------------------------------- /docs/scatterchart/tooltipanimation.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | from .data import data1 3 | 4 | component = dmc.ScatterChart( 5 | h=300, 6 | data=data1, 7 | dataKey={"x": "age", "y": "BMI"}, 8 | xAxisLabel="Age", 9 | yAxisLabel="BMI", 10 | tooltipAnimationDuration=200, 11 | ) 12 | -------------------------------------------------------------------------------- /docs/scatterchart/tooltiplabels.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | from .data import data1 3 | 4 | component = dmc.ScatterChart( 5 | h=350, 6 | data=data1, 7 | dataKey={"x": "age", "y": "BMI"}, 8 | xAxisLabel="Age", 9 | yAxisLabel="BMI", 10 | labels={"x": "Age", "y": "Body Mass Index"}, 11 | ) 12 | -------------------------------------------------------------------------------- /docs/scatterchart/usage.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | from .data import data1 3 | 4 | component = dmc.ScatterChart( 5 | h=300, 6 | data=data1, 7 | dataKey={"x": "age", "y": "BMI"}, 8 | xAxisLabel="Age", 9 | yAxisLabel="BMI", 10 | ) 11 | -------------------------------------------------------------------------------- /docs/scatterchart/xyaxis.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | from .data import data1 3 | 4 | component = dmc.ScatterChart( 5 | h=300, 6 | data=data1, 7 | dataKey={"x": "age", "y": "BMI"}, 8 | tickLine="xy", 9 | yAxisProps={"tickMargin": 15, "orientation": "right"}, 10 | xAxisProps={"tickMargin": 15, "orientation": "top"}, 11 | ) 12 | -------------------------------------------------------------------------------- /docs/scrollarea/horizontal.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | from docs.scrollarea.text import text 4 | 5 | component = dmc.Center( 6 | dmc.ScrollArea( 7 | h=250, 8 | w=350, 9 | children=dmc.Paper( 10 | [dmc.Title("Charizard (Pokémon)", order=3), dmc.Text(text)], w=600 11 | ), 12 | ), 13 | ) 14 | -------------------------------------------------------------------------------- /docs/segmentedcontrol/colors.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | from lib.configurator import Configurator 4 | 5 | target = dmc.SegmentedControl( 6 | value="Angular", 7 | data=["React", "Angular", "Svelte", "Vue"], 8 | color="indigo", 9 | ) 10 | 11 | configurator = Configurator(target) 12 | 13 | configurator.add_colorpicker("color", "indigo") 14 | 15 | component = configurator.panel 16 | -------------------------------------------------------------------------------- /docs/segmentedcontrol/full.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | from lib.configurator import Configurator 4 | 5 | 6 | target = dmc.SegmentedControl( 7 | value="Angular", data=["React", "Angular", "Svelte", "Vue"] 8 | ) 9 | 10 | configurator = Configurator(target) 11 | 12 | configurator.add_segmented_control( 13 | "orientation", ["horizontal", "vertical"], "horizontal" 14 | ) 15 | configurator.add_switch("fullWidth", False) 16 | 17 | component = configurator.panel 18 | -------------------------------------------------------------------------------- /docs/segmentedcontrol/radius.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | data = ["Dash", "Mantine", "Bootstrap", "Core"] 4 | 5 | component = dmc.Stack( 6 | [dmc.SegmentedControl(data=data, radius=x) for x in [0, "md", "lg", 20]], 7 | align="flex-start", 8 | ) 9 | -------------------------------------------------------------------------------- /docs/segmentedcontrol/sizes.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | data = ["Dash", "Mantine", "Bootstrap", "Core"] 4 | 5 | component = dmc.Stack( 6 | [dmc.SegmentedControl(data=data, size=x) for x in ["xs", "sm", "md", "lg", "xl"]], 7 | align="flex-start", 8 | ) 9 | -------------------------------------------------------------------------------- /docs/segmentedcontrol/transitions.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | data = ["Dash", "Mantine", "Bootstrap", "Core"] 4 | 5 | component = dmc.Stack( 6 | [ 7 | dmc.Text("No transition"), 8 | dmc.SegmentedControl(data=data, transitionDuration=0), 9 | dmc.Text("500ms linear transition"), 10 | dmc.SegmentedControl( 11 | data=data, transitionDuration=500, transitionTimingFunction="linear" 12 | ), 13 | ], 14 | align="flex-start", 15 | ) 16 | -------------------------------------------------------------------------------- /docs/select/check_option.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | component = dmc.Select( 4 | label="Control check icon", 5 | data=["Pandas", "NumPy", "TensorFlow", "PyTorch"], 6 | value="NumPy", 7 | checkIconPosition="right", 8 | dropdownOpened=True, 9 | w=200, 10 | pb=150, 11 | id="select-check-icon", 12 | ) 13 | -------------------------------------------------------------------------------- /docs/select/clearable.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | component = dmc.Select( 4 | data=["Pandas", "NumPy", "TensorFlow", "PyTorch"], 5 | value="Pandas", 6 | clearable=True, 7 | w=200, 8 | ) 9 | -------------------------------------------------------------------------------- /docs/select/dropdown_animation.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | component = dmc.Select( 4 | label="Your favorite library", 5 | placeholder="Pick values", 6 | data=["Pandas", "NumPy", "TensorFlow", "PyTorch"], 7 | comboboxProps={"transitionProps": {"transition": "pop", "duration": 200}}, 8 | ) 9 | -------------------------------------------------------------------------------- /docs/select/dropdown_offset.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | component = dmc.Select( 4 | label="Your favorite library", 5 | placeholder="Pick value", 6 | data=["Pandas", "NumPy", "TensorFlow", "PyTorch"], 7 | comboboxProps={ 8 | "position": "bottom", 9 | "middlewares": {"flip": False, "shift": False}, 10 | "offset": 0, 11 | }, 12 | ) 13 | -------------------------------------------------------------------------------- /docs/select/dropdown_position.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | component = dmc.Select( 4 | label="Your favorite library", 5 | placeholder="Pick value", 6 | data=["Pandas", "NumPy", "TensorFlow", "PyTorch"], 7 | comboboxProps={"position": "top", "middlewares": {"flip": False, "shift": False}}, 8 | ) 9 | -------------------------------------------------------------------------------- /docs/select/dropdown_shadow.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | component = dmc.Select( 4 | label="Your favorite library", 5 | placeholder="Pick value", 6 | data=["Pandas", "NumPy", "TensorFlow", "PyTorch"], 7 | comboboxProps={"shadow": "md"}, 8 | ) 9 | -------------------------------------------------------------------------------- /docs/select/dropdown_width.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | component = dmc.Select( 4 | label="Your favorite library", 5 | placeholder="Pick value", 6 | data=["Pandas", "NumPy", "TensorFlow", "PyTorch"], 7 | comboboxProps={"position": "bottom-start", "width": 200}, 8 | ) 9 | -------------------------------------------------------------------------------- /docs/select/error.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | from dash import Output, Input, callback 3 | 4 | component = dmc.Select( 5 | data=["USDINR", "EURUSD", "USDTWD", "USDJPY"], 6 | id="select-error", 7 | value="USDJPY", 8 | w=200, 9 | ) 10 | 11 | 12 | @callback(Output("select-error", "error"), Input("select-error", "value")) 13 | def select_value(value): 14 | return "JPY is not allowed!" if value == "USDJPY" else "" 15 | -------------------------------------------------------------------------------- /docs/select/large_data_sets.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | component = dmc.Select( 4 | label="100,000 options", 5 | data=[f"Option {i}" for i in range(100000)], 6 | placeholder="use limit to optimize performance", 7 | limit=10, 8 | searchable=True, 9 | w=400, 10 | ) 11 | -------------------------------------------------------------------------------- /docs/select/nothing_found.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | component = dmc.Select( 4 | label="Pick your favorite library", 5 | data=["Pandas", "NumPy", "TensorFlow", "PyTorch"], 6 | searchable=True, 7 | nothingFoundMessage="Nothing found...", 8 | w=400, 9 | ) 10 | -------------------------------------------------------------------------------- /docs/select/option_filter.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | component = dmc.Select( 4 | label="Your country", 5 | placeholder="Pick value", 6 | searchable=True, 7 | data=[ 8 | "Great Britain", 9 | "Canada", 10 | "United States", 11 | ], 12 | filter={"function": "filterCountries"}, 13 | ) 14 | -------------------------------------------------------------------------------- /docs/select/option_sort.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | component = dmc.Select( 4 | label="Your favorite Python library", 5 | placeholder="Pick value", 6 | searchable=True, 7 | nothingFoundMessage="Nothing found...", 8 | data=[ 9 | "4 – NumPy", 10 | "1 – Pandas", 11 | "3 – Scikit-learn", 12 | "2 – Plotly", 13 | ], 14 | filter={"function": "filterPythonLibs"}, 15 | ) 16 | -------------------------------------------------------------------------------- /docs/select/searchable.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | component = dmc.Select( 4 | data=["Pandas", "NumPy", "TensorFlow", "PyTorch"], 5 | searchable=True, 6 | w=200, 7 | ) 8 | -------------------------------------------------------------------------------- /docs/semicircleprogress/empty_segment_color.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | component = dmc.SemiCircleProgress( 4 | value=30, emptySegmentColor="var(--mantine-color-dimmed)" 5 | ) 6 | -------------------------------------------------------------------------------- /docs/semicircleprogress/label_position.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | component = dmc.Stack([ 4 | dmc.SemiCircleProgress( value=30, label="Bottom", mb="xl"), 5 | dmc.SemiCircleProgress(value=30, label="Center", labelPosition="center") 6 | ]) 7 | 8 | -------------------------------------------------------------------------------- /docs/semicircleprogress/simple.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | component = dmc.SemiCircleProgress( 4 | fillDirection="left-to-right", 5 | orientation="up", 6 | filledSegmentColor="blue", 7 | size=200, 8 | thickness=12, 9 | value=40, 10 | label="Label" 11 | ) 12 | -------------------------------------------------------------------------------- /docs/skeleton/simple.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | component = dmc.Box( 4 | [ 5 | dmc.Skeleton(height=50, circle=True, mb="xl"), 6 | dmc.Skeleton(height=8, radius="xl"), 7 | dmc.Skeleton(height=8, my=6), 8 | dmc.Skeleton(height=8, w="70%", radius="xl"), 9 | ], 10 | ) 11 | -------------------------------------------------------------------------------- /docs/slider/inverted.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | component = dmc.Stack( 4 | [ 5 | dmc.Slider(inverted=True, value=80), 6 | dmc.RangeSlider(inverted=True, value=[40, 60], mt="xl"), 7 | ] 8 | ) 9 | -------------------------------------------------------------------------------- /docs/slider/minrange.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | component = dmc.RangeSlider( 4 | minRange=0.2, min=0, max=1, step=0.0005, value=[0.1245, 0.5535] 5 | ) 6 | -------------------------------------------------------------------------------- /docs/slider/step.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | component = dmc.Slider(min=-10, max=10, step=0.5) 4 | -------------------------------------------------------------------------------- /docs/slider/styles.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | component = dmc.Slider( 4 | value=79, 5 | marks=[ 6 | {"value": 20, "label": "20%"}, 7 | {"value": 50, "label": "50%"}, 8 | {"value": 80, "label": "80%"}, 9 | ], 10 | size=2, 11 | classNames={ 12 | "track": "dmc-slider-track", 13 | "mark": "dmc-slider-mark", 14 | "markLabel": "dmc-slider-markLabel", 15 | "thumb": "dmc-slider-thumb", 16 | }, 17 | ) 18 | -------------------------------------------------------------------------------- /docs/slider/thumbsize.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | component = dmc.Stack( 4 | [ 5 | dmc.Text("Standard size", size="sm"), 6 | dmc.Slider(value=40, label=None), 7 | dmc.Text("Thumb size number", size="sm", mt="xl"), 8 | dmc.Slider(value=40, thumbSize=50), 9 | ] 10 | ) 11 | -------------------------------------------------------------------------------- /docs/space/simple.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | from dash import html 3 | 4 | component = html.Div( 5 | [ 6 | dmc.Group([dmc.Badge("Badge 1"), dmc.Badge("Badge 2")]), 7 | dmc.Space(h="xl"), 8 | dmc.Group([dmc.Badge("Badge 1"), dmc.Space(w="lg"), dmc.Badge("Badge 2")]), 9 | dmc.Space(h=30), 10 | dmc.Group([dmc.Badge("Badge 1"), dmc.Space(w=45), dmc.Badge("Badge 2")]), 11 | ] 12 | ) 13 | -------------------------------------------------------------------------------- /docs/sparkline/areacolor-light-dark.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | component = dmc.Sparkline(w=200, h=60, data=[10, 20, 40, 20, 40, 10, 50], className="chart-color") -------------------------------------------------------------------------------- /docs/stack/simple.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | component = dmc.Stack( 4 | [ 5 | dmc.Button("1", variant="outline"), 6 | dmc.Button("2", variant="outline"), 7 | dmc.Button("3", variant="outline"), 8 | ], 9 | align="center", 10 | gap="xl", 11 | ) 12 | -------------------------------------------------------------------------------- /docs/stepper/size.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | from lib.configurator import Configurator 4 | 5 | target = dmc.Stepper( 6 | active=1, 7 | children=[ 8 | dmc.StepperStep(label="First step", description="Create an account"), 9 | dmc.StepperStep(label="Second step", description="Verify email"), 10 | ], 11 | ) 12 | 13 | configurator = Configurator(target) 14 | 15 | configurator.add_number_input("iconSize", 42) 16 | 17 | component = configurator.panel 18 | -------------------------------------------------------------------------------- /docs/stepper/vertical.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | component = dmc.Stepper( 4 | active=1, 5 | orientation="vertical", 6 | children=[ 7 | dmc.StepperStep(label="First step", description="Create an account"), 8 | dmc.StepperStep(label="Second step", description="Verify email"), 9 | dmc.StepperStep(label="Final step", description="Get full access"), 10 | ], 11 | ) 12 | -------------------------------------------------------------------------------- /docs/style-props/responsive.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | component = dmc.Box( 4 | "Box with responsive style props", 5 | w={"base": 200, "sm": 400, "lg": 500}, 6 | py={"base": "xs", "sm": "md", "lg": "xl"}, 7 | bg={"base": "blue.7", "sm": "red.7", "lg": "green.7"}, 8 | c="#fff", 9 | ta="center", 10 | mx="auto", 11 | ) 12 | -------------------------------------------------------------------------------- /docs/styles-api/badge.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | component = dmc.Badge( 4 | "Badge 1", 5 | variant="dot", 6 | styles={ 7 | "root": {"borderWidth": 1, "height": 30, "padding": 10}, 8 | "inner": {"fontWeight": 500}, 9 | }, 10 | ) 11 | -------------------------------------------------------------------------------- /docs/styles-api/button.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | from dash_iconify import DashIconify 3 | 4 | component = dmc.Button( 5 | "Settings", 6 | leftSection=DashIconify(icon="ic:baseline-settings-input-composite"), 7 | styles={"root": {"fontWeight": 400}, "section": {"width": 100}}, 8 | ) 9 | -------------------------------------------------------------------------------- /docs/styles-api/data-attributes.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | from dash import html 3 | 4 | component = dmc.Group( 5 | [ 6 | dmc.Button("Default Button"), 7 | dmc.Button("Disabled Button", disabled=True, className="dmc-data-attributes-demo"), 8 | dmc.Button("Loading Button", loading=True, className="dmc-data-attributes-demo"), 9 | dmc.Button("Button with Left Section", leftSection=html.Div("left"), className="dmc-data-attributes-demo"), 10 | ], 11 | gap="sm" 12 | ) 13 | -------------------------------------------------------------------------------- /docs/styles-api/datepickerinput.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | component = dmc.Stack([ 4 | dmc.DatePickerInput( 5 | label="Default Calendar style" 6 | ), 7 | dmc.DatePickerInput( 8 | label="Calendar without red weekend days", 9 | styles={"day": {"color": "var(--mantine-color-text)"}}, 10 | ) 11 | ]) 12 | -------------------------------------------------------------------------------- /docs/styles-api/input.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | component = dmc.TextInput( 4 | label="TextInput with custom styles", 5 | placeholder="TextInput with custom styles", 6 | description="Description below the input", 7 | w=300, 8 | styles={ 9 | "input": {"borderColor": dmc.DEFAULT_THEME["colors"]["violet"][4]}, 10 | "label": { 11 | "color": "blue", 12 | "backgroundColor": dmc.DEFAULT_THEME["colors"]["yellow"][1], 13 | }, 14 | }, 15 | ) 16 | -------------------------------------------------------------------------------- /docs/styles-api/slider.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | component = dmc.Slider( 4 | value=69, 5 | classNames={"bar": "dmc-bar", "thumb": "dmc-thumb"}, 6 | ) 7 | -------------------------------------------------------------------------------- /docs/switch/callback.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | from dash import html, Output, Input, callback 3 | 4 | component = html.Div( 5 | [ 6 | dmc.Switch(id="switch-example", label="Use default settings.", checked=True), 7 | dmc.Space(h=10), 8 | dmc.Text(id="switch-settings"), 9 | ] 10 | ) 11 | 12 | 13 | @callback(Output("switch-settings", "children"), Input("switch-example", "checked")) 14 | def settings(checked): 15 | return f"Using {'default' if checked else 'custom'} settings" 16 | -------------------------------------------------------------------------------- /docs/switch/icons.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | from dash_iconify import DashIconify 3 | 4 | component = dmc.Switch( 5 | offLabel=DashIconify(icon="radix-icons:moon", width=20), 6 | onLabel=DashIconify(icon="radix-icons:sun", width=20), 7 | size="xl", 8 | ) 9 | -------------------------------------------------------------------------------- /docs/switch/label.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | component = dmc.Group( 4 | [ 5 | dmc.Switch(onLabel="ON", offLabel="OFF", radius="xl", size=x) 6 | for x in ["xs", "sm", "md", "lg", "xl"] 7 | ] 8 | ) 9 | -------------------------------------------------------------------------------- /docs/switch/thumb.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | from dash_iconify import DashIconify 3 | 4 | component = dmc.Switch( 5 | thumbIcon=DashIconify( 6 | icon="tabler:walk", width=16, color=dmc.DEFAULT_THEME["colors"]["teal"][5] 7 | ), 8 | size="lg", 9 | color="teal", 10 | checked=True, 11 | ) 12 | -------------------------------------------------------------------------------- /docs/table/data.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | component = dmc.Table( 4 | data={ 5 | "caption": "Some elements from periodic table", 6 | "head": ["Element position", "Atomic mass", "Symbol", "Element name"], 7 | "body": [ 8 | [6, 12.011, "C", "Carbon"], 9 | [7, 14.007, "N", "Nitrogen"], 10 | [39, 88.906, "Y", "Yttrium"], 11 | [56, 137.33, "Ba", "Barium"], 12 | [58, 140.12, "Ce", "Cerium"], 13 | ], 14 | } 15 | ) 16 | -------------------------------------------------------------------------------- /docs/tabs/right.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | component = dmc.Tabs( 4 | [ 5 | dmc.TabsList( 6 | [ 7 | dmc.TabsTab("Gallery", value="gallery"), 8 | dmc.TabsTab("Messages", value="messages"), 9 | dmc.TabsTab("Settings", value="settings", ml="auto"), 10 | ] 11 | ), 12 | ], 13 | value="gallery", 14 | ) 15 | -------------------------------------------------------------------------------- /docs/tagsinput/clearable.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | component = dmc.TagsInput( 4 | label="Press Enter to submit a tag", 5 | value=["React"], 6 | w=400, 7 | clearable=True, 8 | ) 9 | -------------------------------------------------------------------------------- /docs/tagsinput/disabled.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | component = dmc.TagsInput( 4 | label="Disabled", 5 | disabled=True, 6 | value=["First", "Second"], 7 | w=400, 8 | ) 9 | -------------------------------------------------------------------------------- /docs/tagsinput/disabledoptions.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | component = dmc.TagsInput( 4 | label="Enter tags", 5 | placeholder="Some tags are disabled", 6 | data = [ 7 | {"value": "Pandas"}, 8 | {"value": "NumPy"}, 9 | {"value": "TensorFlow", "disabled": True}, 10 | {"value": "PyTorch", "disabled": True}, 11 | ], 12 | w=400, 13 | ) 14 | -------------------------------------------------------------------------------- /docs/tagsinput/dropdown_animation.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | component = dmc.TagsInput( 4 | label="Your favorite library", 5 | placeholder="Pick values", 6 | data=["Pandas", "NumPy", "TensorFlow", "PyTorch"], 7 | comboboxProps={"transitionProps": {"transition": "pop", "duration": 200}}, 8 | ) 9 | -------------------------------------------------------------------------------- /docs/tagsinput/dropdown_offset.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | component = dmc.TagsInput( 4 | label="Your favorite library", 5 | placeholder="Pick value", 6 | data=["Pandas", "NumPy", "TensorFlow", "PyTorch"], 7 | comboboxProps={ 8 | "position": "bottom", 9 | "middlewares": {"flip": False, "shift": False}, 10 | "offset": 0, 11 | }, 12 | ) 13 | -------------------------------------------------------------------------------- /docs/tagsinput/dropdown_position.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | component = dmc.TagsInput( 4 | label="Your favorite library", 5 | placeholder="Pick value", 6 | data=["Pandas", "NumPy", "TensorFlow", "PyTorch"], 7 | comboboxProps={"position": "top", "middlewares": {"flip": False, "shift": False}}, 8 | ) 9 | -------------------------------------------------------------------------------- /docs/tagsinput/dropdown_shadow.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | component = dmc.TagsInput( 4 | label="Your favorite library", 5 | placeholder="Pick value", 6 | data=["Pandas", "NumPy", "TensorFlow", "PyTorch"], 7 | comboboxProps={"shadow": "md"}, 8 | ) 9 | -------------------------------------------------------------------------------- /docs/tagsinput/dropdown_width.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | component = dmc.TagsInput( 4 | label="Your favorite library", 5 | placeholder="Pick value", 6 | data=["Pandas", "NumPy", "TensorFlow", "PyTorch"], 7 | comboboxProps={"position": "bottom-start", "width": 200}, 8 | ) 9 | -------------------------------------------------------------------------------- /docs/tagsinput/duplicates.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | component = dmc.TagsInput( 4 | label="Press Enter to submit a tag", 5 | placeholder="Duplicates are allowed", 6 | allowDuplicates=True, 7 | w=400, 8 | ) 9 | -------------------------------------------------------------------------------- /docs/tagsinput/large_data_sets.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | component = dmc.TagsInput( 4 | label="100,000 options", 5 | data=[f"Option {i}" for i in range(100000)], 6 | placeholder="use limit to optimize performance", 7 | limit=5, 8 | w=400, 9 | ) 10 | -------------------------------------------------------------------------------- /docs/tagsinput/max-selected.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | component = dmc.TagsInput( 4 | label="Select frameworks", 5 | description="You can select a maximum of 3 frameworks.", 6 | maxTags=3, 7 | w=400, 8 | ) 9 | -------------------------------------------------------------------------------- /docs/tagsinput/option_filter.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | component = dmc.TagsInput( 4 | label="What countries have you visited?", 5 | placeholder="Pick value or enter anything", 6 | data=[ 7 | "Great Britain", 8 | "Canada", 9 | "United States", 10 | ], 11 | filter={"function": "filterCountries"}, 12 | ) 13 | -------------------------------------------------------------------------------- /docs/tagsinput/option_sort.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | component = dmc.TagsInput( 4 | label="Your favorite Python library", 5 | placeholder="Pick value or enter anything", 6 | data=[ 7 | "4 – NumPy", 8 | "1 – Pandas", 9 | "3 – Scikit-learn", 10 | "2 – Plotly", 11 | ], 12 | filter={"function": "filterPythonLibs"}, 13 | ) 14 | -------------------------------------------------------------------------------- /docs/tagsinput/readonly.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | component = dmc.TagsInput( 4 | label="Read only", 5 | placeholder="Enter tag", 6 | readOnly=True, 7 | value=["First", "Second"], 8 | w=400, 9 | ) 10 | -------------------------------------------------------------------------------- /docs/tagsinput/split.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | component = dmc.TagsInput( 4 | label="Press Enter to submit a tag", 5 | placeholder="Enter tag", 6 | splitChars=[",", " ", "|"], 7 | w=400, 8 | ) 9 | -------------------------------------------------------------------------------- /docs/tagsinput/suggestions.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | component = dmc.TagsInput( 4 | w=400, 5 | label="Press Enter to submit a tag", 6 | placeholder="Pick tag from list", 7 | data=["React", "Angular", "Svelte"], 8 | ) 9 | -------------------------------------------------------------------------------- /docs/text/dimmed.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | component = dmc.Text("Dimmed text", c="dimmed") 4 | -------------------------------------------------------------------------------- /docs/text/gradient.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | component = dmc.Center( 4 | children=[ 5 | dmc.Text( 6 | "Indigo cyan gradient", 7 | variant="gradient", 8 | gradient={"from": "red", "to": "yellow", "deg": 45}, 9 | style={"fontSize": 40}, 10 | ) 11 | ] 12 | ) 13 | -------------------------------------------------------------------------------- /docs/text/inherit.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | component = dmc.Title( 4 | children = [ 5 | "Title in which you want to ", 6 | dmc.Text("highlight", span=True, c="blue", inherit=True), 7 | " something." 8 | ] 9 | ) -------------------------------------------------------------------------------- /docs/text/span.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | 4 | component = dmc.Box([ 5 | dmc.Text("These two Text components are inline elements ", span=True, bd="1px solid"), 6 | dmc.Text("and only take up as much space as needed", span=True, bd="1px solid"), 7 | 8 | dmc.Divider(my="lg"), 9 | 10 | dmc.Text("These two Text components are block elements", bd="1px solid"), 11 | dmc.Text("and take up the full width of their container.", bd="1px solid") 12 | ]) 13 | 14 | -------------------------------------------------------------------------------- /docs/textarea/error.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | component = dmc.Stack( 4 | children=[ 5 | dmc.Textarea(label="Your message", w=500, error=True), 6 | dmc.Textarea(label="Your message", w=500, error="Message can't be empty!"), 7 | ], 8 | ) 9 | -------------------------------------------------------------------------------- /docs/textarea/inputProps.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | component = dmc.Textarea( 4 | inputProps={"maxLength": 3}, 5 | label="Enter text", 6 | description="Max length of 3 characters", 7 | ) 8 | 9 | -------------------------------------------------------------------------------- /docs/textinput/disabled.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | component = dmc.TextInput(label="Disabled Input", w=200, disabled=True) 4 | -------------------------------------------------------------------------------- /docs/textinput/error.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | component = dmc.Stack( 4 | children=[ 5 | dmc.TextInput(label="Your Email:", w=200, error=True), 6 | dmc.TextInput(label="Your Email:", w=200, error="Enter a valid email"), 7 | ], 8 | ) 9 | -------------------------------------------------------------------------------- /docs/textinput/icon.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | from dash_iconify import DashIconify 3 | 4 | component = dmc.TextInput( 5 | label="Your Email", 6 | w=200, 7 | placeholder="Your Email", 8 | leftSection=DashIconify(icon="ic:round-alternate-email"), 9 | ) 10 | -------------------------------------------------------------------------------- /docs/textinput/right.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | from dash_iconify import DashIconify 3 | 4 | 5 | component = dmc.Stack( 6 | children=[ 7 | dmc.TextInput( 8 | w=200, 9 | placeholder="9876543210", 10 | rightSection=DashIconify(icon="emojione-v1:mobile-phone"), 11 | ), 12 | dmc.TextInput( 13 | w=200, 14 | placeholder="9876543210", 15 | rightSection=dmc.Loader(size="xs"), 16 | ), 17 | ], 18 | ) 19 | -------------------------------------------------------------------------------- /docs/theme-object/default-radius.py: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/snehilvj/dmc-docs/62024ae668615efe989481085e7a875747fa0a06/docs/theme-object/default-radius.py -------------------------------------------------------------------------------- /docs/theme-object/theme.py: -------------------------------------------------------------------------------- 1 | import json 2 | 3 | import dash_mantine_components as dmc 4 | 5 | theme = json.dumps(dmc.DEFAULT_THEME, indent=8) 6 | component = dmc.CodeHighlight(code=theme, language="json") 7 | -------------------------------------------------------------------------------- /docs/timegrid/allowdeselect.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | component = dmc.TimeGrid( 4 | timeRangeData={"startTime": "09:00", "endTime": "12:00", "interval": "01:00"}, 5 | value="11:00", 6 | allowDeselect=True 7 | ) 8 | -------------------------------------------------------------------------------- /docs/timegrid/ampmlabels.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | component = dmc.TimeGrid( 4 | timeRangeData={"startTime": "09:00", "endTime": "22:00", "interval": "01:00"}, 5 | format="12h", 6 | amPmLabels={"am": 'पूर्वाह्न', "pm": 'अपराह्न'} 7 | ) 8 | -------------------------------------------------------------------------------- /docs/timegrid/disabled.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | component = dmc.TimeGrid( 4 | timeRangeData={"startTime": "09:00", "endTime": "22:00", "interval": "01:00"}, 5 | disabled=True 6 | ) 7 | -------------------------------------------------------------------------------- /docs/timegrid/disabletime.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | component = dmc.TimeGrid( 4 | timeRangeData={"startTime": "09:00", "endTime": "11:45", "interval": "00:15"}, 5 | disableTime = ['10:45', '11:00', '11:30'] 6 | ) 7 | -------------------------------------------------------------------------------- /docs/timegrid/error.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | component = dmc.Stack( 4 | children=[ 5 | dmc.TimeInput(label="Enter Time:", w=100, error=True), 6 | dmc.TimeInput( 7 | label="Enter Time:", 8 | w=150, 9 | error="Enter a valid time", 10 | withSeconds=True, 11 | ), 12 | ], 13 | ) 14 | -------------------------------------------------------------------------------- /docs/timegrid/minmax.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | component = dmc.TimeGrid( 4 | timeRangeData={"startTime": "09:00", "endTime": "22:00", "interval": "01:00"}, 5 | minTime="11:00", 6 | maxTime="18:00", 7 | withSeconds=False, 8 | ) 9 | -------------------------------------------------------------------------------- /docs/timeinput/error.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | component = dmc.Stack( 4 | children=[ 5 | dmc.TimeInput(label="Enter Time:", w=100, error=True), 6 | dmc.TimeInput( 7 | label="Enter Time:", 8 | w=150, 9 | error="Enter a valid time", 10 | withSeconds=True, 11 | ), 12 | ], 13 | ) 14 | -------------------------------------------------------------------------------- /docs/timeinput/icon.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | from dash_iconify import DashIconify 3 | 4 | component = dmc.TimeInput(leftSection=DashIconify(icon="bi:clock")) -------------------------------------------------------------------------------- /docs/timeinput/simple.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | import datetime 3 | 4 | component = dmc.Group( 5 | gap=50, 6 | children=[ 7 | dmc.TimeInput(label="What time is it now?"), 8 | dmc.TimeInput( 9 | label="What time is it now?", 10 | withSeconds=True, 11 | value="23:15:45", 12 | ), 13 | ], 14 | ) 15 | -------------------------------------------------------------------------------- /docs/timepicker/ampmlabels.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | component = dmc.TimePicker( 4 | label="Enter a time", 5 | format="12h", 6 | amPmLabels={"am": 'पूर्वाह्न', "pm": 'अपराह्न'} 7 | ) 8 | -------------------------------------------------------------------------------- /docs/timepicker/clearable.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | from dash import callback, Input, Output 3 | 4 | 5 | component = dmc.TimePicker( 6 | label="Enter a time", 7 | withDropdown=True, 8 | withSeconds=True, 9 | clearable=True, 10 | value="12:30:00" 11 | ) 12 | 13 | -------------------------------------------------------------------------------- /docs/timepicker/disabled.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | from dash import callback, Input, Output 3 | 4 | 5 | component = dmc.TimePicker( 6 | label="Enter a time", 7 | disabled=True 8 | ) 9 | 10 | -------------------------------------------------------------------------------- /docs/timepicker/dropdownposition.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | from dash import callback, Input, Output 3 | 4 | 5 | component = dmc.TimePicker( 6 | label="Enter a time", 7 | withDropdown=True, 8 | popoverProps={ 9 | "position": 'top-start', 10 | "middlewares": {"flip": False, "shift": False }, 11 | } 12 | ) 13 | 14 | -------------------------------------------------------------------------------- /docs/timepicker/dropdownwidth.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | from dash import callback, Input, Output 3 | 4 | 5 | component = dmc.TimePicker( 6 | label="Enter a time", 7 | withDropdown=True, 8 | withSeconds=True, 9 | format="12h", 10 | popoverProps={"width": "target"} 11 | ) 12 | 13 | -------------------------------------------------------------------------------- /docs/timepicker/error.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | component = dmc.Stack( 4 | children=[ 5 | dmc.TimePicker(label="Enter Time:", w=100, error=True), 6 | dmc.TimePicker( 7 | label="Enter Time:", 8 | w=150, 9 | error="Enter a valid time", 10 | withSeconds=True, 11 | ), 12 | ], 13 | ) 14 | -------------------------------------------------------------------------------- /docs/timepicker/format.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | from dash import callback, Input, Output 3 | 4 | 5 | component = dmc.Group( 6 | gap=50, 7 | children=[ 8 | dmc.TimePicker(label="Enter a time", format="12h", id="timepicker-12"), 9 | dmc.Text(id="out-timepicker-12") 10 | ], 11 | ) 12 | 13 | @callback( 14 | Output("out-timepicker-12", "children"), 15 | Input("timepicker-12", "value") 16 | ) 17 | def update(value): 18 | return f"You entered: {value}" -------------------------------------------------------------------------------- /docs/timepicker/minmax.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | component = dmc.TimePicker( 4 | label="Enter a time between 10:00 and 18:30", 5 | min="10:00", 6 | max="18:30" 7 | ) 8 | -------------------------------------------------------------------------------- /docs/timepicker/presets.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | from dash import callback, Input, Output 3 | 4 | 5 | component = dmc.TimePicker( 6 | label="Enter a time", 7 | format="12h", 8 | withDropdown=True, 9 | presets=['11:30', '15:45', '18:00', '20:15', '22:30'] 10 | ) 11 | 12 | -------------------------------------------------------------------------------- /docs/timepicker/presetsrange.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | from dash import callback, Input, Output 3 | 4 | 5 | component = dmc.TimePicker( 6 | label="Enter a time", 7 | format="12h", 8 | withDropdown=True, 9 | timeRangePresets={"startTime": "06:00:00", "endTime": "18:00:00", "interval": "01:30:00"} 10 | ) 11 | 12 | -------------------------------------------------------------------------------- /docs/timepicker/readonly.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | from dash import callback, Input, Output 3 | 4 | 5 | component = dmc.TimePicker( 6 | label="Enter a time", 7 | readOnly=True, 8 | value="12:30:00" 9 | ) 10 | 11 | -------------------------------------------------------------------------------- /docs/timepicker/simple.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | from dash import callback, Input, Output 3 | 4 | 5 | component = dmc.Group( 6 | gap=50, 7 | children=[ 8 | dmc.TimePicker(label="Enter a time", id="timepicker-usage"), 9 | dmc.Text(id="out-timepicker") 10 | ], 11 | ) 12 | 13 | @callback( 14 | Output("out-timepicker", "children"), 15 | Input("timepicker-usage", "value") 16 | ) 17 | def update(value): 18 | return f"You entered: {value}" -------------------------------------------------------------------------------- /docs/timepicker/step.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | component = dmc.TimePicker( 4 | label="Enter a time", 5 | withSeconds=True, 6 | withDropdown=True, 7 | hoursStep=1, 8 | minutesStep=5, 9 | secondsStep=10 10 | ) 11 | -------------------------------------------------------------------------------- /docs/timepicker/withdropdown.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | 4 | component = dmc.Group( 5 | gap=50, 6 | mb=60, 7 | children=[ 8 | dmc.TimePicker( 9 | label="Enter time (24h format)", 10 | withSeconds=True, 11 | withDropdown=True 12 | ), 13 | dmc.TimePicker( 14 | label="Enter time (12h format)", 15 | withSeconds=True, 16 | withDropdown=True, 17 | format="12h" 18 | ), 19 | ], 20 | ) 21 | -------------------------------------------------------------------------------- /docs/timepicker/withseconds.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | from dash import callback, Input, Output 3 | 4 | 5 | component = dmc.Group( 6 | gap=50, 7 | children=[ 8 | dmc.TimePicker(label="Enter a time", withSeconds=True, id="timepicker-seconds"), 9 | dmc.Text(id="out-timepicker-seconds") 10 | ], 11 | ) 12 | 13 | @callback( 14 | Output("out-timepicker-seconds", "children"), 15 | Input("timepicker-seconds", "value") 16 | ) 17 | def update(value): 18 | return f"You entered: {value}" -------------------------------------------------------------------------------- /docs/title/simple.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | from dash import html 3 | 4 | component = html.Div( 5 | [ 6 | dmc.Title(f"This is h1 title", order=1), 7 | dmc.Title(f"This is h2 title", order=2), 8 | dmc.Title(f"This is h3 title", order=3), 9 | dmc.Title(f"This is h4 title", order=4), 10 | dmc.Title(f"This is h5 title", order=5), 11 | dmc.Title(f"This is h6 title", order=6), 12 | ] 13 | ) 14 | -------------------------------------------------------------------------------- /docs/tooltip/boxwrapperprops.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | component = dmc.Tooltip( 4 | label="tooltip label", 5 | children=dmc.Textarea( 6 | value="How to set the width of the textarea with a tooltip to 100%", w="100%" 7 | ), 8 | boxWrapperProps={"w": "100%"}, 9 | ) 10 | -------------------------------------------------------------------------------- /docs/tooltip/delay.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | component = dmc.Group( 4 | [ 5 | dmc.Tooltip( 6 | dmc.Button("Delay Open - 500ms", variant="outline"), 7 | label="Opened after 500ms", 8 | openDelay=500, 9 | ), 10 | dmc.Tooltip( 11 | dmc.Button("Delay Close - 500ms", variant="outline"), 12 | label="Closed after 500ms", 13 | closeDelay=500, 14 | ), 15 | ] 16 | ) 17 | -------------------------------------------------------------------------------- /docs/tooltip/inline.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | component = dmc.Text( 4 | [ 5 | "NASA’s ", 6 | dmc.Tooltip( 7 | dmc.Mark("JWST"), 8 | label="James Webb Space Telescope", 9 | boxWrapperProps={"style": {"display": "inline-block"}}, 10 | ), 11 | " is the most powerful space telescope ever built.", 12 | ], 13 | span=True, 14 | ) 15 | -------------------------------------------------------------------------------- /docs/tooltip/multiline.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | component = dmc.Center( 4 | [ 5 | dmc.Tooltip( 6 | multiline=True, 7 | w=220, 8 | withArrow=True, 9 | label="Use this button to save this information in your profile," 10 | " after that you will be able to access it any time and share" 11 | " it via email.", 12 | children=dmc.Button("Multiline Tooltip", variant="outline"), 13 | ) 14 | ] 15 | ) 16 | -------------------------------------------------------------------------------- /docs/tooltip/usage.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | component = dmc.Tooltip( 4 | dmc.Button("Button with tooltip"), 5 | label="Tooltip" 6 | ) -------------------------------------------------------------------------------- /docs/tree/checkboxes.py: -------------------------------------------------------------------------------- 1 | 2 | import json 3 | import dash_mantine_components as dmc 4 | from dash import callback, Input, Output 5 | from .data import data 6 | 7 | component = dmc.Stack([ 8 | dmc.Tree(data=data, checkboxes=True, id="tree-checkboxes" ), 9 | dmc.CodeHighlight(id="checked-nodes", code="", language="json"), 10 | ]) 11 | 12 | 13 | @callback( 14 | Output("checked-nodes", "code"), 15 | Input("tree-checkboxes", "checked") 16 | ) 17 | def update(checked): 18 | return json.dumps( checked, indent=4) 19 | 20 | -------------------------------------------------------------------------------- /docs/tree/expanded-collapsed.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | from dash_iconify import DashIconify 3 | from .data import data 4 | 5 | component = dmc.Tree( 6 | data=data, 7 | expandedIcon=DashIconify(icon="fa6-regular:folder-open"), 8 | collapsedIcon=DashIconify(icon="fa6-solid:folder-plus"), 9 | ) 10 | -------------------------------------------------------------------------------- /docs/tree/expandedicon-custom.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | from dash_iconify import DashIconify 3 | from .data import data 4 | 5 | component = dmc.Tree( 6 | data=data, 7 | expandedIcon=DashIconify(icon="fa6-solid:arrow-down") 8 | ) 9 | -------------------------------------------------------------------------------- /docs/tree/expandedicon-none.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | from .data import data 3 | 4 | component = dmc.Tree(data=data, expandedIcon=None) 5 | -------------------------------------------------------------------------------- /docs/tree/iconside.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | from .data import data 3 | 4 | component = dmc.Tree(data=data, iconSide="right") 5 | -------------------------------------------------------------------------------- /docs/tree/simple.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | from .data import data 3 | 4 | component = dmc.Tree(data=data) 5 | -------------------------------------------------------------------------------- /docs/visuallyhidden/simple.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | from dash_iconify import DashIconify 3 | 4 | 5 | component = dmc.ActionIcon([ 6 | DashIconify(icon="mdi:heart-outline"), 7 | dmc.VisuallyHidden("Like post") 8 | ], variant="outline") 9 | -------------------------------------------------------------------------------- /docs/yearpickerinput/clearable.py: -------------------------------------------------------------------------------- 1 | from datetime import datetime 2 | 3 | import dash_mantine_components as dmc 4 | 5 | component = dmc.YearPickerInput( 6 | clearable=True, 7 | value=datetime.now(), 8 | label="Pick date (clearable)", 9 | placeholder="Pick Date", 10 | ) 11 | -------------------------------------------------------------------------------- /docs/yearpickerinput/columns.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | component = dmc.YearPickerInput( 4 | label="Pick date", placeholder="Pick date", numberOfColumns=2 5 | ) 6 | -------------------------------------------------------------------------------- /docs/yearpickerinput/disabled.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | component = dmc.YearPickerInput( 4 | disabled=True, 5 | valueFormat="YYYY MMM", 6 | type="multiple", 7 | label="Pick month (Disabled)", 8 | placeholder="Pick month", 9 | ) 10 | -------------------------------------------------------------------------------- /docs/yearpickerinput/icon.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | from dash_iconify import DashIconify 3 | 4 | component = dmc.YearPickerInput( 5 | leftSection=DashIconify(icon="fa:calendar"), 6 | leftSectionPointerEvents="none", 7 | label="Pick date", 8 | placeholder="Pick date", 9 | ) 10 | -------------------------------------------------------------------------------- /docs/yearpickerinput/minmax.py: -------------------------------------------------------------------------------- 1 | from datetime import datetime, timedelta 2 | 3 | import dash_mantine_components as dmc 4 | 5 | component = dmc.YearPickerInput( 6 | minDate=datetime(2021, 1, 1), 7 | maxDate=datetime(2028, 1, 1), 8 | value=datetime(2021, 1, 1), 9 | placeholder="Date input", 10 | label="Select valid date", 11 | w=250, 12 | ) 13 | -------------------------------------------------------------------------------- /docs/yearpickerinput/modal.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | component = dmc.YearPickerInput( 4 | dropdownType="modal", 5 | label="Pick date (picker in modal)", 6 | placeholder="Pick date", 7 | ) 8 | -------------------------------------------------------------------------------- /docs/yearpickerinput/multiple.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | component = dmc.YearPickerInput( 4 | type="multiple", 5 | label="Pick multiple dates", 6 | placeholder="Pick dates", 7 | ) 8 | -------------------------------------------------------------------------------- /docs/yearpickerinput/range.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | component = dmc.YearPickerInput( 4 | type="range", 5 | label="Pick dates range", 6 | placeholder="Pick dates range", 7 | ) 8 | -------------------------------------------------------------------------------- /docs/yearpickerinput/simple.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | component = dmc.YearPickerInput( 4 | label="Pick date", 5 | placeholder="Pick date", 6 | ) 7 | -------------------------------------------------------------------------------- /docs/yearpickerinput/valueformat.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | 3 | component = dmc.YearPickerInput( 4 | valueFormat="YY", 5 | type="multiple", 6 | label="Pick month (Value Formatter)", 7 | placeholder="Pick month", 8 | ) 9 | -------------------------------------------------------------------------------- /help_center/aggrid/README.md: -------------------------------------------------------------------------------- 1 | 2 | `app_cell_editors.py` 3 | - how to use dmc components as cell editors in dash-ag-grid 4 | 5 | `conditional_formatting_theme_switch.py` 6 | - styling dash-ag-grid for light and dark mantine themes 7 | - using dmc function `light-dark` to set different colors based on theme 8 | - using mantine css variables to set grid style -------------------------------------------------------------------------------- /help_center/aggrid/requirements.txt: -------------------------------------------------------------------------------- 1 | dash 2 | dash-ag-grid==31.3.0 3 | dash-mantine-components==0.15.1 4 | pandas 5 | dash-iconify -------------------------------------------------------------------------------- /help_center/appshell/requirements.txt: -------------------------------------------------------------------------------- 1 | dash 2 | dash-mantine-components==0.15.1 3 | dash-iconify -------------------------------------------------------------------------------- /help_center/theme/focus_class_name.py: -------------------------------------------------------------------------------- 1 | import dash_mantine_components as dmc 2 | from dash import Dash, _dash_renderer 3 | _dash_renderer._set_react_version("18.2.0") 4 | 5 | app = Dash(external_stylesheets=dmc.styles.ALL) 6 | 7 | 8 | app.layout = dmc.MantineProvider( 9 | dmc.Button("click button to see focus ring", m="lg"), 10 | theme={ 11 | "focusClassName": "focus" 12 | } 13 | ) 14 | 15 | if __name__ == "__main__": 16 | app.run(debug=True) -------------------------------------------------------------------------------- /help_center/theme_switch_figure_templates/img_dark.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/snehilvj/dmc-docs/62024ae668615efe989481085e7a875747fa0a06/help_center/theme_switch_figure_templates/img_dark.png -------------------------------------------------------------------------------- /help_center/theme_switch_figure_templates/img_light.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/snehilvj/dmc-docs/62024ae668615efe989481085e7a875747fa0a06/help_center/theme_switch_figure_templates/img_light.png -------------------------------------------------------------------------------- /help_center/theme_switch_figure_templates/requirements.txt: -------------------------------------------------------------------------------- 1 | dash-mantine-componeents>=0.15.1 2 | pandas 3 | dash 4 | dash-iconify -------------------------------------------------------------------------------- /help_center/theme_switch_figure_templates_custom/README.md: -------------------------------------------------------------------------------- 1 | This app demos: 2 | - Theme switch light/dark 3 | - custom `add_figure_templates` function for mantine_light and mantine_dark Plotly figure templates 4 | - updating figure templates in a callback using Patch 5 | - updating multiple figures using pattern matching callback 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /help_center/theme_switch_figure_templates_custom/img_dark.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/snehilvj/dmc-docs/62024ae668615efe989481085e7a875747fa0a06/help_center/theme_switch_figure_templates_custom/img_dark.png -------------------------------------------------------------------------------- /help_center/theme_switch_figure_templates_custom/img_light.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/snehilvj/dmc-docs/62024ae668615efe989481085e7a875747fa0a06/help_center/theme_switch_figure_templates_custom/img_light.png -------------------------------------------------------------------------------- /help_center/theme_switch_figure_templates_custom/requirements.txt: -------------------------------------------------------------------------------- 1 | dash-mantine-componeents>=0.15.1 2 | pandas 3 | dash 4 | dash-iconify -------------------------------------------------------------------------------- /help_center/theme_switch_figure_templates_simple/README.md: -------------------------------------------------------------------------------- 1 | This app demos: 2 | - Theme switch light/dark 3 | - `add_figure_templates` function for mantine_light and mantine_dark Plotly figure templates 4 | - updating figure templates in a callback using Patch 5 | -------------------------------------------------------------------------------- /help_center/theme_switch_figure_templates_simple/requirements.txt: -------------------------------------------------------------------------------- 1 | dash-mantine-componeents>=0.15.1 2 | pandas 3 | dash 4 | dash-iconify -------------------------------------------------------------------------------- /releasing.md: -------------------------------------------------------------------------------- 1 | Maintainer Notes: 2 | 3 | - Update versions in `migration.md` and `pages/home.py` 4 | - Update dependencies in pyproject.toml and requirements.txt 5 | - run `poetry update ` and push changes to `poetry.lock` 6 | - Changes are deployed automatically. Check logs on Render.com if the [dmc-docs site](https://www.dash-mantine-components.com/) does not update -------------------------------------------------------------------------------- /render/build.sh: -------------------------------------------------------------------------------- 1 | pip install poetry 2 | poetry install --no-root 3 | -------------------------------------------------------------------------------- /render/run.sh: -------------------------------------------------------------------------------- 1 | gunicorn run:server 2 | -------------------------------------------------------------------------------- /requirements.txt: -------------------------------------------------------------------------------- 1 | dash>=2.5.0 2 | dash-iconify>=0.1.0 3 | requests>=2.27.1 4 | python-frontmatter>=1.0.0 5 | dash-mantine-components>=0.15 6 | pydantic>=2.3.0 7 | gunicorn>=21.2.0 8 | git+https://github.com/AnnMarieW/markdown2dash-amw.git#egg=markdown2dash 9 | pandas==2.2.3 --------------------------------------------------------------------------------