Yipit Dash MUI Components

https://yipit-dash-mui-components-docs.yipit.systems
Admin
Yipit Dash MUI Components is a React-based Material-UI component library designed for seamless...
Tokens:61,613
Snippets:167
Trust Score:4.8
Update:1 year ago
Show doc for...
Tokens:
Raw
### Python Dash Example: TableLoading Component

Source: https://yipit-dash-mui-components-docs.yipit.systems/docs/feedback/tableLoading

Demonstrates how to use the `TableLoading` component in a Python Dash application. It shows the basic setup with `YipitMUIProvider` and configuring `columnWidths` and `rowCount` for the placeholder table.

```python
import dash
from dash import html
import yipit_dash_mui_components as dmc

app = dash.Dash(__name__)

dash._dash_renderer._set_react_version('18.2.0')

app.layout = dmc.YipitMUIProvider(
    children=[
        dmc.TableLoading(
            columnWidths=["100px","150px","200px","150px"],
            rowCount=5
)
]
)

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

--------------------------------

### Dash App with YipitMUIProvider and Theme Switcher

Source: https://yipit-dash-mui-components-docs.yipit.systems/docs/theme

Demonstrates integrating YipitMUIProvider in a Dash application for theme management. It includes setting the initial mode, using a ThemeSwitcher component, and persisting theme data via dcc.Store. The example also shows how to dynamically update the theme provider's mode based on user selection.

```python
import dash
from dash import html, dcc, Output, Input
import yipit_dash_mui_components as ymc

dash._dash_renderer._set_react_version('18.2.0')

app = dash.Dash(__name__)

app.layout = html.Div([
    dcc.Store(id="theme-store", data={}),# Store for saving theme data
    dcc.Store(id="mode-store", data="light"),# Store for saving mode data
    ymc.YipitMUIProvider(
        id="theme-provider",
        mode="light",# Default mode
        children=[
            ymc.ThemeSwitcher(id="theme-switcher", mode="light"),# Theme switcher
            ymc.Box(
                sx={
                    "padding":4,
                    "margin":4,
                    "backgroundColor":"primary.main",
                    "color":"primary.contrastText",
                    "borderRadius":2,
                    "textAlign":"center",
                },
                children="Hello, world!"
            ),
        ]
    ),
])

# Callback to save theme data to the theme store
@app.callback(
    Output("theme-store","data"),
    Input("theme-provider","theme")
)
def store_theme(theme):
    return theme

# Callback to save mode to the mode store
@app.callback(
    Output("mode-store","data"),
    Input("theme-switcher","mode")
)
def store_mode(mode):
    return mode

# Callback to update the mode in the theme provider
@app.callback(
    Output("theme-provider","mode"),
    Input("mode-store","data")
)
def update_theme_provider(mode):
    return mode

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

--------------------------------

### Install Yipit Dash MUI Components

Source: https://yipit-dash-mui-components-docs.yipit.systems/docs/intro

Installs the yipit_dash_mui_components package using pip. This command fetches the library and its necessary dependencies, preparing it for use in your Python projects.

```bash
pip install yipit_dash_mui_components
```

--------------------------------

### DataGrid Pivot Example

Source: https://yipit-dash-mui-components-docs.yipit.systems/docs/data-display/DataGrid

An advanced example demonstrating the usage of the DataGrid component with pivoting enabled, including configuration for derived columns and data aggregation.

```Python
import dash
from dash import html
import yipit_dash_mui_components as dmc

app = dash.Dash(__name__)

app.layout = dmc.YipitMUIProvider(
  children=[
    html.Div([
      dmc.DataGrid(
        id="pivot-grid",
        rows=[
          {"id":1,"category":"Electronics","date":"2023-01-15","sales":500},
          {"id":2,"category":"Clothing","date":"2023-01-20","sales":300},
          {"id":3,"category":"Electronics","date":"2023-02-10","sales":700},
          {"id":4,"category":"Clothing","date":"2023-02-25","sales":400},
        ],
        columns=[
          {"field":"category","headerName":"Category","width":150},
          {"field":"date","headerName":"Date","width":150,"type":"date"},
          {"field":"sales","headerName":"Sales","width":150,"type":"number"},
        ],
        pivotActive=True,
        showToolbar=True,
        pivotPanelOpen=True,
        pivotModel={
          "dimensions":[
            {"field":"category","aggregationColumn":"sales"}
          ],
          "aggregation":{
            "sales":"sum"
          }
        },
        pivotDerivedColumnsConfig=[
          {
            "match":{"type":"date"},
            "derivedColumns":[
              {
                "suffix":"_year",
                "headerSuffix":" (Year)",
                "transformation":"date.year"
              },
              {
                "suffix":"_quarter",
                "headerSuffix":" (Quarter)",
                "transformation":"date.quarter"
              }
            ]
          }
        ],
        disablePivoting=False,
        autoHeight=True,
      )
    ])
  ]
)

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

--------------------------------

### Python Dash Example: ChartLoading Component

Source: https://yipit-dash-mui-components-docs.yipit.systems/docs/feedback/chartLoading

Demonstrates how to use the `ChartLoading` component within a Python Dash application. This example shows the basic setup, including importing necessary libraries and rendering the component within the application layout. The `ChartLoading` component itself requires no props and cannot be customized.

```Python
import dash
from dash import html
import yipit_dash_mui_components as dmc

