amis 列表样式工具类 list-none / list-disc / list-decimal 使用指南

amis 列表样式工具类 list-none / list-disc / list-decimal 使用指南【免费下载链接】amis前端低代码框架通过 JSON 配置就能生成各种页面。项目地址: https://gitcode.com/GitHub_Trending/am/amis在 amis 低代码框架中通过 JSON 配置即可生成页面但某些细节样式如列表的圆点、序号标记往往需要借助原子化工具类Utility Class来快速完成。本文聚焦于 amis-ui 内置的列表样式工具类list-none、list-disc、list-decimal控制列表标记类型以及list-inside、list-outside控制标记位置说明它们的语义、SCSS 实现原理、响应式变体用法以及在 amis 页面中通过className等配置项落地的具体方式。读完本文你将能直接在 amis 的 JSON Schema 中运用这套类名快速定制列表呈现效果。类名与属性速查表列表样式工具类全部定义在 packages/amis-ui/scss/helper/typography/_list-style-type.md 文档中共 5 个类分为“标记类型”与“标记位置”两组ClassPropertieslist-nonelist-style-type: nonelist-disclist-style-type: disclist-decimallist-style-type: decimallist-insidelist-style-position: insidelist-outsidelist-style-position: outside标记类型list-style-typedisc为实心圆点ul默认样式decimal为十进制数字序号ol默认样式none用于去掉任何标记实现“无符号列表”。标记位置list-style-positioninside使标记位于文本内容内部标记跟随文本换行缩进outside使标记位于内容框外部默认行为。这两组属性分别对应 CSS 的list-style-type与list-style-position组合使用时即可覆盖绝大多数列表样式需求例如classlist-none list-inside表示去掉标记并让内容紧凑排列。SCSS 源码实现原理这些工具类并非手写死样式而是由 packages/amis-ui/scss/helper/typography/_list-style-type.scss 中的两个 Sass mixin 循环生成的mixin make-list-style-type($prefix: .) { each $name, $value in (none: none, disc: disc, decimal: decimal) { #{$prefix}list-#{$name} { list-style-type: $value; } } } mixin make-list-style-position($prefix: .) { each $name, $value in (inside: inside, outside: outside) { #{$prefix}list-#{$name} { list-style-position: $value; } } }make-list-style-type遍历(none: none, disc: disc, decimal: decimal)映射表逐一生成list-none、list-disc、list-decimal三个类make-list-style-position遍历(inside: inside, outside: outside)生成list-inside、list-outside两个类。文件顶部有一段/*!markdown ... */注释块内容与 _list-style-type.md 完全一致——说明该 Markdown 文档是由 SCSS 源码中的注释自动提取生成的helper.scss 通过import ./helper/typography/list-style-type引入此模块同时整个 helper 工具类体系均按此模式组织。这意味着文档与实现同源类名、属性和取值在编译后一一对应不会出现文档与样式脱节的情况。工具类体系如何被加载list-*系列只是 amis-ui 工具类体系helper中的一员。helper.scss 汇总导入了背景、边框、布局、弹性盒、排版typography等全部工具类模块排版模块中还包含font-size、text-align、font-weight、line-height等兄弟工具类。因此只要项目引入了 amis-ui 编译产物如amis.csslist-none等类名即可直接使用无需额外引入任何依赖。响应式变体m: 与 pc: 前缀在基础类之外SCSS 文件还利用 amis-ui 的断点体系生成了响应式变体each $deivce in map-keys($devices) { include media-device($deivce) { include make-list-style-type(. selector-escape($deivce :)); include make-list-style-position(. selector-escape($deivce :)); } }其含义是针对$devices映射中的每个设备名把前缀作为类名的一部分如m:list-disc、pc:list-disc并包裹在对应的媒体查询中。其中断点定义在 packages/amis-ui/scss/_variables.scssm对应(max-width: 768px)移动端pc对应(min-width: 769px)桌面端media-devicemixin 实现在 packages/amis-ui/scss/_mixins.scss将设备名映射为具体媒体查询后包裹内容selector-escape函数定义在 packages/amis-ui/scss/_functions.scss负责转义类名中的.、:、/字符例如.m:list-disc中的冒号必须转义为\:才能被 CSS 解析器正确识别。因此最终产物中每个基础类都会额外生成m:与pc:两个响应式变体例如.list-disc全端生效.m:list-disc仅在max-width: 768px移动端生效.pc:list-disc仅在min-width: 769px桌面端生效。文件末尾的注释// hover ?表明当前尚未实现hover:等状态变体属于预留扩展点使用时应避免依赖不存在的类名。在 amis 页面中的实际用法amis 组件普遍支持className配置项部分容器还支持headerClassName、bodyClassName等细分类名这套工具类正是通过它们落地的。以 docs/zh-CN/concepts/style.md 中介绍的样式定制思路为例先查阅组件文档确认其支持className再在 JSON 配置中直接传入工具类名即可例如{ type: panel, title: 产品清单, body: { type: html, html: ul class\list-none\li项目 A/lili项目 B/li/ul } }若列表由 amis 渲染输出如通过tpl或组件内部模板同样只需在 HTML 模板的ul/ol/li上追加工具类{ type: html, html: ol class\list-decimal list-inside\li第一步初始化/lili第二步配置 Schema/li/ol }这里list-decimal为列表添加数字序号list-inside让序号跟随文本换行、排版更紧凑。对于table、each等批量渲染场景也可以在itemClassName或模板字符串中复用这些类名实现无 JS、纯配置的列表样式控制。常见组合场景去符号列表list-none配合自定义间距如 spacing 工具类m-0、p-0常用于导航菜单、标签云等需要“无点列表”的布局有序步骤list-decimal list-outside生成带外部数字序号的步骤说明保持默认换行缩进响应式调整桌面端显示数字序号、移动端隐藏标记可写成classlist-decimal m:list-none利用响应式变体在不同断点自动切换样式。小结list-none/list-disc/list-decimal/list-inside/list-outside是 amis-ui 提供的 5 个轻量列表工具类覆盖了 CSS 列表标记的类型与位置控制其实现由 _list-style-type.scss 中的 Sass mixin 循环生成并随$devices断点体系自动产出m:与pc:响应式变体文档则同源生成于 SCSS 注释。在 amis 的 JSON Schema 中只需将类名写入组件className或模板 HTML即可在不编写额外 CSS 的前提下完成列表外观定制。【免费下载链接】amis前端低代码框架通过 JSON 配置就能生成各种页面。项目地址: https://gitcode.com/GitHub_Trending/am/amis创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考