• EN

如何通过页面设计器实现特色主题构建

作者:eteams2023-08-31 13:59

1.     场景说明:

为了满足行业对主题效果的不同需求,页面设计器通过自身优势,新增主题有关组件,实现0代码搭建特色主题。管理员在页面设计器中通过拖拽主题组件,设置页面布局等,即可构建出符合行业特色的主题。


展示效果如下图所示:



2.     功能简介:

在界面主题管理中选择特色主题并新建,开发方式选择页面设计器;可直接进入页面设计器进行主题设计,也可以选择先保存主题后续再进行设计;支持设置适用范围以及适用范围中禁止,达到主题权限管理的效果;

进入页面设计器后是默认的主题布局以及主题组件,我们可根据自己的需求调整页面布局以及组件属性和样式;主题中的组件元素有:企业log导航栏菜单用户账号导航模块页面


1、企业log: 主要用于团队切换或者快捷菜单显示;

2、导航栏菜单:快捷菜单、服务中心、待办事项等快捷图标显示;

3、用户账号:显示登陆用户信息、可选择只显示头像或者头像加用户其他信息等;同样也支持配置团队切换或者快捷菜单;

4、导航菜单:可自定义配置链接地址跳转到其他页面,也可选择系统数据,搭配显示类型,自动获取系统菜单,实现跳转;

5、模块页面:用于展示导航菜单跳转内容


3.     操作说明:

(1)  新增特色主题选择开发方式为“页面设计器“,可直接进入页面设计器进行主题设计,也可以选择先保存主题后续再进行设计



(2)进行主题设置

    ① 页面属性:因为整体主题明显分割为三部分,所以我们布局选择为左中右;设置布局之后根据需求设置左、中、右边栏的行间距、列间距、背景色或背景图片;同时可以对整体页面进行样式设置,背景色或者内外边距等



    ② 左边栏设置:


        1、用户账号:主要用来设置登陆用户信息,设置为显示头像、显示用户信息,用户信息选择显示组织;开启显示操作按钮,展开内容选择组织切换,用户切换团队;对齐方式选择居左

   


        2、导航菜单:主要用来实现页面跳转,设置内容来源为系统数据,显示类型设置为下级菜单,通过样式设置选则组件样式以及设置导航菜单默认、选中、悬浮的文字、颜色、背景色等

   


     ③ 中间栏设置:


        1、添加容器将导航菜单、全局搜索、导航栏菜单、企业log组件进行精准分布;其中导航菜单选择内容来源为系统数据,显示类型设置为一级菜单,和左侧的下级菜单实现联动;全局搜索主要实现系统数据快捷搜索;导航栏菜单展示系统内置的快捷菜单,点击即可实现跳转,根据需求进行显示设置;企业log我们设置展开内容为快捷菜单,实现点击企业log选择个人设置、通讯录等页面跳转


        2、将模块页面拖拽到容器下方,实现导航菜单跳转内容展示



      ④ 右边栏设置:添加容器将日历和导航面板精准分布;其中日历主要实现快捷添加日程,可通过属性和样式设置日历组件的背景色个大小;导航面板通过配置链接地址实现页面跳转




     ⑤启用主题


         1、开启启用,设置使用范围以及使用范围内禁用,达到主题权限管理的效果;


         2、设置系统主要按钮颜色以及聊天气泡区颜色,主要按钮颜色:统中各界面主按钮颜色,包括侧边栏菜单收缩展开按钮的颜色;聊天气泡区颜色:主要指工作消息发送内容背景颜色




Download Log in Enable for free

Scan with WeChat to register and install

在线咨询
  • WeCom service group

    另存
  • Pre-sales consultant

    另存
  • QQ group

    413040701

    Join

Follow us

021-50388680

sales@eteams.cn

Live