app = dash.Dash(__name__)

dash._dash_renderer._set_react_version('18.2.0')

app.layout = dmc.YipitMUIProvider(
    children=[
        dmc.ChartLoading()
]
)

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

--------------------------------

### Dash Drawer Example: Open and Close

Source: https://yipit-dash-mui-components-docs.yipit.systems/docs/navigation/drawer

This example demonstrates how to use the `dmc.Drawer` component in a Dash application. It shows how to open and close the drawer using buttons and a callback function. Requires `dash` and `yipit_dash_mui_components`.

```python
import dash
from dash import Input, Output
import yipit_dash_mui_components as dmc

app = dash.Dash(__name__)

dash._dash_renderer._set_react_version('18.2.0')

app.layout = dmc.YipitMUIProvider(
  children=[
    dmc.Box(
        sx={"padding":"16px"},
        children=[
            dmc.Button("Open Drawer",id="open-button"),
            dmc.Drawer(
                id="drawer",
                open=False,
                anchor="left",
                children=[
                    dmc.Box(
                        sx={"padding":"16px","width":"340px","display":"flex","flexDirection":"column","alignItems":"center"},
                        children=[
                        dmc.Box("This is the Drawer content", sx={"padding":"16px"}),
                        dmc.Button("Close Drawer",id="close-button"),
]
)
], 
                sx={"backgroundColor":"#f5f5f5"},
),
]
)
]
)

@app.callback(
    Output("drawer","open"),
[Input("open-button","n_clicks"), Input("close-button","n_clicks")],
    prevent_initial_call=True,
)
def toggle_drawer(open_clicks, close_clicks):
    ctx = dash.callback_context
    if not ctx.triggered:
        return False
    button_id = ctx.triggered[0]["prop_id"].split(".")[0]
    return button_id == "open-button"

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

--------------------------------

### Yipit Dash MUI AppBar Usage Example

Source: https://yipit-dash-mui-components-docs.yipit.systems/docs/layout/appbar

Demonstrates how to integrate the Yipit Dash MUI AppBar component into a Dash application. This example shows setting the AppBar's position, title, color, and custom styles.

```python
import dash
from dash import html
import yipit_dash_mui_components as dmc

dash._dash_renderer._set_react_version('18.2.0')

app = dash.Dash(__name__)

app.layout = dmc.YipitMUIProvider(
    children=[
        dmc.AppBar(
            id="appbar",
            position="static",
            showMenuIcon=True,
            title="AppBar Title",
            color="primary",
            sx={'paddingLeft':4,'paddingRight':4}
        )
    ]
)

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

--------------------------------

### Yipit Dash MUI Select: Single and Multi-Select Examples

Source: https://yipit-dash-mui-components-docs.yipit.systems/docs/inputs/select

Demonstrates the Yipit Dash MUI `Select` component for single and multiple option selection in Python Dash. Includes examples for basic usage, multi-select with checkmarks, and a simple callback to update output based on selection.

```Python
import dash
from dash import html
import yipit_dash_mui_components as dmc

dash._dash_renderer._set_react_version('18.2.0')

app = dash.Dash(__name__)

app.layout = dmc.YipitMUIProvider(
    children=[
        html.Div([
            dmc.Select(
                id="select",
                label="Choose an option",
                options=[
                    {"label":"Option 1","value":"option1"},
                    {"label":"Option 2","value":"option2"},
                    {"label":"Option 3","value":"option3"}
                ],
                value="option1"
                # The original text had 'multiple' here without a value, which is likely a typo.
                # Assuming it was intended to be multiple=True for a multi-select.
                # For single select, 'multiple' attribute is not needed.
                # If it was meant to be a single select, the 'value' attribute is sufficient.
                # For demonstration, the first select is treated as single select.
            ),
            html.Div(id="output")
        ]),

        # Multiple Select with Checkmarks
        html.Div([
            dmc.Select(
                id="multi-select",
                label="Select multiple options",
                options=[
                    {"label":"Option 1","value":"option1"},
                    {"label":"Option 2","value":"option2"},
                    {"label":"Option 3","value":"option3"}
                ],
                multiple=True,
                withCheckmarks=True,
                value=["option1","option2"]
            ),
            html.Div(id="output")
        ])
    ]
)

@app.callback(
    dash.Output("output","children"),
    dash.Input("select","value")
)
def update_output(value):
    return f"You selected: {value}"

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

```

--------------------------------

### Python Dash ToggleButton Example

Source: https://yipit-dash-mui-components-docs.yipit.systems/docs/inputs/toggleButton

This example demonstrates the usage of the `ToggleButton` component in a Python Dash application. It includes setting up the Dash app, defining the layout with a `ToggleButton` and an output div, and implementing a callback to update the output based on the `selected` property of the `ToggleButton`.

