The sample code for this article has been uploaded to my Github Warehouse https://github.com/CNFeffery/DataScienceStudyNotes

1 brief introduction

This is my series of tutorials Python+Dash Fast web application development The sixth issue of , In the last article , We're done. Yeah Dash Discussion on the advanced features of callback interaction in , In the course content that will be released one after another in the future , We will study together Dash Those rich in Ecology Page parts , So that we can create all kinds of powerful interactive web Ability to apply .

And in today's tutorial , I will take you to learn Dash Some basic practical Static components , They can help us build more formal web application .

chart 1

2 Dash The basic static components in

What we call static page parts here , Mainly refers to its own does not have direct interactive function , But rather Present content For the main function , Just like the simple comparison below :

app1.py

import dash
import dash_html_components as html
import dash_bootstrap_components as dbc
import dash_core_components as dcc app = dash.Dash(__name__) app.layout = html.Div(
dbc.Container(
[
html.Br(),
html.H1(' Examples of static components '),
html.Hr(),
html.H2(' This is the secondary title '),
html.H3(' This is a three-level title '),
html.H4(' This is the fourth level title '),
html.P(
[
' This is a ',
html.A(' link ', href='#'),
', And this is a period of ',
html.Strong(' Bold text '),
', This is a text with a superscript and a subscript :',
' test ',
html.Sup(' Superscript '),
', test ',
html.Sub(' Subscript ')
]
), html.Br(),
html.H1(' Examples of interactive components '),
html.Br(),
dcc.Dropdown(
options=[
{'label': ' test 1', 'value': ' test 1'},
{'label': ' test 2', 'value': ' test 2'},
{'label': ' test 3', 'value': ' test 3'},
]),
html.Br(),
dcc.Checklist(
options=[
{'label': ' test 1', 'value': ' test 1'},
{'label': ' test 2', 'value': ' test 2'},
{'label': ' test 3', 'value': ' test 3'},
],
value=[' test 1']
),
html.Br(),
dcc.RangeSlider(
min=0,
max=20,
step=0.5,
value=[5, 15]
)
]
)
) if __name__ == '__main__':
app.run_server(debug=True)

chart 2

You can see , In fact, static components are all kinds of content elements that we usually see when browsing web pages , They are not directly responsible for the callback interaction function , It can only cooperate with other interactive components to achieve interactive functions .

2.1 Dash The basic static components commonly used in engineering

stay Dash Some common basic static components integrated in , In fact, it's about some common html The migration of elements , Corresponding dash_html_components Many classes encapsulated in , Here we only introduce some common :

2.1.1 Common components related to text format

First of all, let's introduce Dash Among many basic static components , Some related to organizing pages or text formats :

  • H1() To H6()

stay dash_html_components in ,H1() To H6() Corresponding to 1 Class to 6 Level title .

  • Br() And Hr()

dash_html_components Medium Br() Means line break , and Hr() It means the horizontal dividing line , This is often used when we layout elements .

  • P()

P() Used to represent a piece of text or content , Typically, as we see in the blog, every paragraph is made up of P() What LABELS Organize , coordination css Medium text-indent Property can be used to set the first line indent .

  • A()

