创建门户组件

最近更新时间:2019-08-08 11:12:58

通过创建门户组件,可以配置不同形式的门户组成部分,包括网格组件、标签组件、堆栅组件。
用户可以将这些组件放在门户的导航栏、侧边栏,或者作为门户的页面内容,完成一个门户首页。接下来将为您详细介绍各种门户组件的常见方法。

网格组件

创建网格组件

本产品支持两种方法来创建网格组件。

  1. 单击门户首页的网格组件图标。
  2. 在【新建】的下拉选项中选择网格组件。

向网格组件添加内容

可以拖拽仪表盘,门户组件,网页到网格组件的网格内。从左侧的仪表盘/行业案例/门户案例文件夹中拖拽销售情况到网格组件内,如图所示:

网格组件单元格默认显示为2行2列,网格组件上显示如图所示:

右键菜单

通过右键菜单操作对网格组件进行编辑,右键菜单如图所示:

  1. 隐藏标题
    隐藏仪表盘或门户组件的标题,或网页的网址。隐藏仪表盘销售情况的标题,如图所示:
  2. 固定/悬浮工具栏
    固定/悬浮工具栏属性只在门户组件内绑定仪表盘时显示。默认为悬浮状态。固定工具栏,如图所示:
  3. 自适应类型这个属性只在门户组件内绑定仪表盘时显示。这个属性控制仪表盘在组件单元格内的自适应类型。默认显示为自动,自适应类型如图所示:

    选择自适应类型为不自适应,仪表盘显示如图所示:
  4. 移动单元格
    用来调整单元格的位置。将绑定仪表盘销售情况的单元格下移,如图所示:

    网格组件上显示如图所示:
  5. 添加行/列,删除行/列
    用来添加或删除网格组件内的单元格。在选定的单元格上右键选择添加/删除单元格的行/列。在绑定仪表盘的单元格下方添加一行,如图所示:

    网格组件上显示如图所示:

    删除组件上右侧的这一列单元格,如图所示:

    网格组件上显示如图所示:
  6. 属性
    设置整个组件的背景色和填充距离。填充距离为仪表盘、门户组件、网页距离单元格上下左右边框的距离。
    设置背景色为蓝色,单元格填充距离都为10px,如图所示:

    网格组件上显示如图所示:
  7. 清空
    清空单元格里绑定的数据。选择绑定数据的单元格,右键单击清空,如图所示:

标签组件

创建标签组件

本产品支持两种方法来创建标签组件。

  1. 单击门户首页的标签组件图标。
  2. 在【新建】的下拉选项中选择标签组件。

向标签组件添加内容

可以拖拽仪表盘、门户组件、网页到标签组件内。从左侧的门户组件文件夹下拖拽门户组件 Grid1-1 到标签组件内,如图所示:

门户组件在标签组件上的显示,如图所示:

数据区右键菜单

通过右键菜单操作对标签组件进行编辑。右键菜单如图所示:

  1. 隐藏标题
    隐藏仪表盘或门户组件的标题,或网页的网址。隐藏组件的标题 Grid1-1,如图所示:
  2. 清空
    清空当前选项的数据。如图所示:

标签属性

增加/删除选项

单击选项后的【+】图标,可以增加选项。悬浮在标签上的【X】图标可以删除当前选项。如图所示:

当选项太多时,通过【<】、【>】来进行选择。如图所示:

右键菜单

通过右键菜单操作对标签组件的标签进行编辑。组件有多个选项时,标签菜单如图所示:

  • 向前/向后移动
    在选项2上右键,单击向前移动,即选项1和选项2交换位置。如图所示:

    若选项2向后移动,即选项2和选项3交换位置。
  • 标签样式
    标签样式可以设置选中标签与未选中标签的字体,颜色。标签样式对话框如图所示:

    设置标签的字体和颜色后,标签显示如图所示:

堆栈组件

创建堆栈组件

本产品支持两种方法来创建堆栈组件。

  1. 单击门户首页的堆栈组件图标。
  2. 在新建按钮的下拉选项中选择堆栈组件。

向堆栈组件添加内容

可以拖拽仪表盘、门户组件、网页到堆栈组件内。从上方的工具栏里拖拽网页图标到堆栈组件内,如图所示:

弹出网页对话框,在输入框里输入网址,如图所示:

堆栈组件上网址的显示如图所示:

数据区右键菜单

通过右键菜单及属性栏操作对堆栈组件进行编辑。如图所示:

隐藏标题

隐藏仪表盘或门户组件的标题,或网页的网址。隐藏网页的网址,如图所示:

编辑网址

用来修改网址。弹出网页对话框,如图所示:

清空

清空绑定的数据。如图所示:

标签属性

增加/删除选项

单击选项后的【+】图标,可以增加选项。悬浮在标签上的【X】图标可以删除当前选项。如图所示:

堆栈组件界面上最多支持显示15个选项,选项更多时,通过堆栈样式【<】、【>】来进行选择。如图所示:

向前/向后移动

在鼠标拖动当前选项选择向前/向后移动。如图所示:

例如选项1和选项2,选项2向前移动,即选项1和选项2的内容交换,选项1的网址交换到选项2里,但是选项顺序依然升序排列。
若选项2向后移动,即选项2和选项3交换数据。

堆栈样式


单击堆栈样式后弹出堆栈样式对话框,可选择堆栈图标的样式。如图所示:

选择第2种样式,显示如图所示:

堆栈组件显示

为了是门户首页外观更加美观,使用更加方便,将堆栈组件在门户组件和门户样式的显示做了处理。堆栈组件在标签组件里的显示,如图所示:

堆栈样式显示在中间,而选项的圆点显示在下方,可以通过单击堆栈样式和下方的圆点来切换选项。