一些抽象使创建ui在dash中更容易。
dash_ui的Python项目详细描述
#dash ui
grid
“grid”使用
[css grid]（https://css tricks.com/getting started css grid/）
使在dash中创建类似仪表板的布局变得超级简单。
网格。
[图像]（https://user images.githubusercontent.com/10272301/39724456-dc7144c0-5216-11e8-8b01-18ddc19946e2.png）
首先我们添加外部css url`https://codepen.io/rmarren1/pen/mlqgrg.css`.
这是网格工作所必需的。如果您不能使用这个（例如，您
在本地提供样式表），您可以只在https://github.com/rmarren1/dash-ui/blob/master/dash-ui/style/css/grid.css上提供文件。
接下来，我们使用以下调用创建一个网格：
`grid=dui.grid（
*`num-rows`是网格中的行，并且必须介于1和12之间
*`num_cols`是网格中的列数，并且必须介于1和12之间
*`grid_padding`是网格元素之间要填充的像素数，并且必须
是[0，1，2，5，10，25，50，100]。
现在您可以添加任何短划线元素作为网格元素，如：
````
网格。添加元素（col=1，row=1，width=3，height=4，element=html.div（
style={“background color”：“red”，“height”：“100%”，“width”：“100%”}
```
*`row`是网格布局中的起始行
*`col`是网格布局中的起始列grid layout
*`height`是元素应该跨越的行数。
*`width`是元素应该跨越的列数
请注意，行和列是一个索引。
最后，我们使用函数dui.layout（grid=grid，）`
，并将“app.layout”设置为此函数返回的对象。
[图像]（https://user images.githubusercontent.com/10272301/40074922-03a07a74-5849-11e8-92f5-8a211d03b26f.png）
使用如下代码创建一个：
```
controlpanel=dui.controlpanel（_id=“controlpanel”）
controlpanel.create_group（
group=“state”，
group_title=“更改所选状态。”
）
state_select=dcc.dropdown（
id="state-dropdown",
options=[{
'label'：x.title（），
'value'：x
}x在df[“state”].tolist（）
]，
value=df[“state”].tolist（）[0]
）controlpanel.add_element（state_select，“state”）
````
然后将“controlpanel”实例作为参数包含到“dui.layout”函数中，例如
``````
app.layout=dui.layout（
grid=grid，
controlpanel=controlpanel
）
```
我们还可以使用快捷方式添加plotly图形元素
`grid.add廑graph（col=1，row=1，width=3，height=4，graph廑id=“all pie”）`
它创建一个网格元素，图形的“id”在“graph廑id”中声明。
仅
200行代码。
然后将css从codepen添加到您的项目中，使用：
```
mycss-url=[
“https://codepen.io/your codepen-name/pen/your pen identifier.css”，
]
mycss-url中的url:
app.css.append-css（{
“external-url”：url
}）
```
grid
“grid”使用
[css grid]（https://css tricks.com/getting started css grid/）
使在dash中创建类似仪表板的布局变得超级简单。
网格。
[图像]（https://user images.githubusercontent.com/10272301/39724456-dc7144c0-5216-11e8-8b01-18ddc19946e2.png）
首先我们添加外部css url`https://codepen.io/rmarren1/pen/mlqgrg.css`.
这是网格工作所必需的。如果您不能使用这个（例如，您
在本地提供样式表），您可以只在https://github.com/rmarren1/dash-ui/blob/master/dash-ui/style/css/grid.css上提供文件。
接下来，我们使用以下调用创建一个网格：
`grid=dui.grid（
*`num-rows`是网格中的行，并且必须介于1和12之间
*`num_cols`是网格中的列数，并且必须介于1和12之间
*`grid_padding`是网格元素之间要填充的像素数，并且必须
是[0，1，2，5，10，25，50，100]。
现在您可以添加任何短划线元素作为网格元素，如：
````
网格。添加元素（col=1，row=1，width=3，height=4，element=html.div（
style={“background color”：“red”，“height”：“100%”，“width”：“100%”}
```
*`row`是网格布局中的起始行
*`col`是网格布局中的起始列grid layout
*`height`是元素应该跨越的行数。
*`width`是元素应该跨越的列数
请注意，行和列是一个索引。
最后，我们使用函数dui.layout（grid=grid，）`
，并将“app.layout”设置为此函数返回的对象。
[图像]（https://user images.githubusercontent.com/10272301/40074922-03a07a74-5849-11e8-92f5-8a211d03b26f.png）
使用如下代码创建一个：
```
controlpanel=dui.controlpanel（_id=“controlpanel”）
controlpanel.create_group（
group=“state”，
group_title=“更改所选状态。”
）
state_select=dcc.dropdown（
id="state-dropdown",
options=[{
'label'：x.title（），
'value'：x
}x在df[“state”].tolist（）
]，
value=df[“state”].tolist（）[0]
）controlpanel.add_element（state_select，“state”）
````
然后将“controlpanel”实例作为参数包含到“dui.layout”函数中，例如
``````
app.layout=dui.layout（
grid=grid，
controlpanel=controlpanel
）
```
我们还可以使用快捷方式添加plotly图形元素
`grid.add廑graph（col=1，row=1，width=3，height=4，graph廑id=“all pie”）`
它创建一个网格元素，图形的“id”在“graph廑id”中声明。
仅
200行代码。
然后将css从codepen添加到您的项目中，使用：
```
mycss-url=[
“https://codepen.io/your codepen-name/pen/your pen identifier.css”，
]
mycss-url中的url:
app.css.append-css（{
“external-url”：url
}）
```
欢迎加入QQ群-->： 979659372