A() Used to represent a clickable link , Its parameters href Used to fill in the address of the corresponding jump , Can also cooperate id, Click to relocate to other elements in the page , Its target Parameter is used to set the jump mode , for example target="_blank" Will jump to open on the new tab , Please refer to (https://www.w3school.com.cn/tags/att_a_target.asp).

  • I()、Code()、U()、Mark()

I() It is mainly used to change the text content of the package into Italics ,Code() Used to express in a paragraph code snippet ,U() Used to underline what is included ,Mark() Is used to highlight dimension text .

The static components described above can be intuitively felt through the following small examples :

app2.py

import dash
import dash_html_components as html
import dash_bootstrap_components as dbc app = dash.Dash(__name__) app.layout = html.Div(
dbc.Container(
[
html.H1(' First level title ', id='demo1'),
html.H2(' Secondary title '),
html.H3(' Three level title '),
html.H4(' The fourth level title '),
html.H5(' Five level titles '),
html.H6(' Six level title '),
html.Br(), # Line break
html.Hr(), # Horizontal split line
html.P(' This is a passage .'*20),
html.P(' This is another piece of text with the first line indented .'*10, style={'text-indent': '3rem'}),
html.A(' Jump to fevrey's Github Warehouse ',
target='_blank',
href='https://github.com/CNFeffery/DataScienceStudyNotes'), # Jump to external links
html.Br(),
html.A(' Jump to level 6 title ', href='#demo2'),
html.P(
[
' There's something in a passage ',
html.I(' Italics '),
', And code snippets ',
html.Code('import dash'),
', There's another paragraph ',
html.U(' Underlined text '),
', a section ',
html.Mark(' Highlight the text '),
', And another paragraph ',
html.Mark(' Highlight text in different colors .', style={'background-color': 'lightblue'})
]
)
] + [html.Br()] * 50 + [html.A(' Back to the top level title ', href='#demo1'),
html.H1(' In page elements jump to sample title ', id='demo2')]
)
) if __name__ == '__main__':
app.run_server(debug=True)

chart 3

2.1.2 Common components related to content organization

Previously, we introduced some common static components related to text format , In practical application, we should not only show the text content , You also need to show pictures 、 Audio 、 Video and other multimedia content , Now let's learn how to Dash More abundant content presentation forms are constructed in :

  • be based on Blockquote() Implement block references

utilize dash_html_components Medium Blockquote(), We can pass in a string directly , Or nesting other elements , So we can construct a block reference , It's like markdown Medium > The content contained in the rendering is like , Refer to the following example :

app3.py

import dash
import dash_html_components as html
import dash_bootstrap_components as dbc app = dash.Dash(__name__) app.layout = html.Div(
dbc.Container(
html.Blockquote(
html.P(' This is a piece of text wrapped by a block reference ' * 10),
style={
'background-color': 'rgba(211, 211, 211, 0.25)',
'text-indent': '3rem'
}
)
)
) if __name__ == "__main__":
app.run_server(debug=True)

chart 4

  • be based on Ol() And Li() Rendering has a sequence table

utilize Ol() Nesting multiple Li(), You can automatically render an ordered list with serial numbers , Like this simple example :

app4.py

import dash
import dash_html_components as html
import dash_bootstrap_components as dbc app = dash.Dash(__name__) app.layout = html.Div(
dbc.Container(
html.Ol(
[
html.Br(),
html.Br(),
html.Li(' To do list 1'),
html.Li(' To do list 2'),
html.Li(' To do list 3'),
html.Li(' To do list 4')
]
)
)
) if __name__ == "__main__":
app.run_server(debug=True)

chart 5

  • be based on Ul() And Li() List of render levels

And in addition to Ol() In addition to mutual cooperation ,Li() It can also be nested in Ul() Render a hierarchical list in :

app5.py

import dash
import dash_html_components as html
import dash_bootstrap_components as dbc app = dash.Dash(__name__) app.layout = html.Div(
dbc.Container(
html.Ul(
[
html.Br(),
html.Br(),
html.Li('1'),
html.Li('2'),
html.Ul(
[
html.Li('2.1'),
html.Li('2.2'),
html.Li('2.3'),
html.Ul(
[
html.Li('2.1.1'),
html.Li('2.1.2'),
html.Li('2.1.3'),
]
)
]
),
html.Li('3'),
html.Li('4')
]
)
)
) if __name__ == "__main__":
app.run_server(debug=True)

chart 6

  • utilize Img() Rendering pictures

Img() Equivalent to html Medium img label , We go through src The parameter passes in the picture address to render the picture , Take the picture of my previous blog as an example :

app6.py

import dash
import dash_html_components as html
import dash_bootstrap_components as dbc app = dash.Dash(__name__) app.layout = html.Div(
dbc.Container(
[
html.H5('( Refine data visualization in simulation 05) Market value growth during the epidemic top25 company '),
html.Img(src='https://img2020.cnblogs.com/blog/1344061/202011/1344061-20201129183046286-1089258422.png',
style={'width': '100%'})
]
)
) if __name__ == "__main__":
app.run_server(debug=True)

chart 7

  • utilize Audio() And Video() Play audio and video

utilize Audio() and Video(), We can go through the parameters src Pass in the corresponding audio and video files url Address , So that we can embed audio and video in the web page , The parameter controls Must be set to True Otherwise it won't render properly :

app7.py

import dash
import dash_html_components as html
import dash_bootstrap_components as dbc app = dash.Dash(__name__) app.layout = html.Div(
dbc.Container(
[
html.H5(' Audio sample :'),
html.Audio(src='https://interactive-examples.mdn.mozilla.net/media/cc0-audio/t-rex-roar.mp3',
controls=True),
html.H5(' Video examples :'),
html.Video(src='https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4',
controls=True,
style={'width': '100%'}),
]
)
) if __name__ == "__main__":
app.run_server(debug=True)

chart 8

  • utilize Iframe() Embed other pages

similar iframe label , We can also use it Iframe() To embed other pages in a web page , Can pass src Parameters are passed directly into the target web page url, It can also be done through srcDoc Parameters are passed into the html Source string :

app8.py

import dash
import dash_html_components as html
import dash_bootstrap_components as dbc app = dash.Dash(__name__) app.layout = html.Div(
dbc.Container(
[
html.Iframe(src='https://www.baidu.com/',
style={'width': '100%', 'height': '800px'})
]
)
) if __name__ == "__main__":
app.run_server(debug=True)

chart 9

  • utilize Textarea() Construct input fields

Sometimes we need to construct an input box for users to input large pieces of text , For example, a lot of online editors , And in the Dash We can use dash_core_components Medium Textarea() To achieve this function , also dcc.Textarea() Also has value and placeholder attribute , It can cooperate with callback function to realize many functions .

For example, in the following example, we have written a simple tool for swearing harmony , It's going to replace all the fuckin 'user input with “**”:

app9.py

import dash
import dash_html_components as html
import dash_bootstrap_components as dbc
import dash_core_components as dcc
from dash.dependencies import Input, Output app = dash.Dash(__name__) app.layout = html.Div(
dbc.Container(
[
html.Br(),
dcc.Textarea(style={'width': '100%', 'height': '300px'},
id='input',
value='',
placeholder=' Please enter the text !'),
html.P(id='output')
]
)
) @app.callback(
Output('output', 'children'),
Input('input', 'value')
)
def mask_dirty_talk(value): return value.replace(' Fucking ', '**') if __name__ == "__main__":
app.run_server(debug=True)

chart 10

2.2 dcc.Markdown()——Dash A special static component in the

stay Dash There is also a special component for rendering static content ——dcc.Markdown(), its children Parameter acceptance markdown Code , And automatically present the rendered effect in the web page , The main parameters are as follows :

children: Character markdown Source code

dangerously_allow_html:bool type , Used to set whether parsing is allowed markdown In the source html Code and render , The default is False That is, no rendering

dedent:bool type , Code used to set whether to ignore the beginning of each line of text , The default is True

The effect is as follows :

app10.py

import dash
import dash_core_components as dcc
import dash_html_components as html
import dash_bootstrap_components as dbc app = dash.Dash(__name__) app.layout = html.Div(
dbc.Container(
[
dcc.Markdown('''
> The sample code for this article has been uploaded to my `Github` Warehouse [https://github.com/CNFeffery/DataScienceStudyNotes](https://github.com/CNFeffery/DataScienceStudyNotes) # 1 brief introduction This is my series of tutorials **Python+Dash Fast web application development ** The fifth issue of , In the last article , We aim at `Dash` Some technical features of callbacks are introduced in , So that we can be more happy for `Dash` Application writing callback interaction function . And today's article serves as ** Callback interaction ** The last issue of systematic content , I'm going to take you get some `Dash` The practical application effect is amazing ** Advanced callback features **, Buckle up , We take off ~ <p align="center"><img src="https://img2020.cnblogs.com/blog/1344061/202102/1344061-20210207194037614-808613819.png" style="zoom:100%;" /></p> ''',
dangerously_allow_html=True,
dedent=False)
]
)
) if __name__ == "__main__":
app.run_server(debug=True)

chart 11

With Markdown() The blessing of parts , We can use it directly in some cases markdown Write web pages quickly , For example, writing an online document description page ~

3 utilize Dash Homemade online Markdown Editor

After mastering the knowledge involved in today's tutorial , We can write some interfaces with practical interaction functions by ourselves , For example, make an online Markdown Editor .

The idea is simple , Use what you've learned today Textarea() Of components value Property as a callback Input(), then Markdown() Of components children Element as a callback Output(), A little more beautification of the layout , The following effects are achieved ~

chart 12

The corresponding code is as follows :

app11.py

import dash
import dash_html_components as html
import dash_core_components as dcc
import dash_bootstrap_components as dbc
from dash.dependencies import Input, Output app = dash.Dash(__name__) app.layout = html.Div(
dbc.Container(
dbc.Row(
[
dbc.Col(
dcc.Textarea(
id='md-input',
placeholder=' Please enter your markdown Source code !',
style={
'width': '100%',
'height': '100%'
}
),
width=6,
style={
'padding-right': 0,
'border': 'border:5px solid red'
}
),
dbc.Col(
dcc.Markdown(id='md-output',
dangerously_allow_html=True,
style={
'position': 'absolute',
'width': '100%',
'height': '100%'
}),
width=6,
style={
'position': 'relative',
'overflow': 'auto',
'padding-left': 0
}
),
],
style={
'position': 'fixed',
'top': 0,
'bottom': 0,
'left': 0,
'right': 0
}
)
),
style={
'font-size': '2rem'
}
) @app.callback(
Output('md-output', 'children'),
Input('md-input', 'value')
)
def online_markdown(raw_text):
return raw_text if __name__ == '__main__':
app.run_server(debug=True)

The above is the whole content of this paper , We'll continue to explore in the next tutorial Dash Static components that are easier to use and more functional in , Coming soon ~

The above is the whole content of this paper , Welcome to discuss with me in the comments section .

( Data science learning notes 108)Python+Dash Fast web application development —— Static components ( On ) More articles about

  1. ( Data science learning notes 75) be based on geopandas Spatial data analysis based on —— Coordinate reference system

    The corresponding code of this article has been uploaded to my Github Warehouse https://github.com/CNFeffery/DataScienceStudyNotes 1 brief introduction In the last article, we discussed geopandas Data nodes in ...

  2. ( Data science learning notes 84) be based on geopandas Spatial data analysis based on —— Space computing ( On )

    Sample code of this article . Data and files have been uploaded to my Github Warehouse https://github.com/CNFeffery/DataScienceStudyNotes 1 brief introduction In previous articles in this series, we focused on g ...

  3. ( Data science learning notes 88) be based on geopandas Spatial data analysis based on —— Space computing ( Next )

    The sample code and data of this article have been uploaded to my Github Warehouse https://github.com/CNFeffery/DataScienceStudyNotes 1 brief introduction Based on geopandas Series of spatial data analysis ...

  4. ( Data science learning notes 50) be based on Python Network data collection -selenium piece ( On )

    One . brief introduction And then a few months ago ( Data science learning notes 31) be based on Python Network data collection ( Elementary chapter ), In that article , We introduced the basics of web crawlers ( Basic request Library , Basic parsing library ,CSS, Regular expressions, etc ), In that article ...

  5. ( Data science learning notes 47) be based on Python The actual combat of network data collection (2)

    One . brief introduction I'm in my senior year , Recently in the summer internship , Outside the main business of data mining , Also help colleagues do a lot of network data collection content , The next few articles will be listed one by one , To continue to write a few months ago to open this network data collection practical pit . Two . Ma beehive reviews data collection ...

  6. ( Data science learning notes 32)Python in re Detailed introduction of the module

    One . brief introduction On regular expressions , I was in the previous article ( Data science learning notes 31) It has been introduced in detail in , This article will Python It comes with a module re Summarize the common functions of : re As Python It is a module specially designed for regular expression related functions , Provide ...

  7. ( Data science learning notes 80) use Python Write a small tool to download OSM Road network data

    The corresponding script of this article has been uploaded to my Github Warehouse https://github.com/CNFeffery/DataScienceStudyNotes 1 brief introduction In the process of data visualization or spatial data analysis, we often ...

  8. ( Data science learning notes 90)Python+Kepler.gl Make time carousels easily

    The sample code and data of this article have been uploaded to my Github Warehouse https://github.com/CNFeffery/DataScienceStudyNotes 1 brief introduction Kepler.gl As a powerful open source GIS ...

  9. ( Data science learning notes 55) utilize ggthemr To beautify ggplot2 Images

    One . brief introduction R Medium ggplot2 It's a very powerful and flexible data visualization package , Familiar with its drawing rules, you can freely generate various visual images , But its default color and style are unavoidably too simple in many cases , This article will introduce the ggthemr The package is specifically for the original ...

  10. ( Data science learning notes 49)Scala Pattern matching in

    One . brief introduction Scala Pattern matching in is similar to Java Medium switch sentence , And more robust , This article will focus on Scala Some basic examples of pattern matching are introduced : Two .Scala Pattern matching in 2.1 The basic format Scala Medium mode match ...

Random recommendation

  1. ( original ) Use VMware install Ubuntu, How can't use startx Enter desktop mode ?

    Recently VMware Install in Ubuntu when , Find out VMware After the quick installation of is text mode , Can't use startx Enter desktop mode , Very inconvenient . This problem is the default installation mode , You need to set the installation mode . operating system :Windows 8.1 ...

  2. python supervisor Use

    Supervisor  Is based on Python Process management tools for , It can only run on Unix-Like On the system , That is, it can't run on Windows On .Supervisor The official version can only run on Python 2 ...

  3. mvc Upload the image to the server

    link :http://www.lanhusoft.com/Article/406.html

  4. prob

    void calc_probability(int num) { , j = , k = ; #define SIZE_NUM 8 int *array_num = NULL; int *rememb ...

  5. ContextMenuStrip Control

    Set the right-click menu of the form Notice if you want to be in form1 Right click menu is displayed in , So set up form1 Properties of

  6. perl lwp Get request header

    <pre name="code" class="html">[root@dr-mysql01 ~]# cat getx.pl use LWP::Us ...

  7. HDU ACM 1495 Very cola ( Guang Shu BFS)

    Very cola Time Limit : 2000/1000ms (Java/Other)   Memory Limit : 32768/32768K (Java/Other) Total Submissi ...

  8. git Set user name and mailbox

    use git config --global user.name "your name" Command to set your user name use git config --global user.email " ...

  9. Amaze UI——slider Parameter description of

    <script type="text/javascript"> $(function(){ $('.am-slider').flexslider({ playAfter ...

  10. Symmetric encryption -AES

    Suppose there is a sender sending a message to the receiver . Without any encryption algorithm , The receiver sends a plaintext message :“ I'm Xiao Hui ”. If the message is intercepted by a middleman , Even if the middleman can't tamper with the message , You can also spy on the content of the message , Thus exposing the privacy of both sides of the communication . ...