【Dash】feffery_antd_components 模块中的布局

一、各个组件在布局中担任不同的角色

在 feffery_antd_components 模块中,AntdSpaceAntdRowAntdColAntdLayoutAntdAffix 这些组件在布局中各自承担不同的角色:

1、AntdSpace 组件

主要用于快捷对一组元素进行水平或竖直方向上的规整排列。它可以设置元素之间的排列方向(direction )、间隔大小(size)、是否添加分割线(addSplitLine)以及元素的对齐方式(align)。AntdSpace 可以视为页面元素排列的快捷方式,适用于基础的多个组件水平方向或竖直方向上单一的等间距排列需求。

2、AntdRow 和 AntdCol 组件

栅格系统的组成部分,用于创建复杂的网格布局。

AntdRow 作为容器组件,定义一组列,并根据屏幕尺寸自动调整列的宽度(lgmdsmxlxsxxl)、设置每个元素的间距以及行间距(gutter)。

AntdCol 则用于定义列的宽度和偏移量,通过设置 spanoffset属性来控制;设置宽度(flex);设置不同屏幕宽度断点下的 gutter 值(gutter = {'xs': 5, 'sm': 8, 'md': 10, 'lg': 12, 'xl': 15, 'xxl': 25});设置两侧宽度可调整(FefferyResizable

3、AntdLayout 组件

提供了一个经典的布局结构,包括头部(AntdHeader)、内容(AntdContent )、尾部(AntdFooter )和侧边栏(AntdSider )。它是基于 AntdRowAntdCol的更高级的布局组件,用于构建页面的整体布局。

4、AntdAffix 组件

用于将页面元素固定在可视范围内,常用于侧边菜单和按钮组合。它可以通过设置 offsetTopoffsetBotton 属性来控制固定的位置;设置局部容器内锚定(target)。 AntdAffix可以设置监听其滚动时间的元素,并且可以获取是否固定的状态。

相关推荐
qq_167401515 天前
使用 dash 构建整洁架构应用
架构·dash
音视频牛哥9 天前
从协议规范和使用场景探讨为什么SmartMediaKit没有支持DASH
人工智能·音视频·大牛直播sdk·dash·dash还是rtmp·dash还是rtsp·dash还是hls
音视频牛哥13 天前
RTMP/RTSP/WebRTC/SRT/HLS/DASH/GB28181/WebTransport/QUIC协议规范深度分析
人工智能·计算机视觉·音视频·webrtc·大牛直播sdk·dash·webtransport
电棍23315 天前
kaggle比赛与常用的dash board 3lc
数学建模·dash
百步送剑16 天前
在 Ubuntu 环境下 sh 脚本运行因为 Bash 改用 Dash 语法报错问题
ubuntu·bash·dash
看今朝·18 天前
【Dash框架】Dash回调函数中Output的属性详解
java·前端·dash
啊森要自信1 个月前
【GUI自动化测试】YAML 配置文件应用:从语法解析到 Python 读写
android·python·缓存·pytest·pip·dash
计算机毕设残哥1 个月前
基于Hadoop+Spark的人体体能数据分析与可视化系统开源实现
大数据·hadoop·python·scrapy·数据分析·spark·dash
计算机毕设残哥1 个月前
基于Hadoop+Spark的商店购物趋势分析与可视化系统技术实现
大数据·hadoop·python·scrapy·spark·django·dash
Tipriest_2 个月前
Ubuntu 中 Bash / Zsh / Ash / Dash 的使用与区别(含对比图)
ubuntu·bash·dash