```Python
import dash
from dash import html, callback, Output, Input
import yipit_dash_mui_components as dmc

dash._dash_renderer._set_react_version('18.2.0')

app = dash.Dash(__name__)

app.layout = dmc.YipitMUIProvider(
  children=[
    html.Div([
      dmc.ToggleButton(
        id="bold-toggle",
        value="bold",
        children="Bold"
      ),
      html.Div(id="toggle-output")
    ])
  ]
)

@callback(
    Output("toggle-output","children"),
    Input("bold-toggle","selected")
)
defupdate_output(selected):
    returnf"Selected: {selected}"

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

--------------------------------

### Basic ButtonGroup Example

Source: https://yipit-dash-mui-components-docs.yipit.systems/docs/inputs/buttonGroup

Demonstrates the fundamental usage of the ButtonGroup component, rendering a simple group of buttons with default configurations. It accepts a list of dmc.Button components as children.

```Python
dmc.ButtonGroup([
    dmc.Button("One",id="basic-btn-1"),
    dmc.Button("Two",id="basic-btn-2"),
    dmc.Button("Three",id="basic-btn-3"),
], ariaLabel="Basic button group")
```

--------------------------------

### Python Dash Example: TransitionWrapper

Source: https://yipit-dash-mui-components-docs.yipit.systems/docs/feedback/TransitionWrapper

Demonstrates how to use the `TransitionWrapper` component in a Python Dash application. It shows how to toggle the visibility of a box element with smooth animations using the `grow` transition. Requires `yipit_dash_mui_components` and `dash` libraries.

```Python
import dash
from dash import Dash, html, Input, Output
import yipit_dash_mui_components as dmc

# Initialize the Dash app
app = Dash(__name__)

dash._dash_renderer._set_react_version('18.2.0')

# Layout of the Dash app
app.layout = dmc.YipitMUIProvider(
    children=[
        dmc.Box([
# Button to toggle visibility
            dmc.Button("Toggle Box",id="toggle-btn", n_clicks=0, sx={"margin-bottom":"20px"}),

# TransitionWrapper to display animated content
    dmc.TransitionWrapper(
id="animated-content",
        children=dmc.Box(
"This is a box!",
id="box",
            sx={
"width":"200px",
"height":"100px",
"backgroundColor":"secondary.light",
"color":"secondary.contrastText",
"textAlign":"center",
"lineHeight":"100px"
}
),
        transition="grow",
        inProp=False,
)
])
]
)

# Callback to toggle the visibility of the box
@app.callback(
    Output("animated-content","inProp"),
    Input("toggle-btn","n_clicks")
)
def toggle_visibility(n_clicks):
# Toggle visibility based on button clicks
return n_clicks % 2 == 1

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

--------------------------------

### DatePicker Date Format Examples

Source: https://yipit-dash-mui-components-docs.yipit.systems/docs/inputs/datepicker

Illustrates the supported format specifiers for the `dateFormat` prop in the DatePicker component, based on standard date formatting patterns.

```text
MM: Month as digits (1-12)
MMM: Month as short name (Jan, Feb, etc.)
MMMM: Month as long name (January, February, etc.)
dd: Day as digits (01-31)
d: Day as digits (1-31)
yyyy: Year as digits (2024)
yy: Year as last two digits (24)
```

--------------------------------

### Basic DatePicker Example

Source: https://yipit-dash-mui-components-docs.yipit.systems/docs/inputs/datepicker

Demonstrates a fundamental dmc.DatePicker component with a label and a pre-set date value. It uses the 'small' size variant.

```python
dmc.DatePicker(
    label="Basic DatePicker",
    value=today.strftime("%Y-%m-%d"),
    size="small",
)
```

--------------------------------

### Python Dash DataGrid Tree Data Example

Source: https://yipit-dash-mui-components-docs.yipit.systems/docs/data-display/DataGrid

This snippet shows a Python Dash application using the `yipit_dash_mui_components.DataGrid` to display hierarchical tree data. It configures the grid with `treeData=True` and defines columns and rows with path information. The example requires `dash` and `yipit_dash_mui_components`.

```Python
import dash
from dash import html
import yipit_dash_mui_components as dmc

app = dash.Dash(__name__)

app.layout = dmc.YipitMUIProvider(
  children=[
    html.Div([
      dmc.DataGrid(
        id="tree-grid",
        rows=[
          {"id":1,"name":"Products","path":["Products"]},
          {"id":2,"name":"Electronics","path":["Products","Electronics"]},
          {"id":3,"name":"Phones","path":["Products","Electronics","Phones"]},
          {"id":4,"name":"Laptops","path":["Products","Electronics","Laptops"]},
          {"id":5,"name":"Clothing","path":["Products","Clothing"]},
          {"id":6,"name":"Shirts","path":["Products","Clothing","Shirts"]},
        ],
        columns=[
          {"field":"name","headerName":"Category","width":200},
        ],
        treeData=True,
        autoHeight=True,
        defaultGroupingExpansionDepth=2,
      )
    ])
  ]
)

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

--------------------------------

### Dynamic Calendar Icon Example

Source: https://yipit-dash-mui-components-docs.yipit.systems/docs/inputs/datepicker

Demonstrates a DatePicker where the calendar icon's visibility can be dynamically controlled, shown here with month/year views and clearable option.

```python
dmc.DatePicker(
    id='dynamic-calendar-icon-picker',
    label="DatePicker",
    views=['year','month'],
    value=None,
    clearable=True,
    hideCalendarIcon=False,
    size="small",
)
```

--------------------------------

### Sparkline Sizing and Layout

Source: https://yipit-dash-mui-components-docs.yipit.systems/docs/charts/sparkline

Explains how the Sparkline component adapts to different container sizes. It shows examples of fixed height and responsiveness within resizable containers using CSS and `sx` props.

```python
import dash
from dash import html
import yipit_dash_mui_components as dmc
import random

