PyCafe - Dash - Dash v4.0.0rc3 DCC components

app.py
requirements.txt
app.py
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75

import dash_mantine_components as dmc
from dash import Dash, dcc, html
from dash_iconify import DashIconify

app = Dash()

dcc_components = dmc.SimpleGrid(
    cols=4,
    spacing="md",
    verticalSpacing=25,
    style={"alignItems": "flex-start"},
    children=[
        dcc.Input(placeholder="Text input"),
        dcc.Input(
            placeholder="Number input",
            value=30712,
            type="number",
        ),
        dcc.Textarea(
            id='textarea-example',
            value='Textarea content initialized\nwith multiple lines of text',
        ),
        dcc.Dropdown([f"Option {i}" for i in range(100)], value="Option 1", ),
        dcc.DatePickerSingle(placeholder="Pick date"),
        dcc.DatePickerRange(),
        dcc.Dropdown([f"Option {i}" for i in range(100)], value="Option 1", ),
        dcc.Dropdown([f"Option {i}" for i in range(100)], multi=True, value=["Option 0", "Option 1"]),

        dcc.Slider(0, 20, 5, value=10),
        dcc.RangeSlider(0, 100, 5, value=[10, 20]),
        dcc.Checklist(
            ['New York City', 'Montréal', 'San Francisco'],
            ['New York City', 'Montréal']
        ),
        dcc.RadioItems(['New York City', 'Montreal','San Francisco'], 'Montreal'),
    ]
)

tabs = dcc.Tabs([
    dcc.Tab(
        label=html.Div([
            DashIconify(icon='mdi:home', width=20),
            html.Span('Home', style={'marginLeft': '8px'})
        ], style={'display': 'flex', 'alignItems': 'center'}),
        children=[html.Div('Home content')]
    ),
    dcc.Tab(
        label=html.Div([
            DashIconify(icon='mdi:chart-bar', width=20),
            html.Span('Charts', style={'marginLeft': '8px'})
        ], style={'display': 'flex', 'alignItems': 'center'}),
        children=[html.Div('Charts content')]
    ),
    dcc.Tab(
        label=html.Div([
            DashIconify(icon='mdi:cog', width=20),
            html.Span('Settings', style={'marginLeft': '8px'})
        ], style={'display': 'flex', 'alignItems': 'center'}),
        children=[html.Div('Settings content')]
    ),
], style={"marginTop": 48})



app.layout = dmc.MantineProvider(dmc.Container([
    dmc.Title("Dash 4 DCC components with a Mantine Grid layout", order=4, mb="lg"),
    dmc.Card(dcc_components, withBorder=True),
    tabs
], fluid=True), forceColorScheme="light")


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

dash-dcc-V4

Dash v4.0.0rc3 DCC components
