3.dash 之 layout 布局

553 阅读1分钟

做web页面我们难免会对页面进行布局,来美化我们的页面

这里推荐两个UI库:

www.dash-mantine-components.com/

dash-bootstrap-components.opensource.faculty.ai/

引入bootstrap库

bootstrap 是传统的UI库,我们可以引入默认主题来直接使用组件,这些组件都很精美,以下是个例子:

import dash
import dash_bootstrap_components as dbc

app = dash.Dash(external_stylesheets=[dbc.themes.BOOTSTRAP])

app.layout = dbc.Container(
    dbc.Alert("Hello Bootstrap!", color="success"),
    className="p-5",
)

if __name__ == "__main__":
    app.run_server()

引入dmc UI库

这也是一个UI库,这是专门为dash定制的,提供了更多的组件,更多的UI样式,足够各位进行使用了。

import dash_mantine_components as dmc
from dash import Dash

app = Dash(__name__)

app.layout = dmc.Alert(
    "Hi from Dash Mantine Components. You can create some great looking dashboards using me!",
    title="Welcome!",
    color="violet",
)

if __name__ == "__main__":
    app.run_server()

bootstrap图标

图标必不可少,可以直接使用bootstrap官网的

icons.getbootstrap.com/