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

本文示例代碼已上傳至個人Github倉庫https://github.com/CNFeffery/DataScienceStudyNotes

1 簡介

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

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

圖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()部件綁定上相應的提示框，從而實現了鼠標懸停顯示提示框內容。

圖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)

圖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()下組織的內容就至關於獨立的界面，很是的方便：

圖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)

圖5

　　這個例子涉及的部份內容可能你如今還不熟悉，不過不要緊，咱們會在以後專門單獨的詳細教程~

---

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

　　以上就是本文的所有內容，歡迎在評論區與咱們進行討論！