优维低代码:页面标题

EASYOPS_youwei · · 841 次点击 · · 开始浏览    

 

 

优维低代码技术专栏,是一个全新的、技术为主的专栏,由优维技术委员会成员执笔,基于优维7年低代码技术研发及运维成果,主要介绍低代码相关的技术原理及架构逻辑,目的是给广大运维人提供一个技术交流与学习的平台。

连载第二十九期

《高级指引:页面标题》

这里的页面标题有两个含义,一个是页面内容中显示的标题,另一个是浏览器标签页的标题。

# 示例一

如果想要在页面中加入标题,可以配置 basic-bricks.micro-view 的 pageTitle 属性。

bricks:
  - brick: "basic-bricks.micro-view"
    properties:
      pageTitle: "主机管理"

如果期望使用更复杂的标题 UI,可以使用自定义标题构件,并放置在 basic-bricks.micro-view 的 titleBar 插槽中。

bricks:
  - brick: "basic-bricks.micro-view"
    slots:
      titleBar:
        type: "bricks"
        bricks:
          - brick: "your-page-title-brick"
            properties:
              pageTitle: "Your Page Title"

这样就可以在页面主体内容左上角显示标题,并同步更新浏览器标签页的标题。

# 示例二

部分页面不会在页面中显示标题,但仍应设置浏览器标题,此时可以使用基础构件 basic-bricks.page-title 并设置属性 hidden: true。

  • 提示

hidden 是 HTMLElement 的原生属性,参见 MDN - HTMLElement.hidden。

brick: "basic-bricks.page-title"
properties:
  pageTitle: "搜索"
  hidden: true

另可使用原 menu.pageTitle 获得相同效果(页面顶栏将不再显示标题)。

path: "/ci/history/:id"
menu:
  pageTitle: "构建详情"

# 示例三

在 storyboard.json 中只能配置静态的标题,如果想配置来自动态数据的标题,需要编写构件或使用 useResolves。可参考 basic-bricks.page-title 实现动态标题构件。


有疑问加站长微信联系(非本文作者)

入群交流(和以上内容无关):加入Go大咖交流群,或添加微信:liuxiaoyan-s 备注:入群;或加QQ群:692541889

841 次点击  
加入收藏 微博
添加一条新回复 (您需要 登录 后才能回复 没有账号 ?)
  • 请尽量让自己的回复能够对别人有帮助
  • 支持 Markdown 格式, **粗体**、~~删除线~~、`单行代码`
  • 支持 @ 本站用户;支持表情(输入 : 提示),见 Emoji cheat sheet
  • 图片支持拖拽、截图粘贴等方式上传