app = dash.Dash(__name__)
# dash._dash_renderer._set_react_version("18.2.0")

data_random =[random.randint(0,10)for _ inrange(10)]

app.layout = dmc.YipitMUIProvider(
    children=[
        html.H3("Inside small container (height=15px)"),
        html.Div(
            style={"width":"50px","height":"30px","border":"1px solid lightgray"},
            children=[dmc.Sparkline(id="spark-small", data=data_random, height=15)]
),
        html.P(f"Data: {data_random}"),
        html.Hr(),
        html.H3("Inside a resizable container"),
        html.Div(
            style={"width":"200px","height":"100px","resize":"both","overflow":"auto","border":"1px dashed gray"},
            children=[dmc.Sparkline(id="spark-resizable", data=data_random, height="100%", sx={"padding":"4px"})]
),
        html.P(f"Data: {data_random} (Container is resizable)"),
]
)

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

--------------------------------

### Badge Component Usage

Source: https://yipit-dash-mui-components-docs.yipit.systems/docs/inputs/badge

Demonstrates the Yipit Dash MUI Badge component with badge content and color. Includes a basic Dash app setup with YipitMUIProvider and a simple layout.

```Python
import dash
from dash import html
import yipit_dash_mui_components as dmc

dash._dash_renderer._set_react_version('18.2.0')

app = dash.Dash(__name__)

app.layout = dmc.YipitMUIProvider(
    children=[
        dmc.Box(
            sx={'display':'flex','padding':4},
            children=[
                dmc.Badge(
                    id="badge",
                    badgeContent="4",
                    color="primary",
                    children=[dmc.GroupIcon()]
                ),
                dmc.Box(id="output")
            ]
        )
    ]
)

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

```

--------------------------------

### Python Dash Dialog Example

Source: https://yipit-dash-mui-components-docs.yipit.systems/docs/feedback/Dialog

Demonstrates the usage of the `yipit_dash_mui_components` `Dialog` component in a Python Dash application. It includes setting up the layout with buttons to control the dialog's visibility and a callback function to manage the `open` property.

```Python
import dash
from dash import html, dcc, Output, Input
import yipit_dash_mui_components as dmc

app = dash.Dash(__name__)

dash._dash_renderer._set_react_version('18.2.0')

app.layout = dmc.YipitMUIProvider([
    dmc.Box(
        sx={"padding":4},
        children=[
          dmc.Button("Open Dialog",id="open-button"),
          dmc.Dialog(
id="example-dialog",
open=False,
              title="Example Dialog",
              children=dmc.Typography("This is an example of the Dialog component."),
              actions=dmc.Box([
                  dmc.Button("Close",id="close-button")
])
)
]
)
])

@app.callback(
    Output("example-dialog","open"),
[Input("open-button","n_clicks"), Input("close-button","n_clicks")],
    prevent_initial_call=True
)
def toggle_dialog(open_clicks, close_clicks):
    ctx = dash.callback_context

    if not ctx.triggered:
        return dash.no_update

    button_id = ctx.triggered[0]['prop_id'].split('.')[0]

    if button_id == "open-button":
        return True
    elif button_id == "close-button":
        return False

    return dash.no_update

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

--------------------------------

### Python Dash Example

Source: https://yipit-dash-mui-components-docs.yipit.systems/docs/layout/List

Demonstrates how to use the Yipit Dash MUI List component within a Python Dash application. It showcases nested list items, icons, and a collapsible section with interactive toggling.

```python
import dash
from dash.dependencies import Input, Output, State
import yipit_dash_mui_components as dmc

app = dash.Dash(__name__)

dash._dash_renderer._set_react_version('18.2.0')

app.layout = dmc.YipitMUIProvider([
    dmc.Box([
        dmc.List([
            dmc.ListSubheader("Nested List Items"),
            dmc.ListItemButton([
                dmc.ListItemIcon(dmc.Download()),
                dmc.ListItemText(primary="Downloads")
]),
            dmc.ListItemButton([
                dmc.ListItemIcon(dmc.Info()),
                dmc.ListItemText(primary="Information")
]),
            dmc.ListItemButton([
                dmc.ListItemIcon(dmc.MoreVert()),
                dmc.ListItemText(primary="More Options"),
                dmc.Box(id="expand-icon", sx={"display":"flex","justify-content":"center","align-items":"center"}, children=[dmc.ExpandMore()])
],id="collapse-button", n_clicks=0),
            dmc.Collapse([
                dmc.List(
                    component="div",
                    children=[
                      dmc.ListItemButton([
                          dmc.ListItemIcon(dmc.Download()),
                          dmc.ListItemText(primary="Nested Option 1")
], sx={"pl":"32px"}),
                      dmc.ListItemButton([
                          dmc.ListItemIcon(dmc.Info()),
                          dmc.ListItemText(primary="Nested Option 2")
], sx={"pl":"32px"})
]
)
],id="nested-list", in_=False)
], sx={"width":"100%","maxWidth":360,"bgcolor":"background.paper"})
])
])
])

