Python + dash rapid web application development static components

itread01 2021-02-22 11:57:17
python dash rapid web application


> The sample code for this article has been uploaded to my `Github` Warehouse [https://github.com/CNFeffery/DataScienceStudyNotes](https://github.com/CNFeffery/DataScienceStudyNotes)# 1 Introduction This is my series of tutorials **Python+Dash Fast web Application development ** The sixth issue of , In the last article , We finished right `Dash` Discussion on the higher order characteristics of call back interaction in , In the course content that will be released one after another in the future , We are going to learn together `Dash` Those rich in Ecology ** Page parts **, So that we can create all kinds of powerful interactive web The 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 Apply . # 2 Dash The basic static components in What we call static page parts here , Mainly refers to its own does not have a direct interactive function , But rather ** Present content ** For the main function , Just like the simple comparison below :> app1.py```Pythonimport dashimport dash_html_components as htmlimport dash_bootstrap_components as dbcimport dash_core_components as dccapp = 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 the third level title '), html.H4(' This is a four level title '), html.P( [ ' This is a ', html.A(' Link to ', 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)``` 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 call back 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 , Corresponds to `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()` Each corresponds to 1 Grade 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 passage of text or content , Typically, as we see in our 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 argument `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` Arguments are 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 passage ` Code snippets `,`U()` Used to underline the contents ,`Mark()` Is used to highlight dimension text . The static components described above can be intuitively felt through the following small examples :> app2.py```Pythonimport dashimport dash_html_components as htmlimport dash_bootstrap_components as dbcapp = 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 title '), html.H6(' Title Six '), html.Br(), # Line break html.Hr(), # Horizontal split line html.P(' This is a text .'*20), html.P(' This is another paragraph 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 one ', 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)``` ### 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 、 News 、 Video and other multimedia content , Let's learn how to be in `Dash` More abundant content presentation forms are constructed in :- ** Based on Blockquote() Implement block references ** utilize `dash_html_components` Medium `Blockquote()`, We can pass in strings directly , Or nest like other elements , This constructs the block reference , It's like `markdown` Medium `>` The content contained in the rendering is like , Refer to the following example :> app3.py```Pythonimport dashimport dash_html_components as htmlimport dash_bootstrap_components as dbcapp = 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)``` - ** Based on Ol() And Li() Rendering has a sequence table ** utilize `Ol()` Nest like multiple `Li()`, You can automatically render an ordered list with serial numbers , Like this simple example :> app4.py```Pythonimport dashimport dash_html_components as htmlimport dash_bootstrap_components as dbcapp = dash.Dash(__name__)app.layout = html.Div( dbc.Container( html.Ol( [ html.Br(), html.Br(), html.Li(' To do 1'), html.Li(' To do 2'), html.Li(' To do 3'), html.Li(' To do 4') ] ) ))if __name__ == "__main__": app.run_server(debug=True)``` - ** Based on Ul() And Li() List of render levels ** And in addition to `Ol()` In addition to mutual cooperation ,`Li()` It can also nest in `Ul()` Render a hierarchical list in :> app5.py```Pythonimport dashimport dash_html_components as htmlimport dash_bootstrap_components as dbcapp = 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)``` - ** utilize Img() Render the picture ** `Img()` Equivalent to `html` Medium `img` Label , We passed `src` The argument is passed into the picture address to render the picture , Take the picture of my previous blog as an example :> app6.py```Pythonimport dashimport dash_html_components as htmlimport dash_bootstrap_components as dbcapp = dash.Dash(__name__)app.layout = html.Div( dbc.Container( [ html.H5('( Improve the visualization of information in imitation 05) Market value growth during the epidemic period 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)``` - ** utilize Audio() And Video() Play audio and video ** utilize `Audio()` and `Video()`, We can use the arguments `src` Input the corresponding audio and video files url Address , So that we can embed audio and video in the web page , Where arguments `controls` Must be set to `True` Otherwise it won't render properly :> app7.py```Pythonimport dashimport dash_html_components as htmlimport dash_bootstrap_components as dbcapp = dash.Dash(__name__)app.layout = html.Div( dbc.Container( [ html.H5(' Audio examples :'), 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)``` - ** utilize Iframe() Embed other pages ** Similar `iframe` Label , We can also use `Iframe()` To embed other pages in a web page , It can be done by `src` Arguments are passed directly to the target page url, It can also be done by `srcDoc` Arguments are passed into the entire page html Source code string :> app8.py```Pythonimport dashimport dash_html_components as htmlimport dash_bootstrap_components as dbcapp = 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)``` - ** 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 , And `dcc.Textarea()` It also has `value` and `placeholder` Properties , Many functions can be implemented with callback function . For example, in the following example, we have written a simple tool for swearing harmony , All the information entered by the user will be ~~ Damn it ~~ Replace with “**”
版权声明
本文为[itread01]所创,转载请带上原文链接,感谢
https://pythonmana.com/2021/02/20210221003120628d.html

  1. 27000 stars! The most comprehensive collection of Python design patterns
  2. python day3
  3. python day3
  4. Commonly used data operation functions of Python
  5. (数据科学学习手札108)Python+Dash快速web应用开发——静态部件篇(上)
  6. (learning notes of data science 108) Python + dash rapid web application development -- static components (I)
  7. (数据科学学习手札108)Python+Dash快速web应用开发——静态部件篇(上)
  8. (learning notes of data science 108) Python + dash rapid web application development -- static components (I)
  9. [Python] Matplotlib 图表的绘制和美化技巧
  10. Drawing and beautifying skills of [Python] Matplotlib chart
  11. [Python] Matplotlib 图表的绘制和美化技巧
  12. Drawing and beautifying skills of [Python] Matplotlib chart
  13. Virtual environment of Python project
  14. 翻译:《实用的Python编程》02_01_Datatypes
  15. Translation: practical Python Programming 02_ 01_ Datatypes
  16. 翻译:《实用的Python编程》02_01_Datatypes
  17. 翻译:《实用的Python编程》02_01_Datatypes
  18. Translation: practical Python Programming 02_ 01_ Datatypes
  19. Translation: practical Python Programming 02_ 01_ Datatypes
  20. Python 3 入门,看这篇就够了
  21. Python 3 entry, see this is enough
  22. 华为大佬打造的400集Python视频学起来,学完万物皆可爬
  23. 400 episodes of Python video created by Huawei boss
  24. django之csrf_exempt解决跨域请求的问题
  25. CSRF of Django_ Exempt solves the problem of cross domain requests
  26. 1.7 万 Star!一个简单实用的 Python 进度条库
  27. 17000 stars! A simple and practical Python progress bar library
  28. Python爬虫:设置Cookie解决网站拦截并爬取蚂蚁短租
  29. Python crawler: setting cookie to solve website interception and crawling ant short rent
  30. Python-Net编程
  31. Python net programming
  32. 学习Python数学英语基础重要吗?Python教程!
  33. Is it important to learn the basics of math and English in Python!
  34. Python数据分析常用库有哪些?Python学习!
  35. What are the common libraries for Python data analysis? Learn Python!
  36. win 创建python虚拟环境
  37. Creating Python virtual environment with win
  38. In order to automatically collect B station barrage, I developed a tool in Python
  39. 用Python编程语言来实现阿姆斯特朗数的检查
  40. Using python programming language to check Armstrong number
  41. Python中的解决中文字符编码的问题
  42. Solving the problem of Chinese character coding in Python
  43. Translation: practical Python Programming 02_ 01_ Datatypes
  44. Installation and use of Python and tensorflow in win10 environment (Python version 3.6, tensorflow version 1.6)
  45. Python series 46
  46. Linux安装Python3
  47. 【python接口自动化】- 正则用例参数化
  48. Python RestFul Api 设计
  49. filecmp --- 文件及目录的比较│Python标准库
  50. Installing python3 on Linux
  51. [Python] Matplotlib 圖表的繪製和美化技巧
  52. (資料科學學習手札108)Python+Dash快速web應用開發——靜態部件篇(上)
  53. 翻譯:《實用的Python程式設計》02_01_Datatypes
  54. 【python接口自动化】- 正则用例参数化
  55. 翻译:《实用的Python编程》02_02_Containers
  56. 两年Java,去字节跳动写Python和Go
  57. [Python interface automation] - regular use case parameterization
  58. Python restful API design
  59. 翻译:《实用的Python编程》02_02_Containers
  60. 两年Java,去字节跳动写Python和Go