App Layout Opinions

Dash Python
1

Hello all,

I am working on a project and am curious:

What are your most used components?

  • eg (html.Div, dcc.Graph…)

What properties do you use often when designing the layout, not callbacks?

  • eg (id, children, figure, style…)
2

Hi @jinnyzor ,

This is maybe my 5 most frequently used components so far:

  1. html.Div
  2. dcc.Graph
  3. dcc.Input
  4. dcc.Dropdown
  5. html.Label

When designing layout I probably use this properties often:

  1. id
  2. className
  3. figure
  4. style

I rarely use children explicitly, just using square brackets directly.

1 Like
3

Thanks for the feedback!

Have you looked into dmc? You can pass labels directly to inputs, making it one less component and you don’t have to mess with the for attribute.

4

Hi @jinnyzor ,

Never tried before, and this is valuable information.
So I tried immediately :grin:

image
image922×364 15.3 KB

image

This is pretty cool, just one line putting both Label and Input.
Thanks.

2 Likes
5

What are your most used components?

I use dbc a lot to organize the layout, so it also reflects in the most used components:

  1. html.Div
  2. dbc.Row
  3. dbc.Col
  4. html.Button
  5. dcc.Dropdown
  6. dbc.Modal

What properties do you use often when designing the layout, not callbacks?

  1. id
  2. children
  3. className
  4. style
  5. width, justify, align for dbc components
  6. persistence

I like the id and some other properties of the component to be specified first to improve readability, so I always use children explicitly

2 Likes
6

Is there a reason you don’t use the dbc.Button?

And thanks for the feedback!

7

I use a set of buttons with custom CSS styles and I think it seemed easier to customize the html.Button compared to dbc.Button, so I just stick with html.Buttons

1 Like
8

@Emil, @kmhurchla, @AnnMarieW, @AIMPED, @hoatran

What are your thoughts?

9

Hey @jinnyzor, here my most used.

Components

  • html.Div
  • dbc.Row / dbc.Col / dbc.Modal / dbc.Button
  • dcc.Graph / dcc.Dropdown

Properties

  • id
  • children
  • style
  • classname

Lately I’m gravitating towards dmc and html in combination with fontawesome or bootstrap stylesheets.

2 Likes
10

Hi @jinnyzor, here is my most used.
Components

  • html.Div
  • dmc.Grid, dmc.Col (I used dbc.Row and dbc.Col in some cases)
  • dcc.Graph / dcc.Dropdown (dmc.Select)
  • dmc.Button
  • dmc.DatePicker/ dmc. DateRangePicker

Properties

  • id
  • children
  • style
  • classname
2 Likes
11

For me, dash_uploader.Upload() from this package is an important one.

1 Like
12

Hi @jinnyzor, These are my most used components and properties.

Components

  • html.Div
  • dbc.Row and dbc.Col
  • dmc.Button
  • dbc.Card
    (dash_ag_grid.AgGrid and dash_cytoscape.Cytoscape are key components of my proj.)

Properties

  • id
  • children
  • className
  • style
1 Like
13

hi,
I’m a big fan of dmc. My most used components are.

  1. html.Div
  2. dmc.Container
  3. dmc.Stack/dmc.Group
  4. dmc.Button
  5. dcc.Loading
  6. dmc.Select/dmc.MultiSelect

#shamlessplug - I recently developed dash-resizable-panels which I have been using couple of times.

When designing layout, i usually use the attributes

  1. id
  2. children
  3. className
  4. style
  5. m, p, spacing etc for dmc components
2 Likes
14

components:

html.Div 41
dmc.Tab 30
html.Br 29
dmc.Group 23
dmc.Checkbox 21
dmc.MultiSelect 18
dmc.Menu 11
dmc.Button 9

Props:

className 150
id 142
children 125
label 66
radius 61
value 59
color 38
position 24

1 Like