@app.callback(
[Output("nested-list","in_"),
     Output("expand-icon","children")],
    Input("collapse-button","n_clicks"),
    prevent_initial_call=True
)
def toggle_nested_list(n_clicks):
    is_open = bool(n_clicks % 2)
    if is_open:
        return True, [dmc.ExpandLess()]
    return False, [dmc.ExpandMore()]

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

```

--------------------------------

### Python Dash Button Component Example

Source: https://yipit-dash-mui-components-docs.yipit.systems/docs/inputs/button

Demonstrates using the dmc.Button component in a Python Dash application with callbacks. It shows how to integrate the button for user interaction and update the UI based on clicks. Requires dash and yipit_dash_mui_components.

```python
import dash
from dash import html, Input, Output
import yipit_dash_mui_components as dmc

dash._dash_renderer._set_react_version('18.2.0')
app = dash.Dash(__name__)

app.layout = dmc.YipitMUIProvider(
    children=[
        html.Div([
            dmc.Button(
                "Click Me",
                id="button",
                color="primary",
                variant="contained"
            ),
            html.Div(id="output", style={"marginTop":"20px"})
        ])
    ]
)

@app.callback(
    Output("output","children"),
    Input("button","n_clicks")
)
def update_output(n_clicks):
    if n_clicks:
        return f"Button clicked {n_clicks} times!"
    return "No clicks yet."

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

--------------------------------

### Initialize Dash App with Yipit Components

Source: https://yipit-dash-mui-components-docs.yipit.systems/docs/inputs/seasonSelect

This snippet demonstrates the initial setup for a Python Dash application that utilizes the `yipit_dash_mui_components` library. It includes importing necessary modules and setting the React version for the Dash renderer.

```Python
import dash
from dash import html, Input, Output
import yipit_dash_mui_components as dmc

# Initialize Dash with React 18
dash._dash_renderer._set_react_version("18.2.0")
app = dash.Dash(__name__)
```

--------------------------------

### Create Basic Dash App with Yipit Dash MUI Components

Source: https://yipit-dash-mui-components-docs.yipit.systems/docs/intro

Demonstrates how to create a basic Dash application using the Yipit Dash MUI Components library. It shows importing necessary modules, setting the React version, and structuring the app layout with `YipitMUIProvider` and `Button` components.

```python
import dash
from dash import html
import yipit_dash_mui_components as dmc

dash._dash_renderer._set_react_version('18.2.0')

app = dash.Dash(__name__)

app.layout = dmc.YipitMUIProvider(
    children=[
        html.Div(
            children=[
                dmc.Button(
                    id="example-button",
                    children="Click Me",
                    variant="contained",
                    color="primary"
                )
            ]
        )
    ]
)

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

--------------------------------

### Run the Dash Application

Source: https://yipit-dash-mui-components-docs.yipit.systems/docs/intro

This snippet shows the command to execute the Dash application. Ensure you are in the directory containing 'app.py'. After running, the application will be accessible at http://localhost:8050.

```python
python app.py
```

--------------------------------

### Python Dash Radio Component Example

Source: https://yipit-dash-mui-components-docs.yipit.systems/docs/inputs/radio

This snippet demonstrates how to integrate the Yipit Dash MUI `Radio` component into a Python Dash application. It shows the setup of a `RadioGroup` with multiple options and a callback to update an output based on the selected radio button.

```Python
import dash
from dash import html, callback, Output, Input
import yipit_dash_mui_components as dmc

dash._dash_renderer._set_react_version('18.2.0')

app = dash.Dash(__name__)

app.layout = dmc.YipitMUIProvider(
  children=[
    html.Div([
      dmc.RadioGroup(
        id="radio-group-example",
        label="Select an option",
        value="option1",
        row=True,
        children=[
          dmc.Radio(label="Option 1", value="option1", color="primary"),
          dmc.Radio(label="Option 2", value="option2", color="secondary"),
          dmc.Radio(label="Option 3", value="option3", color="success"),
        ]
      ),
      html.Div(id="output")
    ])
  ]
)

@callback(
    Output("output","children"),
    Input("radio-group-example","value")
)
def update_output(value):
    return f"Selected option: {value}"

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

```

--------------------------------

### Yipit Dash MUI Link Component Example

Source: https://yipit-dash-mui-components-docs.yipit.systems/docs/navigation/link

Demonstrates the usage of the `dmc.Link` component in a Dash application. It shows how to create a navigable link with an external URL, specify the target window, and apply custom styles using the `sx` prop. Requires `dash` and `yipit_dash_mui_components` libraries.

```python
import dash
from dash import html
import yipit_dash_mui_components as dmc

