（資料科學學習手札110）Python+Dash快速web應用開發——靜態部件篇（下）

費弗裡發表於2021-03-06
資料科學PythonWeb

本文示例程式碼已上傳至我的Github倉庫https://github.com/CNFeffery/DataScienceStudyNotes

1 簡介

　　 這是我的系列教程Python+Dash快速web應用開發的第八期，在上一期的文章中，我們對Dash生態裡常用的渲染網頁靜態表格的方法做了一系列的介紹，使得我們可以配合pandas渲染出靈活豐富的網頁靜態表格。

　　而在今天的教程內容作為靜態部件篇三部曲的最後一篇，我將帶大家學習Dash生態中常用的若干輔助性質的靜態部件，有了它們，我們搭建出的Dash應用會更加完善和正式~

（資料科學學習手札110）Python+Dash快速web應用開發——靜態部件篇（下）
圖1

2 Dash中常用的輔助性靜態部件

　　我們前兩期介紹的眾多靜態部件，主要都是用來作為某種具體型別內容的容器，譬如文字、圖片、視訊等。

　　但在日常使用中大家都會見識過一些在網頁中起輔助作用的內容，他們對網頁主題內容起到提示補充等輔助性功能。而在Dash生態中常用的有：

2.1 Tooltip()提示框

　　dash-bootstrap-components中封裝的Tooltip()，可以幫助我們無需回撥即可建立懸浮提示框。而提示框需要繫結其他的部件來觸發，這樣的部件即為Tooltip()的目標部件，我們只需要將目標部件的id作為Tooltip()的target引數傳入，即可在滑鼠懸停於目標部件時自動彈出提示框：

app1.py

import dash
import dash_bootstrap_components as dbc
import dash_html_components as html

app = dash.Dash(__name__)

app.layout = html.Div(
    dbc.Container(
        [
            html.Br(),
            html.Br(),
            html.Br(),
            html.P(
                [
                    '在',
                    html.A('Dash',
                           href='https://dash.plotly.com/',
                           id='dash'),
                    '中，我們可以使用',
                    html.A('dash_bootstrap_components',
                           href='https://github.com/facultyai/dash-bootstrap-components',
                           id='dash_bootstrap_components'),
                    '來快速完成基於網格系統的頁面佈局！',
                    dbc.Tooltip('Dash是一整套基於Python的web應用快速搭建方案。',
                                target='dash'),
                    dbc.Tooltip('dash_bootstrap_components是Dash第三方擴充中對bootstrap諸多特性的遷移。',
                                target='dash_bootstrap_components')
                ]
            )
        ]
    )
)

if __name__ == '__main__':
    app.run_server(debug=True)

　　可以看到我們分別給兩個html.A()部件繫結上相應的提示框，從而實現了滑鼠懸停顯示提示框內容。

（資料科學學習手札110）Python+Dash快速web應用開發——靜態部件篇（下）
圖2

　　Tooltip()還具有一些額外引數可以幫助我們自定義顯示效果，常用的有：

  • placement

　　引數placement用於設定提示框彈出方向，基礎的可選引數有left、right、top以及bottom，分別代表左右上下彈出，你還可以在設定方向之後加上字尾-start或-end來對提示框箭頭位置做進一步調整。

  • autohide

　　autohide是一個Bool型引數，用於設定是否在滑鼠移出目標部件懸停區域後立刻關閉，預設為True，當設定為False後，滑鼠快速移動到提示框之上不會關閉，從而方便使用者進行一些複製操作。

  • delay

　　delay引數接受字典輸入，格式如{'show': 數值, 'hide': 數值}，可分別來設定懸浮後提示框顯示，以及滑鼠移出後提示框隱藏的動畫時長，單位毫秒，預設為{'show': 0, 'hide': 250}。

　　你可以結合自己的實際需求定製出想要的提示框效果。

2.2 Spinner()建立載入動畫

　　在很多情況下，我們在web應用中執行某些耗時明顯的操作時，最好是給對應的區域載入一些動畫用來提示使用者web應用正在計算中或者某一塊內容正在載入中，這在Dash中可以利用部件Spinner()來實現。

　　使用起來很簡單，因為我們的web應用所謂的非同步計算中或載入中狀態，其實就是某個回撥在完成輸出前的計算狀態。

　　因此Spinner()的邏輯是將其巢狀在內的子元素視為監聽目標，當子元素中至少有一個元素處於回撥計算中狀態時，就會顯示載入動畫，預設動畫是旋轉的未閉合圓圈，對應預設引數type='border'，而另一種可選的引數type='grow'則會顯示為不斷浮現又消失的圓；還可用color引數設定顏色，以及設定fullscreen=True來實現全屏載入動畫：

