关于数据可视化:零起点入门教程用宜搭简单布局一个首页

39次阅读

共计 1574 个字符,预计需要花费 4 分钟才能阅读完成。

简介:【零起点入门系列教程】将会带给大家从业务视角登程由浅入深地学习用宜搭实现利用搭建。即使是没有任何代码根底的老手只有跟着系列课程,从 0 开始缓缓修炼,也能找到胜利搭建利用的乐趣。明天第五讲,如何用宜搭简略布局一个首页。

【零起点入门系列教程】将会带给大家从业务视角登程由浅入深地学习用宜搭实现利用搭建。即使是没有任何代码根底的老手只有跟着系列课程,从 0 开始缓缓修炼,也能找到胜利搭建利用的乐趣。明天第五讲,如何用宜搭简略布局一个首页。

如何布局首页?

咱们以“企业综合防疫”为例,给大家分步教学,如何用宜搭进行首页布局。

首先,拜访宜搭首页,在模板核心找到“企业综合防疫计划”利用,点击并启用此利用,给利用命名并且抉择“保留示例数据”。创立结束之后会主动跳转到该利用的后盾治理。

从后盾治理页面能够看到很多类型的页面,其中蕴含了咱们之前没有见过的页面类型,它后面的图标是一个黄色的窗口,代表的是一个自定义页面,在“新建页面”看到有“新建自定义页面”这个选项。

自定义页面次要是给利用提供一些门户或者作为以后利用的首页。咱们能够在下面搁置一些业务拜访入口,或者在这个页面里提供一些资讯信息提供用户去查阅。

能够看到以后这些页面没有提交按钮,同时也没有数据管理,也就是意味着它只是作为一个展现类的作用,并不是用于提交数据或发动流程。咱们能够利用它来做一些首页,并且这些页面外部也提供了很多丰盛的前端组件。

通过首页进入到表单设计器内,从“纲要树”能够看到整个页面的布局。从“页面内容”外面能够看到以后页面放了两个轮播图组件。

下方会有一个“容器”,它的次要性能是提供了一个区域,在这个区域外面会蕴含各种业务页面的拜访入口。在“容器”上面还有“布局容器”,“布局容器”次要的作用是把以后容器内的一些内容分成了等比例的构造。点击“布局容器”,在“布局容器”的右侧能够看到个“列比例”,它将整个容器分成了 6:6:6:6:6:6 的构造。

实际上咱们在前端设计的时候,把咱们这一个页面的一行实际上是把它定义成了 12 个价格,就 12 格 12 个格子,而后咱们将咱们以后这一行如果设置为 6:6 的时候,它就会出现一个左右等比的这样一个状态。

同样的布局容器上面会蕴含小的布局,外面会有一个“分组”,“分组”外面有“链接块”,它的作用是用于链接跳转,相当于限定的区域,当用户点击这个区域会跳转到链接块。“链接块”组建外面提供了一些图片和文本。图片对应的是图标,文本对应的是题目。

在明天的教程中,咱们其实用到了多个报表组件。报表组件包含 根底、布局、筛选和图表四类组件,其中:“根底”和“布局”类组件能够在画布的数据筛选与出现区域均可应用;“筛选”类组件只能在画布数据筛选区域应用;“图表”和“其余”类组件只能在画布数据出现组件区域应用。

  • 布局容器:是一种有「布局」能力的容器,咱们最常见的是线性程序布局,即页面自上而下,顺次排列。但理论页面设计与实现时,出了线性布局,经常还会遇到 绝对布局、相对布局、弹性布局等诉求。
  • 链接块:是一个容器类型组件,点击该容器内任意元素,都会触发跳转链接
  • 分组:一个官网举荐的区块管理器,用于将性能能力类似的模块,内聚在一个分组中。
  • 布局:是对已有的可视化组件的地位摆放管制,对应英语动词 layout,示意了一种动作。
  • … …

在下一讲中,咱们将针对企业疫情防控场景,教会大家从表单设计——首页布局——数据查看的全链路利用设计

\>>>> 第五讲具体步骤,点击收看视频版课程

版权申明: 本文内容由阿里云实名注册用户自发奉献,版权归原作者所有,阿里云开发者社区不领有其著作权,亦不承当相应法律责任。具体规定请查看《阿里云开发者社区用户服务协定》和《阿里云开发者社区知识产权爱护指引》。如果您发现本社区中有涉嫌剽窃的内容,填写侵权投诉表单进行举报,一经查实,本社区将立即删除涉嫌侵权内容。

正文完
 0