dash._dash_renderer._set_react_version('18.2.0')

app = dash.Dash(__name__)

app.layout = dmc.YipitMUIProvider(
  children=[
    html.Div([
      dmc.Link(
        href="https://example.com",
        children="Example Link",
        target="_blank",
        rel="noopener",
        sx={"color":"blue","textDecoration":"underline"}
)
])
]
)

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

--------------------------------

### RadioGroup with Row Layout Example

Source: https://yipit-dash-mui-components-docs.yipit.systems/docs/inputs/radiogroup

Demonstrates how to use the RadioGroup component to display radio buttons horizontally by setting the `row` prop to `true`. This example uses Python with the dmc library.

```Python
dmc.RadioGroup(
  label="Select an option",
  value="option1",
  row=True,
  children=[
    dmc.Radio(label="Option 1", value="option1"),
    dmc.Radio(label="Option 2", value="option2"),
    dmc.Radio(label="Option 3", value="option3"),
]
)
```

--------------------------------

### TreeViewFilter Callback Example

Source: https://yipit-dash-mui-components-docs.yipit.systems/docs/inputs/treeviewfilter

Illustrates how to use Dash callbacks to react to changes in the TreeViewFilter component. This example shows how to capture the selected category IDs and update another part of the application's UI.

```python
from dash import Input, Output, callback

# Callback to handle selected categories
@callback(
  Output("output-div", "children"),
  Input("category-filter", "selectedIds")
)
def update_output(selected_ids):
  if not selected_ids:
    return "No categories selected"
  return f"Selected categories: {', '.join(selected_ids)}"
```

--------------------------------

### Yipit Dash MUI Container Usage Example (Python)

Source: https://yipit-dash-mui-components-docs.yipit.systems/docs/layout/container

Demonstrates the basic implementation of the Yipit Dash MUI `Container` component within a Dash application. It shows how to import the necessary libraries and structure the layout using `dmc.Container` and `dmc.Box`.

```python
import dash
from dash import html
import yipit_dash_mui_components as dmc

dash._dash_renderer._set_react_version('18.2.0')

app = dash.Dash(__name__)

app.layout = dmc.YipitMUIProvider(
    children=[
        html.Div([
            dmc.Container(
                maxWidth="sm",
                children=[
                    dmc.Box(sx={"width":"100%","height":"100px","backgroundColor":"primary.main"})
]
)
])
]
)

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

```

--------------------------------

### Python Dash TextField Example

Source: https://yipit-dash-mui-components-docs.yipit.systems/docs/inputs/TextField

Demonstrates how to integrate the Yipit Dash MUI TextField component into a Python Dash application. This example shows basic usage with a label, variant, and full-width properties.

```python
import dash
from dash import html
import yipit_dash_mui_components as dmc

dash._dash_renderer._set_react_version('18.2.0')

app = dash.Dash(__name__)

app.layout = dmc.YipitMUIProvider(
  children=[
    html.Div([
      dmc.TextField(
        id="example-textfield",
        label="Example Label",
        variant="outlined",
        fullWidth=True,
        margin="normal"
)
])
]
)

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

--------------------------------

### Yipit Dash MUI Pagination Example

Source: https://yipit-dash-mui-components-docs.yipit.systems/docs/navigation/pagination

Demonstrates how to use the Yipit Dash MUI Pagination component within a Dash application. It includes setting up the pagination component with various properties and a callback to update content based on the selected page.

```python
import dash
from dash import html, Input, Output, State
import yipit_dash_mui_components as dmc

dash._dash_renderer._set_react_version('18.2.0')

app = dash.Dash(__name__)

app.layout = html.Div([
    dmc.Pagination(
        id="pagination",
        count=10,
        color="primary",
        showFirstButton=True,
        showLastButton=True
    ),
    html.Div(id="page-content")
])

@app.callback(
    Output("page-content","children"),
    Input("pagination","page")
)
def update_page(page_number):
    if page_number:
        return f"You are on page {page_number}"
    return "Please select a page"

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

```

--------------------------------

### ToggleButtonGroup: Multi-Selection Example (Python Dash)

Source: https://yipit-dash-mui-components-docs.yipit.systems/docs/inputs/toggleButtonGroup

Demonstrates the default behavior of the ToggleButtonGroup component, which allows for multiple selections. This example shows how to pass an array of values to the 'value' prop and render multiple ToggleButton children.

```python
dmc.ToggleButtonGroup(
  value=["Bold","Italic"],
  children=[
    dmc.ToggleButton(value="Bold", children="Bold"),
    dmc.ToggleButton(value="Italic", children="Italic"),
    dmc.ToggleButton(value="Underline", children="Underline"),
  ]
)
```

--------------------------------

### ToggleButtonGroup: Vertical Orientation Example (Python Dash)

Source: https://yipit-dash-mui-components-docs.yipit.systems/docs/inputs/toggleButtonGroup

Shows how to change the layout of the ToggleButtonGroup to a vertical orientation. This example sets the 'orientation' prop to 'vertical' and also uses 'exclusive' for single selection within the vertical arrangement.

```python
dmc.ToggleButtonGroup(
  orientation="vertical",
  exclusive=True,
  value="Option 1",
  children=[
    dmc.ToggleButton(value="Option 1", children="Option 1"),
    dmc.ToggleButton(value="Option 2", children="Option 2"),
    dmc.ToggleButton(value="Option 3", children="Option 3"),
  ]
)
```

--------------------------------

### Python Dash Accordion Example

Source: https://yipit-dash-mui-components-docs.yipit.systems/docs/data-display/Accordion

Demonstrates how to implement the Accordion component within a Python Dash application using the yipit_dash_mui_components library. It shows creating multiple accordion panels with titles, content, and optional actions, including examples with Typography components.

```Python
import dash
from dash import html
import yipit_dash_mui_components as dmc

