Dash core components are the foundation for building applications, allowing you to create user interfaces and interact with data.
Through the `dash.html` and `dash.dcc` modules, you can easily create user interfaces and interact with data.
> Starting from Dash 2.0, dash_html_components and dash_core_components have been integrated into the main dash package.
>
>
> It is now recommended to import html and dcc directly from dash, rather than using the old dash_html_components and dash_core_components.
* * *
## Overview of Dash Core Components
Dash core components can be divided into two categories: `dash.html` and `dash.dcc`. `dash.html` provides Python wrappers for HTML tags, while `dash.dcc` provides more advanced interactive components such as sliders, dropdown menus, graphs, etc.
### 1. `dash.html` Components
The `dash.html` module provides Python classes corresponding to HTML tags. These classes allow you to write HTML code in a Pythonic way. For example, `dash.html.Div` corresponds to the HTML `
` tag, and `dash.html.H1` corresponds to the `
` tag.
## Example
import dash
import dash.html as html
app = dash.Dash( __name__ )
app.layout= html.Div([
html.H1('Welcome to the Dash World'),
html.P('This is a simple paragraph.'),
html.Div([
html.Span('This is Span 1'),
html.Span('This is Span 2')
])
])
if __name__ =='__main__':
app.run_server(debug=True)
`dash.html` components make writing HTML structures very simple and intuitive.
In the code above, we created a `Div` container containing a title, a paragraph, and two `Span` elements.
!(#)
### 2. `dash.dcc` Components
The `dash.dcc` module provides more advanced interactive components, which are typically used for data visualization and user input. Common `dash.dcc` components include `Graph`, `Dropdown`, `Slider`, etc.
#### Example Code
## Example
import dash
import dash.html as html
import dash.dcc as dcc
app = dash.Dash( __name__ )
app.layout= html.Div([
dcc.Graph(
id='example-graph',
figure={
'data': [
{'x': [1,2,3],'y': [4,1,2],'type': 'bar','name': ''},
{'x': [1,2,3],'y': [2,4,5],'type': 'bar','name': 'GOOGLE'},
],
'layout': {
'title': 'Dash Data Visualization'
}
}
),
dcc.Dropdown(
id='example-dropdown',
options=[
{'label': 'Option 1','value': '1'},
{'label': 'Option 2','value': '2'},
{'label': 'Option 3','value': '3'}
],
value='1'
)
])
if __name__ =='__main__':
app.run_server(debug=True)
In this example, we created a layout containing a bar chart and a dropdown menu. The `dcc.Graph` component is used to display data visualization charts, while the `dcc.Dropdown` component allows users to select options from a dropdown menu.
## Core Component Properties
Each Dash component has properties that are used to control the component's appearance and behavior. For example, the `children` property of `dash.html.Div` is used to specify its child elements, and the `figure` property of `dash.dcc.Graph` is used to specify the chart's data and layout.
### Common Properties
* **children**: Used to specify the child elements of a component. Most components have this property.
* **id**: Used to uniquely identify a component, typically used in callback functions.
* **style**: Used to set the CSS style of a component.
* **className**: Used to specify the CSS class name of a component.
#### Example Code
## Example
import dash
import dash.html as html
app = dash.Dash( __name__ )
app.layout= html.Div(
children=[
html.H1('This is a title', style={'color': 'blue','fontSize': 40}),
html.P('This is a paragraph', className='my-class')
],
style={'backgroundColor': '#f0f0f0'}
)
if __name__ =='__main__':
app.run_server(debug=True)
In the code above, we used the `style` property to set the color and font size of the title, and the `className` property to specify a CSS class name for the paragraph.
!(#)
YouTip