尧图网站建设 
前端UI组件【免费下载链接】rsuite A suite of React components .项目地址https://gitcode.com/gh_mirrors/rs/rsuite点击查看免费下载rsuite 的List组件用于展示一组数据列表并支持拖拽排序。size属性是控制列表项紧凑程度的关键参数通过lg | md | sm | xs四个档位调节每一项的垂直内边距。本文以 docs/pages/components/list/fragments/size.md 的官方示例为主体结合 src/List/List.tsx、src/List/ListItem.tsx 及样式与测试源码完整讲解size的用法、取值、默认值与优先级规则并给出可复制的完整代码。一、size属性概述List与List.Item均提供size属性类型为lg | md | sm | xs默认值为mdlgLarge最大垂直间距适合作为页面主列表或需要视觉留白的场景mdMedium默认档位常规业务列表的推荐选择smSmall紧凑布局适合信息密度较高的列表xsExtra Small最紧凑档位适合工具条、筛选面板等空间受限的场景。对应文档表格见 docs/pages/components/list/en-US/index.mdPropertyType(Default)DescriptionsizeListlg \| md \| sm \| xs(md)Defines the size of the list itemssizeList.Itemlg \| md \| sm \| xs(md)Defines the size of the individual list item两者的区别在于作用域在List上设置size会统一下发到所有List.Item在单个List.Item上设置size则只覆盖当前项。二、官方示例用SegmentedControl动态切换尺寸官方文档 size.md 给出的完整示例通过SegmentedControl分段控制器让用户在四种尺寸间即时切换是演示size效果最直观的方式import { List, SegmentedControl } from rsuite; const data [Roses are red, Violets are blue, Sugar is sweet, And so are you]; const App () { const [size, setSize] React.useState(sm); return ( SegmentedControl data{[ { value: xs, label: Extra Small }, { value: sm, label: Small }, { value: md, label: Medium }, { value: lg, label: Large } ]} value{size} onChange{setSize} / hr / List size{size} {data.map((item, index) ( List.Item key{index} index{index} {item} /List.Item ))} /List / ); }; ReactDOM.render(App /, document.getElementById(root));要点拆解状态驱动size通过React.useState(sm)管理SegmentedControl的onChange{setSize}将选中的档位回写状态List size{size}随之重渲染——这正是 rsuite 受控组件的一贯用法List.Item的index属性示例中为每一项传入了index{index}。虽然尺寸演示本身不要求但该属性在启用sortable拖拽排序时是必需的官方文档注明 indexof List.Item is required建议在列表场景中始终提供data数组与key使用数组map渲染时每个List.Item都应以唯一标识作为key。三、尺寸的样式实现内边距差异来自哪里size不会改变列表项的内容排版或字体大小它控制的是每一项的垂直内边距。实现位于 src/List/styles/index.scss.rs-list-item { [data-sizelg] { padding-top: 20px; padding-bottom: 20px; } [data-sizemd] { padding-top: 13px; padding-bottom: 13px; } [data-sizesm] { padding-top: 8px; padding-bottom: 8px; } [data-sizexs] { padding-top: 2px; padding-bottom: 2px; } }四个档位的上下内边距依次为20px / 13px / 8px / 2px档位越低列表越紧凑。这一设计让同一个列表结构只需切换size即可适配不同页面的密度要求无需重写样式。从 src/List/ListItem.tsx 可以看到尺寸档位最终通过data-size数据属性落到 DOM 上Box as{as} rolelistitem aria-disabled{disabled} >const { bordered, register, size: parentSize } useContext(ListContext); const size sizeProp || parentSize;父级List通过 src/List/ListContext.tsx 中的ListContext.Provider把{ bordered, size, register }下发给所有子项见 src/List/List.tsxList.Item读取到父级尺寸后存入parentSize若自身未传sizesizeProp为undefined则回退使用父级值若显式传入则采用自身值。该行为被 src/List/test/ListItem.spec.tsx 的测试用例明确验证render( List sizelg List.Item index{1} sizesmSmall/List.Item List.ItemLarge/List.Item /List ); const items await screen.findAllByRole(listitem); expect(items[0]).to.have.attr(data-size, sm); // 单项覆盖父级 expect(items[1]).to.have.attr(data-size, lg); // 未设置时继承父级应用建议列表整体密度一致时只在List size...上设置一次即可需要突出或压缩某一行例如置顶的「加载更多」行、或需要缩小间距的分组行可在对应List.Item size...上单独覆盖从 src/List/test/List.spec.tsx 的测试可知List的默认档位是md——不传size时每个List.Item的data-size均为md。五、与size配合使用的相关属性size通常与列表的外观与交互属性搭配使用完整属性表见 docs/pages/components/list/en-US/index.md属性类型默认值说明borderedboolean为列表项显示边框根节点边框 单项内边距自动扩展dividerboolean(true)在列表项之间显示分隔线自 rsuite 5.75.0 起hoverboolean列表项悬停时显示背景色动画sortableboolean启用拖拽排序功能pressDelaynumber(0)按下后触发排序的延迟毫秒数transitionDurationnumber(300)排序动画时长毫秒autoScrollboolean(true)列表溢出时是否自动滚动样式层对bordered的处理值得注意当data-borderedtrue时列表项会增加左右内边距padding-inline-start/end: 20px而上下间距仍由data-size决定见 src/List/styles/index.scss因此bordered与size可以安全叠加使用。divider则通过border-top在相邻项之间绘制分隔线src/List/styles/index.scss。六、总结size是控制 rsuiteList列表密度的唯一入口取值lg / md / sm / xs默认md本质是修改列表项 20px / 13px / 8px / 2px 的垂直内边距通过SegmentedControluseState即可实现四种尺寸的实时切换是官方推荐的演示与交互方式单项List.Item的size优先于父级List未设置时自动继承这一优先级由 src/List/ListItem.tsx 的sizeProp || parentSize逻辑保证并有测试用例佐证尺寸通过data-size数据属性作用于 DOM与bordered、divider、hover、sortable等其他开关互不冲突。在实际项目中将size交给用户通过分段控件选择、或根据容器宽度按响应式断点动态赋值即可低成本实现「一种列表、多种密度」的灵活布局。赞分享前端UI组件【免费下载链接】rsuite A suite of React components .项目地址https://gitcode.com/gh_mirrors/rs/rsuite点击查看免费下载相关推荐RSUITE DateRangePicker 尺寸设置详解size 属性的 lg/md/sm/xs 用法与底层实现RSUITE DateRangePicker 尺寸设置详解size 属性的 lg/md/sm/xs 用法与底层实现 DateRangePicker 是 rsu前端UI组件rsuite InlineEdit 尺寸详解从 lg 到 xs 的四档规格与源码实现rsuite InlineEdit 尺寸详解从 lg 到 xs 的四档规格与源码实现 InlineEdit 是 rsuite 提供的一种就地编辑组件它让前端UI组件rsuite InputPicker 尺寸Size详解lg / md / sm / xs 的用法与实现原理rsuite InputPicker 尺寸Size详解lg / md / sm / xs 的用法与实现原理 本篇技术指南以 rsuite 官方文档 Inp前端UI组件上一篇Notepad--跨平台文本编辑器完整指南一键解决中文编码乱码下一篇Web Font Loader DOMHelper跨浏览器DOM操作的兼容性封装创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 rsuite List 组件 `size` 属性详解：从 xs 到 lg 的列表尺寸控制与源码实现
前端UI组件【免费下载链接】rsuite A suite of React components .项目地址https://gitcode.com/gh_mirrors/rs/rsuite点击查看免费下载rsuite 的List组件用于展示一组数据列表并支持拖拽排序。size属性是控制列表项紧凑程度的关键参数通过lg | md | sm | xs四个档位调节每一项的垂直内边距。本文以 docs/pages/components/list/fragments/size.md 的官方示例为主体结合 src/List/List.tsx、src/List/ListItem.tsx 及样式与测试源码完整讲解size的用法、取值、默认值与优先级规则并给出可复制的完整代码。一、size属性概述List与List.Item均提供size属性类型为lg | md | sm | xs默认值为mdlgLarge最大垂直间距适合作为页面主列表或需要视觉留白的场景mdMedium默认档位常规业务列表的推荐选择smSmall紧凑布局适合信息密度较高的列表xsExtra Small最紧凑档位适合工具条、筛选面板等空间受限的场景。对应文档表格见 docs/pages/components/list/en-US/index.mdPropertyType(Default)DescriptionsizeListlg \| md \| sm \| xs(md)Defines the size of the list itemssizeList.Itemlg \| md \| sm \| xs(md)Defines the size of the individual list item两者的区别在于作用域在List上设置size会统一下发到所有List.Item在单个List.Item上设置size则只覆盖当前项。二、官方示例用SegmentedControl动态切换尺寸官方文档 size.md 给出的完整示例通过SegmentedControl分段控制器让用户在四种尺寸间即时切换是演示size效果最直观的方式import { List, SegmentedControl } from rsuite; const data [Roses are red, Violets are blue, Sugar is sweet, And so are you]; const App () { const [size, setSize] React.useState(sm); return ( SegmentedControl data{[ { value: xs, label: Extra Small }, { value: sm, label: Small }, { value: md, label: Medium }, { value: lg, label: Large } ]} value{size} onChange{setSize} / hr / List size{size} {data.map((item, index) ( List.Item key{index} index{index} {item} /List.Item ))} /List / ); }; ReactDOM.render(App /, document.getElementById(root));要点拆解状态驱动size通过React.useState(sm)管理SegmentedControl的onChange{setSize}将选中的档位回写状态List size{size}随之重渲染——这正是 rsuite 受控组件的一贯用法List.Item的index属性示例中为每一项传入了index{index}。虽然尺寸演示本身不要求但该属性在启用sortable拖拽排序时是必需的官方文档注明 indexof List.Item is required建议在列表场景中始终提供data数组与key使用数组map渲染时每个List.Item都应以唯一标识作为key。三、尺寸的样式实现内边距差异来自哪里size不会改变列表项的内容排版或字体大小它控制的是每一项的垂直内边距。实现位于 src/List/styles/index.scss.rs-list-item { [data-sizelg] { padding-top: 20px; padding-bottom: 20px; } [data-sizemd] { padding-top: 13px; padding-bottom: 13px; } [data-sizesm] { padding-top: 8px; padding-bottom: 8px; } [data-sizexs] { padding-top: 2px; padding-bottom: 2px; } }四个档位的上下内边距依次为20px / 13px / 8px / 2px档位越低列表越紧凑。这一设计让同一个列表结构只需切换size即可适配不同页面的密度要求无需重写样式。从 src/List/ListItem.tsx 可以看到尺寸档位最终通过data-size数据属性落到 DOM 上Box as{as} rolelistitem aria-disabled{disabled} >const { bordered, register, size: parentSize } useContext(ListContext); const size sizeProp || parentSize;父级List通过 src/List/ListContext.tsx 中的ListContext.Provider把{ bordered, size, register }下发给所有子项见 src/List/List.tsxList.Item读取到父级尺寸后存入parentSize若自身未传sizesizeProp为undefined则回退使用父级值若显式传入则采用自身值。该行为被 src/List/test/ListItem.spec.tsx 的测试用例明确验证render( List sizelg List.Item index{1} sizesmSmall/List.Item List.ItemLarge/List.Item /List ); const items await screen.findAllByRole(listitem); expect(items[0]).to.have.attr(data-size, sm); // 单项覆盖父级 expect(items[1]).to.have.attr(data-size, lg); // 未设置时继承父级应用建议列表整体密度一致时只在List size...上设置一次即可需要突出或压缩某一行例如置顶的「加载更多」行、或需要缩小间距的分组行可在对应List.Item size...上单独覆盖从 src/List/test/List.spec.tsx 的测试可知List的默认档位是md——不传size时每个List.Item的data-size均为md。五、与size配合使用的相关属性size通常与列表的外观与交互属性搭配使用完整属性表见 docs/pages/components/list/en-US/index.md属性类型默认值说明borderedboolean为列表项显示边框根节点边框 单项内边距自动扩展dividerboolean(true)在列表项之间显示分隔线自 rsuite 5.75.0 起hoverboolean列表项悬停时显示背景色动画sortableboolean启用拖拽排序功能pressDelaynumber(0)按下后触发排序的延迟毫秒数transitionDurationnumber(300)排序动画时长毫秒autoScrollboolean(true)列表溢出时是否自动滚动样式层对bordered的处理值得注意当data-borderedtrue时列表项会增加左右内边距padding-inline-start/end: 20px而上下间距仍由data-size决定见 src/List/styles/index.scss因此bordered与size可以安全叠加使用。divider则通过border-top在相邻项之间绘制分隔线src/List/styles/index.scss。六、总结size是控制 rsuiteList列表密度的唯一入口取值lg / md / sm / xs默认md本质是修改列表项 20px / 13px / 8px / 2px 的垂直内边距通过SegmentedControluseState即可实现四种尺寸的实时切换是官方推荐的演示与交互方式单项List.Item的size优先于父级List未设置时自动继承这一优先级由 src/List/ListItem.tsx 的sizeProp || parentSize逻辑保证并有测试用例佐证尺寸通过data-size数据属性作用于 DOM与bordered、divider、hover、sortable等其他开关互不冲突。在实际项目中将size交给用户通过分段控件选择、或根据容器宽度按响应式断点动态赋值即可低成本实现「一种列表、多种密度」的灵活布局。赞分享前端UI组件【免费下载链接】rsuite A suite of React components .项目地址https://gitcode.com/gh_mirrors/rs/rsuite点击查看免费下载相关推荐RSUITE DateRangePicker 尺寸设置详解size 属性的 lg/md/sm/xs 用法与底层实现RSUITE DateRangePicker 尺寸设置详解size 属性的 lg/md/sm/xs 用法与底层实现 DateRangePicker 是 rsu前端UI组件rsuite InlineEdit 尺寸详解从 lg 到 xs 的四档规格与源码实现rsuite InlineEdit 尺寸详解从 lg 到 xs 的四档规格与源码实现 InlineEdit 是 rsuite 提供的一种就地编辑组件它让前端UI组件rsuite InputPicker 尺寸Size详解lg / md / sm / xs 的用法与实现原理rsuite InputPicker 尺寸Size详解lg / md / sm / xs 的用法与实现原理 本篇技术指南以 rsuite 官方文档 Inp前端UI组件上一篇Notepad--跨平台文本编辑器完整指南一键解决中文编码乱码下一篇Web Font Loader DOMHelper跨浏览器DOM操作的兼容性封装创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考