dash._dash_renderer._set_react_version('18.2.0')

app = dash.Dash(__name__)

app.layout = dmc.YipitMUIProvider(
  children=[
    dmc.Box(
        sx={"padding":"20px","display":"flex","flexDirection":"column","gap":"20px"},
        children=[
            dmc.Accordion(
id="example-accordion",
        items=[
{
"title":"Panel 1",
"content":"This is the content of panel 1. You can put any text or components here.",
"actions": dmc.Button("Action")
},
{
"title":"Panel 2",
"content":"This is the content of panel 2. The panel expands when clicked."
}
]
),
# Example using Typography components
      dmc.Accordion(
id="typography-accordion",
        items=[
{
"title": dmc.Typography("Section Title", variant="h6"),
"content": dmc.Typography(
"This content uses Typography component for better text styling and consistency. "
"You can customize the appearance using different variants and styles.",
              variant="body1"
),
"actions": dmc.Button("Learn More")
}
]
)
])
]
)

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

--------------------------------

### SplitButton Component Example in Python Dash

Source: https://yipit-dash-mui-components-docs.yipit.systems/docs/inputs/splitButton

Demonstrates the usage of the `SplitButton` component in a Python Dash application. It includes setting up the component with options, defining a default value, and using callbacks to update an output based on the selected action and button clicks. Requires `dash` and `yipit_dash_mui_components`.

```python
import dash
from dash import html, Input, Output
import yipit_dash_mui_components as dmc

dash._dash_renderer._set_react_version('18.2.0')
app = dash.Dash(__name__)

app.layout = dmc.YipitMUIProvider(
    children=[
        html.Div([
            dmc.SplitButton(
                id="split-button",
                options=[
                    {"label":"Button action 1","value":"button-action-1"},
                    {"label":"Button action 2","value":"button-action-2"},
                    {"label":"Button action 3","value":"button-action-3"},
                ],
                value="button-action-1", # default selected value
                color="primary",
                variant="contained"
            ),
            html.Div(id="output", style={"marginTop":"20px"})
        ])
    ]
)

@app.callback(
    Output("output","children"),
    Input("split-button","value"),
    Input("split-button","n_clicks")
)
defupdate_output(selected_action, n_clicks):
    return f"Selected action: {selected_action} (Button clicked {n_clicks} times)"

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

```

--------------------------------

### DateTimePicker Component Integration Example

Source: https://yipit-dash-mui-components-docs.yipit.systems/docs/inputs/datetimepicker

This example demonstrates how to integrate the Yipit Dash MUI DateTimePicker component into a Dash application. It sets up a basic layout with the DateTimePicker and a display area for the selected value, using a callback to update the display when the user makes a selection.

```python
import dash
from dash import html, Input, Output, State
import yipit_dash_mui_components as dmc

dash._dash_renderer._set_react_version('18.2.0')

app = dash.Dash(__name__)

app.layout = html.Div([
    dmc.DateTimePicker(
        id="datetime-picker",
        label="Select date and time",
    ),
    html.Div(id="selected-datetime")
])

@app.callback(
    Output("selected-datetime","children"),
    Input("datetime-picker","value")
)
def display_selected_datetime(selected_datetime):
    if selected_datetime:
        return f"Selected date and time: {selected_datetime}"
    return "No date/time selected"

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

```

--------------------------------

### Define and Apply Custom Theme in Dash

Source: https://yipit-dash-mui-components-docs.yipit.systems/docs/theme

This snippet illustrates how to create a comprehensive custom theme object for your Dash application, specifying light and dark color schemes with primary and chart colors. It then demonstrates passing this custom theme to the YipitMUIProvider component to dynamically style the application.

```python
custom_theme ={
"colorSchemes":{
"light":{
"palette":{
"primary":{
"main":"#1976d2",
"light":"#63a4ff",
"dark":"#004ba0"
},
"chart":{
"color-1":"#ff5722",
"color-2":"#4caf50",
"color-3":"#2196f3"
}
},
},
"dark":{
"palette":{
"primary":{
"main":"#90caf9",
"light":"#e3f2fd",
"dark":"#42a5f5"
},
"chart":{
"color-1":"#ff7043",
"color-2":"#66bb6a",
"color-3":"#29b6f6"
}
}
},
},
}

```

```python
app.layout = ymc.YipitMUIProvider(
id="theme-provider",
    mode="dark",
    theme=custom_theme,
    children=[
        ymc.Box("Custom themed application", sx={"padding":4})
]
)

```

