title:
order: 4

category: 进阶指南

特性介绍

Iceland 是一个搭建产品，帮助搭建者基于丰富的物料快速拖拽出想要的区块，重新定义前端区块搭建流程，使区块搭建更加智能化。

产品集成了海量高质量物料，全程可视化搭建，代码一键生成，区块一键导入页面等特性，提供了区块搭建的全新解决方案。

产品目前还处于测试阶段，我们将持续倾听用户诉求，朝着搭建智能化的目标不断更新，如果使用过程中存在问题，请钉钉扫描最下方二维码加入飞冰交流群，随时向我们反馈。

快速开始

这部分将引导你通过 Iceland 快速搭建一个简单的区块，并通过 Iceworks 用它生成你的页面，使你快速体验到可视化搭建的魅力。

本文档只对搭建自定义区块到生成页面整个操作流程做一个简单的介绍，Iceland 的更多特性和用法，用户可以在实际使用中继续发掘。

新建区块

首先启动 Iceworks ，打开【区块】页面，选择【自定义区块】选项卡；

使用 Iceland 搭建自定义区块 - 图1

点击【新建自定义区块】，为区块命名，点击【创建区块】；

使用 Iceland 搭建自定义区块 - 图2

下载必要的物料数据后，弹出 Iceland 搭建页面。

使用 Iceland 搭建自定义区块 - 图3

添加选项卡

接下来让我们用 Iceland 搭建一个带搜索的选项卡区块，首先点击物料面板上的【组件】按钮，选择【选项卡】分类或在【搜索栏】搜索选项卡，将选项卡添加到画布；

使用 Iceland 搭建自定义区块 - 图4

通过拖拽或者调整属性面板的属性的方式，调整选项卡的宽度，接着点击图层面板中的【选项卡面板】图层，调整选项卡的高度，在【选项卡】图层的属性面板的【属性配置】中可以修改选项卡的标题。

使用 Iceland 搭建自定义区块 - 图5

进阶技巧：

  1. 觉得图层面板好多图层的名字都一样，分辨不清怎么办？

    答：双击图层面板里的图层可以对图层进行重命名

  2. 觉得调整属性好麻烦，只想靠拖拽解决一切怎么办？

    答：点击标尺可以设置参考线，用参考线辅助组件固定位置

添加输入框

接下来让我们添加输入框，首先在物料面板点击【组件】按钮，通过搜索或选择分类的方式找到【主要搜索框】组件，添加组件到画布中，在属性面板的【属性配置】中可以修改搜索框的内容；

使用 Iceland 搭建自定义区块 - 图6

可选步骤：

  1. 鼠标框选画布中的多个图层，或者 Cmd/Ctrl + 鼠标点击多选图层，通过右上角菜单面板的【群组】按钮将图层整合为一组；

进阶技巧：

  1. 有时添加组件到画布上，却点不到组件是为什么？

    答：可能是图层被覆盖住了，可以通过右上角菜单面板的【排序】按钮重排顺序；

接下来我们可以在物料面板的【图标】项添加 iconfont ，在【元件】面板添加富文本或其他内容，或调整组件颜色等方式美化完善我们的区块，这部分可根据自己需要进行，就不再演示了；

区块生成页面

点击【预览】按钮，可以查看我们的区块在前端展示的效果，点击【截图并保存】保存我们的区块；

使用 Iceland 搭建自定义区块 - 图7

关闭搭建页面，回到 Iceworks ，在生成页面界面选择我们的自定义区块，就可以将你自己搭建的区块转换成代码；

使用 Iceland 搭建自定义区块 - 图8

新特性-Table搭建

功能

  • 画布Editor可以进行删除与加减行列的操作
  • 可以选中单元格进入单元格搭建模式，单元格中可以添加任意复杂组件
  • 支持对每行的单元格中的组件进行差异化的属性配置，满足多样化的设计需求

画布Editor

使用 Iceland 搭建自定义区块 - 图9

  • 选中Table后会在Table显示一个操作层Editor，按区域划分分成四个区域
    • 表格选择区
      • 选中该区域时属性面板上显示Table的属性面板，在对Table自身的属性进行配置之外，还可以对整体的行列进行加减操作。

使用 Iceland 搭建自定义区块 - 图10

  • 列选择区
    • 选中该区域时点击右边的箭头展示配置menu，可以进行加减列操作，同时属性面板显示列对应的属性面板

使用 Iceland 搭建自定义区块 - 图11

使用 Iceland 搭建自定义区块 - 图12

  • 行选择区
    • 选中该区域时点击下边的箭头展示配置menu，可以进行加减行操作，同时属性面板显示行对应的属性面板，可以调整行高

使用 Iceland 搭建自定义区块 - 图13

使用 Iceland 搭建自定义区块 - 图14

  • 单元格选择区
    • 点击单元格选择区，进入单元格编辑模式，弹出一个黑色透明蒙层，可以从组件面板中添加组件到单元格中，点击蒙层时退出单元格编辑模式

使用 Iceland 搭建自定义区块 - 图15

注：单元格编辑模式中的一些联动说明

  • 在单元格中对组件进行删除操作时，会将同一行其他所有其他单元格中相应组件删除
  • 进行移动操作时，会改变同行中其他单元格的位置
  • 只有改变组件属性时不会影响到其他单元格

新特性-List搭建

功能介绍

  • List即列表组件是一类可以将数组类型的数据以平铺的形式展示出来的组件，是一类高频使用的组件，例如淘宝搜索页的List

使用 Iceland 搭建自定义区块 - 图16

交互

  • ICELAND提供的List搭建交互有以下特性：
    • 在一个列表项中的进行的大部分操作会在其他列表项中同步展示，包含新增、删除、移动、粘贴、resize、群组、排序、对齐、锁定等操作
    • 通过属性面板设置列表项中组件的属性时不会同步到其他列表项，这样允许用户对不同列表项作差异化的定制
    • 调整列表项的个数可通过属性面板加减，也可以通过选中某个列表项按delete键进行删除
    • 可通过属性面板调整一行展示的列表项个数

使用 Iceland 搭建自定义区块 - 图17

如果使用过程中遇到任何问题或者有对产品的建议，欢迎扫码加入答疑钉钉群向我们反馈：

使用 Iceland 搭建自定义区块 - 图18