tessl/pypi-dash-mantine-components
Plotly Dash Components based on the Mantine React Components Library, providing over 90 high-quality UI components for building dashboards and web applications.
—
Pending
core-layout.mddocs/
Core Layout Components
Essential building blocks for creating layouts including containers, grids, flexbox systems, and the comprehensive AppShell layout system for application structure.
Capabilities
Container and Layout Components
Basic layout containers for organizing content with responsive behavior and consistent spacing.
def Container(
children=None,
size="md", # "xs" | "sm" | "md" | "lg" | "xl" | number
fluid=False, # Full width container
**kwargs
):
"""
Responsive container with max-width constraints.
Parameters:
- children: Child components
- size: Container size or custom width
- fluid: Whether container takes full width
"""
def Box(
children=None,
**kwargs
):
"""
Basic container component with styling props.
Parameters:
- children: Child components
- All style props (p, m, bg, etc.)
"""
def Center(
children=None,
inline=False,
**kwargs
):
"""
Centers content horizontally and vertically.
Parameters:
- children: Child components to center
- inline: Use inline-flex instead of flex
"""
def Paper(
children=None,
shadow="sm", # Shadow size
radius="sm", # Border radius
withBorder=False,
**kwargs
):
"""
Container with background and optional shadow/border.
Parameters:
- children: Child components
- shadow: Shadow intensity
- radius: Border radius
- withBorder: Add border
"""Flexbox Layout System
Flexible layout components using CSS flexbox for responsive designs.
def Flex(
children=None,
direction="row", # "row" | "column" | "row-reverse" | "column-reverse"
wrap="nowrap", # "nowrap" | "wrap" | "wrap-reverse"
justify="flex-start", # Justify content
align="stretch", # Align items
gap="md", # Gap between items
**kwargs
):
"""
Flexbox container component.
Parameters:
- children: Child components
- direction: Flex direction
- wrap: Flex wrap behavior
- justify: Justify content alignment
- align: Align items
- gap: Gap between items
"""
def Stack(
children=None,
spacing="md", # Gap between items
align="stretch", # Align items
justify="flex-start", # Justify content
**kwargs
):
"""
Vertical stack layout (column flexbox).
Parameters:
- children: Child components
- spacing: Gap between items
- align: Horizontal alignment
- justify: Vertical alignment
"""
def Group(
children=None,
spacing="md", # Gap between items
position="left", # "left" | "center" | "right" | "apart"
noWrap=False, # Prevent wrapping
grow=False, # Allow items to grow
**kwargs
):
"""
Horizontal group layout (row flexbox).
Parameters:
- children: Child components
- spacing: Gap between items
- position: Group positioning
- noWrap: Prevent line wrapping
- grow: Allow items to grow
"""Grid System
CSS Grid and responsive grid layouts for complex layouts.
def Grid(
children=None,
columns=12, # Number of columns
spacing="md", # Gap between items
align="stretch", # Align items
justify="flex-start", # Justify content
**kwargs
):
"""
CSS Grid container.
Parameters:
- children: GridCol components
- columns: Total columns in grid
- spacing: Gap between grid items
- align: Vertical alignment
- justify: Horizontal alignment
"""
def GridCol(
children=None,
span="auto", # Column span (1-12 or responsive object)
offset=0, # Column offset
order=0, # Visual order
**kwargs
):
"""
Grid column component.
Parameters:
- children: Child components
- span: Number of columns to span
- offset: Columns to offset
- order: Visual order
"""
def SimpleGrid(
children=None,
cols=1, # Number of columns
spacing="md", # Gap between items
verticalSpacing=None, # Vertical gap
breakpoints=None, # Responsive breakpoints
**kwargs
):
"""
Simple responsive grid layout.
Parameters:
- children: Child components
- cols: Number of columns
- spacing: Gap between items
- verticalSpacing: Vertical gap override
- breakpoints: Responsive column configuration
"""AppShell Layout System
Comprehensive application layout system for creating structured app interfaces.
def AppShell(
children=None,
header=None, # Header configuration
navbar=None, # Navbar configuration
aside=None, # Aside configuration
footer=None, # Footer configuration
padding="md", # Main content padding
**kwargs
):
"""
Application shell container.
Parameters:
- children: Main content (AppShellMain)
- header: Header configuration object
- navbar: Navbar configuration object
- aside: Aside configuration object
- footer: Footer configuration object
- padding: Main content padding
"""
def AppShellHeader(
children=None,
height=60, # Header height
**kwargs
):
"""
Application header component.
Parameters:
- children: Header content
- height: Header height in pixels
"""
def AppShellNavbar(
children=None,
width=300, # Navbar width
**kwargs
):
"""
Application navbar/sidebar component.
Parameters:
- children: Navigation content
- width: Navbar width in pixels
"""
def AppShellAside(
children=None,
width=300, # Aside width
**kwargs
):
"""
Application aside/sidebar component.
Parameters:
- children: Aside content
- width: Aside width in pixels
"""
def AppShellMain(
children=None,
**kwargs
):
"""
Main content area component.
Parameters:
- children: Main page content
"""
def AppShellFooter(
children=None,
height=60, # Footer height
**kwargs
):
"""
Application footer component.
Parameters:
- children: Footer content
- height: Footer height in pixels
"""
def AppShellSection(
children=None,
grow=False, # Take available space
**kwargs
):
"""
Shell section wrapper for grouping content.
Parameters:
- children: Section content
- grow: Whether section should grow to fill space
"""Card System
Card containers for grouping related content with consistent styling.
def Card(
children=None,
shadow="sm", # Shadow intensity
padding="md", # Internal padding
radius="sm", # Border radius
withBorder=False, # Add border
**kwargs
):
"""
Card container component.
Parameters:
- children: Card content and sections
- shadow: Shadow intensity
- padding: Internal padding
- radius: Border radius
- withBorder: Add border
"""
def CardSection(
children=None,
withBorder=False, # Add border
inheritPadding=False, # Inherit card padding
**kwargs
):
"""
Card section for organizing card content.
Parameters:
- children: Section content
- withBorder: Add section border
- inheritPadding: Use card's padding
"""Utility Components
Additional layout utilities for spacing, dividers, and visual organization.
def Space(
w=0, # Width
h="md", # Height
**kwargs
):
"""
Spacing component for adding gaps.
Parameters:
- w: Width of space
- h: Height of space
"""
def Divider(
label=None, # Divider label
labelPosition="left", # "left" | "center" | "right"
orientation="horizontal", # "horizontal" | "vertical"
size="xs", # Line thickness
color="gray", # Line color
**kwargs
):
"""
Visual separator line.
Parameters:
- label: Optional label text
- labelPosition: Label position
- orientation: Line direction
- size: Line thickness
- color: Line color
"""
def AspectRatio(
children=None,
ratio=16/9, # Aspect ratio
**kwargs
):
"""
Maintain aspect ratio container.
Parameters:
- children: Child content
- ratio: Aspect ratio (width/height)
"""Usage Examples
Basic Layout
import dash_mantine_components as dmc
layout = dmc.MantineProvider([
dmc.AppShell([
dmc.AppShellHeader([
dmc.Container([
dmc.Group([
dmc.Text("My App", size="xl", weight=700),
dmc.Button("Login")
], position="apart")
])
], height=60),
dmc.AppShellMain([
dmc.Container([
dmc.Stack([
dmc.Title("Dashboard", order=1),
dmc.SimpleGrid([
dmc.Card([
dmc.Text("Card 1", weight=500),
dmc.Text("Content here")
]),
dmc.Card([
dmc.Text("Card 2", weight=500),
dmc.Text("More content")
])
], cols=2)
])
])
])
])
])Responsive Grid
responsive_grid = dmc.Grid([
dmc.GridCol([
dmc.Paper("Sidebar", p="md")
], span={"base": 12, "md": 3}),
dmc.GridCol([
dmc.Stack([
dmc.Title("Main Content"),
dmc.Text("This is the main content area")
])
], span={"base": 12, "md": 9})
])Install with Tessl CLI
npx tessl i tessl/pypi-dash-mantine-components