--------------------------------

### Yipit Dash MUI MultiSelect Component Example

Source: https://yipit-dash-mui-components-docs.yipit.systems/docs/inputs/multiSelect

This snippet demonstrates how to use the `MultiSelect` component from the `yipit-dash-mui-components` library within a Dash application. It shows how to configure the component with a label, options, and initial selected values, and includes a callback to display the selected options.

```Python
import dash
from dash import html
import yipit_dash_mui_components as dmc

dash._dash_renderer._set_react_version('18.2.0')

app = dash.Dash(__name__)

app.layout = dmc.YipitMUIProvider(
    children=[
        html.Div([
            dmc.MultiSelect(
                id="multi-select",
                label="Choose options",
                options=[
                    {"value":"option1","label":"Option 1"},
                    {"value":"option2","label":"Option 2"},
                    {"value":"option3","label":"Option 3"},
                ],
                selectedValues=["option1"]
            ),
            html.Div(id="output")
])
]
)

@app.callback(
    dash.Output("output","children"),
    dash.Input("multi-select","selectedValues")
)
defupdate_output(selected_values):
    return f"Selected values: {', '.join(selected_values)}"

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

```

--------------------------------

### TreeViewFilter Usage Example

Source: https://yipit-dash-mui-components-docs.yipit.systems/docs/inputs/treeviewfilter

Demonstrates how to integrate the TreeViewFilter component into a Dash application layout. It includes defining a hierarchical category structure and configuring various component props for appearance and behavior.

```python
import dash
from dash import html
import yipit_dash_mui_components as dmc

app = dash.Dash(__name__)

# Define your category structure
categories = [
  {
    "id": "electronics",
    "name": "Electronics",
    "children": [
      {
        "id": "computers",
        "name": "Computers",
        "children": [
          {"id": "laptops", "name": "Laptops"},
          {"id": "desktops", "name": "Desktops"}
        ]
      },
      {"id": "phones", "name": "Phones"}
    ]
  },
  {
    "id": "books",
    "name": "Books",
    "children": [
      {"id": "fiction", "name": "Fiction"},
      {"id": "nonfiction", "name": "Non-Fiction"}
    ]
  }
]

app.layout = dmc.YipitMUIProvider(
  children=[
    html.Div([
      dmc.TreeViewFilter(
        id="category-filter",
        categories=categories,
        defaultSelectedIds=[],
        selectedIds=["ultrabooks", "gaming_desktops", "headphones"],
        isOpen=False,
        label="Categories",
        placeholder="Select categories...",
        searchPlaceholder="Search categories...",
        applyButtonText="Apply Filters",
        cancelButtonText="Cancel",
        limitTags=1,
        collapseIdenticalPaths=True,
        switchLabel="Show selected only",
        maxTrackingEvents=10,
        chipLabelMaxWidth="50px" # This will truncate long category names in chips
      )
    ])
  ]
)

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

--------------------------------

### Yipit Dash MUI Tooltip Examples

Source: https://yipit-dash-mui-components-docs.yipit.systems/docs/feedback/tooltip

This snippet demonstrates how to use the Yipit Dash MUI Tooltip component in a Python Dash application. It covers creating simple tooltips with text titles and more complex tooltips with custom HTML content and advanced styling via the 'sx' prop. Dependencies include 'dash' and 'yipit_dash_mui_components'.

```python
import dash
from dash import html
import yipit_dash_mui_components as dmc

dash._dash_renderer._set_react_version('18.2.0')

app = dash.Dash(__name__)

# Custom title with styled content
custom_title = html.Div(
[
        html.H4("Custom Tooltip Title", style={
"margin":"0",
"color":"white",
"fontSize":"16px",
"fontWeight":"bold"
}),
        html.P("This is a custom tooltip content with multiple elements.", style={
"margin":"8px 0 0 0",
"fontSize":"14px",
"color":"white"
}),
        html.Span("info", style={
"fontFamily":"Material Icons",
"color":"white",
"fontSize":"16px",
"marginTop":"8px",
"display":"block"
})
],
    style={
"padding":"8px",
"maxWidth":"300px",
"backgroundColor":"red",
}
)

app.layout = dmc.YipitMUIProvider(
  children=[
    # Example 1: Simple tooltip
    html.Div([
      dmc.Tooltip(
        children=dmc.Button("Hover me", variant="contained"),
        title="This is a simple tooltip",
        placement="bottom",
        arrow=True
)
]),
    html.Div([
      # Styled tooltip with custom title
        dmc.Tooltip(
            children=dmc.Button(
"Hover me for basic tooltip",
                variant="contained",
                color="primary"
),
            title=custom_title,
            arrow=True,
            placement="right",
            id="another-tooltip",
            sx={
"tooltip":{
"backgroundColor":"rgba(0, 0, 0, 0.9)",
"borderRadius":"8px",
"padding":"12px",
"boxShadow":"0 4px 6px rgba(0, 0, 0, 0.1)"
},
"arrow":{
"color":"rgba(0, 0, 0, 0.9)"
}
}
),
]),
]
)

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

```
Tokens:
Raw