ListPage

低代码页面设计器的列表区块:以骨架占位呈现一组列表项,条数由 PageBlock 配置驱动。

最后更新

说明

与 TablePage / ChartPage 同属可插拔的叶子区块,注册在 PageComponents 表下、键为 "list"(改类名不影响已发布页面 JSON)。组件不接业务数据,仅按 Block.Settings 的 count 键渲染相应数量的占位条目(缩略图 + 双行文本骨架),缺省或非法回退为 4 条,小于 0 视为不显示。Design 为真且未配置条数时给出「列表区块 · 在右侧属性里设置条数」的引导,运行态无条数时显示空态。真实内容由生成后的业务页各自填充,本组件承担画布与运行时「所见即所发」的呈现。样式集中在框架 web.css 的 .pg-list 段,随 data-theme 明暗自动切换。

常见能力:

  • 按 PageBlock.Settings 的 count 键渲染对应数量的占位条目
  • 缩略图 + 双行文本骨架,缺省回退 4 条
  • 设计态给出设置条数的引导、运行态空数据给空态
  • 经 PageComponents 注册表按键 list 引用,与已发布页面 JSON 解耦
  • 文本本地化、样式随 data-theme 明暗切换

用法

@* 通常经 PageRenderer 渲染;这里直接给一个列表区块 *@
@{ var block = new PageBlock
{
    Component = "list",
    Title = "最新动态",
    Settings = { ["count"] = "5" },
}; }

<ListPage Block="block" Design="false" />

API 参数

参数 类型 默认值 说明
Block PageBlock PageBlock 区块数据(条数来自 Settings["count"])。
Design bool false 是否设计态。

所有组件均继承 BaseComponent,除上表参数外还支持 Class、Style、Disabled、Visible。

微信公众号二维码 扫码关注公众号
QQ 交流群二维码 扫码加入 QQ 群