import { Meta } from "@storybook/addon-docs";
import LinkTo from "@storybook/addon-links/react";
import hb1 from "../../assets/images/hb1.png";
import hb2 from "../../assets/images/hb2.png";
import hb3 from "../../assets/images/hb3.png";
import hb4 from "../../assets/images/hb4.png";
import hb5 from "../../assets/images/hb5.png";
import hb7 from "../../assets/images/hb7.png";
import hb8 from "../../assets/images/hb8.png";
import hb9 from "../../assets/images/hb9.png";
import hb10 from "../../assets/images/hb10.png";
import hb11 from "../../assets/images/hb11.png";
import hb12 from "../../assets/images/hb12.png";
import hb13 from "../../assets/images/hb13.png";
import hb14 from "../../assets/images/hb14.png";

<Meta title="编辑器/样式编辑" parameters={{ viewMode: "docs" }} />

# 样式编辑

通过星搭编辑器，用户可以无代码编辑页面样式

## 组件类型

星搭的组件可以分三种，分别是：

- `容器组件`：容器、区块、折叠面板 等组件
- `表单组件`：输入框、选择框 等组件
- `原子组件`：图片、视频、文本 等组件

### 容器组件

其中值得注意的是 `容器组件`，容器可以容纳其它的组件。选中容器，点击添加其它元素的时候，会自动添加到容器内。

<img src={hb1} />
<img src={hb2} />

### 组合

我们可以将两个组件组合起来，比如我们按住 `shift`（多选），点击选择一个按钮、一个文本组件，点击组合按钮。两个组件就被放到了一个分组里，这个分组本质上也是在两个组件外层套上了一个 `容器组件`。

<img src={hb3} />

### 布局方式

容器组件可以修改他的布局方式，星搭支持两种布局方式：

- `绝对布局`：用户可以自由决定容器内子组件的位置

- `流式布局`：根据方向设置，容器内组件自动排列

比如：当我们设置刚才的容器的布局方式为 `流式布局`，您会发现容器内所有的子元素都不能拖拽了

我们继续设置布局方向为水平的时候，我们可以看到，容器内的子元素都已水平的方式排列开

<img src={hb4} />

当我们修改 `布局方向` 为 `垂直` 的时候，子元素也垂直排列起来了

<img src={hb5} />

`调整内容` 和 `元素对其` 两个设置，可以帮助我们将元素 居中居左居右居上居下

### 区块组件

`区块` 是页面的一个段落，我们页面的直接子元素只能是一个个 `区块`。长的落地页会被拆分成一节节的区块。比如我们下面这个页面就是由四个区块组成

<img src={hb10} />

您可以对区块进行 `上移` `下移` 操作，区块也可以被保存为 `组件模版`，提供给后续页面使用

<img src={hb11} />

当您在设计页面的时候，将页面分割成一个个区块会帮助您很高效的进行操作

### 设置屏幕跟随

您可以对某一个组件设置屏幕跟随，这样您在滚动页面的时候，这个组件就会被固定在屏幕的某一个位置

<img src={hb12} />

通过设置跟随位置、侧边距、底边距，您可以自定义组件固定的位置

### 设置动画

<img src={hb5} />

可以通过 `动画面板` 实现动画设置。选择不同的动作类型，设置动画是否循环播放。

延迟时间：页面加载完成到动画开始播放的延迟时间，如动画设置为循环播放，那么也是每次动画播放的间隔时间
持续时间：动画每轮播放的持续时间

### 设置动作

<img src={hb7} />

可以通过动作面板为组件添加动作事件，如果为按钮添加点击事件，可以选择行为为 `点击` 动作为 `跳转页面`，输入要跳转的页面的 URL，即可实现按钮点击的时候执行该动作

    注意，为了编辑器中编辑的方便性，所以在编辑器中是没有动作执行的，可以在预览或者页面发布后查看动作设置的效果!

### 保存组件模版

您可以将已编辑好的组件保存为组件模版，点击浮动菜单的保存为模版按钮

<img src={hb8} />

您可以在左侧菜单-> 模版 -> 我的 里面看到保存的模版

<img src={hb9} />

### 保存页面模版

您可以在页面列表，选择 `页面 -> 保存模版`，将页面保存为页面模版。

<img src={hb13} />

点击新建页面按钮，切换到 `团队` 或 `我的` 面板，可以看到自己保存的模版信息，点击创建页面，会使用这个模版创建页面

<img src={hb14} />
