ARTICLE DETAIL

资讯详情

深耕网站建设与运营推广的一线实战洞察。

fac卡片网格灵活控制宽高

fac卡片网格灵活控制宽高

实现效果如下

image

相关依赖

dash==3.2.0
feffery_antd_components==0.4.2
feffery_dash_utils==0.2.6

实现代码

import dash
from dash import html
import feffery_antd_components as fac
from feffery_dash_utils.style_utils import styleapp = dash.Dash(__name__)app.layout = html.Div([fac.AntdCard([fac.AntdCardGrid("网格1", style=style(width="calc(100% / 3)")),fac.AntdCardGrid("网格2", style=style(width="calc(2 * calc(100% / 3))")),*[fac.AntdCardGrid(f"网格{3 + i}", style=style(width="calc(100% / 7)"))for i in range(7)],*[fac.AntdCardGrid(f"网格{10 + i}", style=style(width="calc(100% / 5)", height=150))for i in range(5)],],title="卡片网格示例",)],style=style(padding=50),
)if __name__ == "__main__":app.run(debug=True)

 

返回列表