下载掌阅APP，畅读海量书库
立即打开
安装dashboard节点后，在编辑器右侧边栏中会出现一个dashboard选项卡。这里可完成dashboard的基础设置，如图2-8所示。
单击进入dashboard选项卡，你将看到dashboard的基础设置界面，如图2-9所示。
图2-8 dashboard选项卡
图2-9 dashboard的基础设置界面
dashboard的基础设置界面分为3个部分：Layout（布局）、Site（站点）、Theme（主题）。
Layout下为Tabs&Links。
· Tabs：标签组，在这里你可以重新排序Tab（标签）、Group（组）和Widget（小部件），并添加和编辑它们的属性。
标签可以理解为网页。一个标签就是一个页面，一个页面上可以放多个组，一个组中可以放多个小部件，如图2-10所示。
图2-10 dashboard的Layout选项卡
当鼠标悬停在“标签”上，你还可以打开布局工具（layout）。该工具可以支持你使用鼠标拖曳的方式更轻松地组织小部件，具体操作方式如图2-11所示。
图2-11 布局工具
打开的布局工具如图2-12所示。
图2-12 dashboard的布局工具
· Link：链接，其他网页的链接也可以添加到菜单中，可以选择在iframe中打开，设置界面如图2-13所示。
图2-13 Layout选项卡中的Link
访问UI的效果如图2-14所示。
图2-14 Dashboard显示界面
· Title：标题，支持设置UI页面的标题。
· Options：选项，支持选择隐藏标题栏，并允许在触摸屏上的选项卡之间横向滑动，也支持设置模板是使用选定的主题还是使用底层的Angular Material主题，还支持选择在任何地方使用Angular Material主题。
· Date Format：日期格式，支持设置图表和其他标签的默认日期格式。
· Sizes：大小，支持以像素为单位设置网格布局的基本几何形状，支持设置小部件的宽度和高度，也支持设置组的间隙宽度和边宽，如图2-15所示。
图2-15 Site选项卡中Sizes设置界面
Style：样式，支持设置UI的样式主题和字体。你可以选择默认的浅色、深色或自定义样式主题。每个选项卡不能有不同的样式主题。
如果你愿意，你也可以选择使用基本的Angular Material主题，无论在ui_templates还是在整个dashboard中。它只会影响默认的dashboard组件，因此一些图表组件还需要额外的处理。
对于自己创建模板的用户，你可以使用以下CSS变量来选择主题颜色。