app2.py

import dash
import dash_bootstrap_components as dbc
import dash_html_components as html
from dash.dependencies import Input, Output
import time

app = dash.Dash(__name__)

app.layout = html.Div(
    dbc.Container(
        [
            html.Br(),
            html.Br(),
            html.Br(),
            dbc.Row(dbc.Spinner(color='grey')),
            dbc.Row(dbc.Spinner(color='red', type='grow')),
            dbc.Row(dbc.Button('點選計算', id='start')),
            dbc.Row(dbc.Spinner(html.P('計算結果', id='output'))),
            dbc.Row(dbc.Button('全屏點選計算', id='start-fullscreen')),
            dbc.Row(dbc.Spinner(html.P('計算結果', id='output-fullscreen'), fullscreen=True)),
        ]
    )
)

@app.callback(
    Output('output', 'children'),
    Input('start', 'n_clicks'),
    prevent_initial_call=True
)
def loading(n_clicks):

    time.sleep(1)

    return '計算完成！'

@app.callback(
    Output('output-fullscreen', 'children'),
    Input('start-fullscreen', 'n_clicks'),
    prevent_initial_call=True
)
def loading(n_clicks):

    time.sleep(1)

    return '計算完成！'

if __name__ == '__main__':
    app.run_server(debug=True)
（資料科學學習手札110）Python+Dash快速web應用開發——靜態部件篇（下）
圖3

　　而Spinner()中雖然只提供了上述兩種樣式的載入動畫，但其實提供了fullscreen_style與spinner_style引數來供使用者自定義css來實現更多樣的載入動畫效果，關於這部分內容我們將在之後單獨寫一期教程，到時還會與Dash自帶的Loading()部件進行比較。

2.3 Tabs()+Tab()建立多選項卡

　　在Dash中我們可以使用dash-bootstrap-components中的Tabs()來組織Tab()子元素，這時每個Tab()之下的子元素就可以視為單獨的頁面，從而通過點選對應選項卡進入其他選項卡頁面，使得我們的應用形式更加豐富：

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(
        dbc.Tabs(
            [
                dbc.Tab(
                    [
                        html.Br(),
                        html.P('這是選項卡1')
                    ],
                    label='選項卡1'
                ),
                dbc.Tab(
                    [
                        html.Br(),
                        html.P('這是選項卡2')
                    ],
                    label='選項卡2'
                ),
                dbc.Tab(
                    [
                        html.Br(),
                        html.P('這是選項卡3')
                    ],
                    label='選項卡3'
                ),
            ]
        ),
        style={'margin-top': '100px'}
    )
)

if __name__ == '__main__':
    app.run_server(debug=True)

　　這時每個Tab()下組織的內容就相當於獨立的介面，非常的方便：

（資料科學學習手札110）Python+Dash快速web應用開發——靜態部件篇（下）
圖4

　　並且Tab()提供了引數tab_style、label_style以及active_tab_style引數，使得我們可以分別設定選項卡容器、選項卡標籤以及切換到對應選項卡後的標籤樣式：

app4.py

import dash
import dash_bootstrap_components as dbc
import dash_html_components as html

app = dash.Dash(__name__)

app.layout = html.Div(
    dbc.Container(
        dbc.Tabs(
            [
                dbc.Tab(label='選項卡1', tab_style={'background-color': 'lightgrey'}),
                dbc.Tab(label='選項卡2', label_style={'color': 'red'}),
                dbc.Tab(label='選項卡3',
                        tab_style={'margin-left': 'auto'},
                        active_label_style={'color': 'green'}),
            ]
        ),
        style={'margin-top': '100px'}
    )
)


if __name__ == '__main__':
    app.run_server(debug=True)
（資料科學學習手札110）Python+Dash快速web應用開發——靜態部件篇（下）
圖5

　　這個例子涉及的部分內容可能你現在還不熟悉，不過沒關係，我們會在之後專門單獨的詳細教程~

　　靜態部件在Dash常用部件中雖然不承擔更具功能性和互動性的作用，但是我們給編寫的Dash應用增光添彩不可或缺的內容，這三期介紹的只是相對常用的一些靜態部件，還有更多我們將會在之後偶然使用到時再提及，之後就會進入到Dash中承擔web應用主要功能的各種互動部件的教程，敬請期待~

　　以上就是本文的全部內容，歡迎在評論區與我們進行討論！

相關文章