通过样式面板配置样式

使用说明

添加组件后您可以通过右侧的属性设置面板，直接对当前选中组件进行样式设置，实现零代码设计。

通过样式面板配置样式

1. 参考登录AstroPro界面中操作，登录AstroPro界面。
2. 在左侧导航栏中，选择“前端开发平台 > 前端应用”。
3. 单击待编辑应用模块内的“开发应用”，进入设计器。
4. 画布中选中组件，在组件属性设置面板选择“样式”。
5. 在样式面板中设置组件样式。
   • 布局：支持“block-块级布局”、“flex-弹性布局”、“grid-网格布局”、“inline-block-内联块级”、“inline-内联”和“eye-invisible-隐藏”六种形式，请按需选择。
     图1 设置布局
     
   • 间距：默认间距为0，可单击待设置的间距数值进行自定义修改。
     图2 设置间距
     
   • 尺寸：设置组件的宽高，溢出处理策略及适应方式。
     图3 设置尺寸
     
   • 定位：设置组件位置和大小如何计算方式。
     • 默认定位：没有特别的定位，组件的位置会按照正常的文档流进行布局。
     • 相对定位：组件的位置相对于它在文档流中的位置进行偏移。组件仍然占据原来的空间，不会影响其他元素的布局。
     • 绝对定位：组件的位置相对于最近的已定位祖先元素（如果没有已定位的祖先元素，则相对于初始包含块）进行偏移。组件不占据原来的空间，会从文档流中删除，并影响其他元素的布局。
     • 固定定位：组件的位置相对于浏览器窗口进行固定定位。组件不占据原来的空间，会从文档流中删除，并影响其他元素的布局。
     • 粘性定位：组件在滚动时“粘”在某个位置，直到达到某个条件才会离开这个位置。粘性定位可以让页面在滚动时保持某些组件的可见性。
     图4 设置定位
     
   • 文本：设置文本的字号、字体、行高、字重、颜色、对齐方式、风格及修饰。
     图5 设置文本
     
   • 背景：设置组件背景，背景图、渐变类型、颜色及裁剪方式。
     图6 设置背景
     
   • 边框：设置边框的位置、颜色、位置宽度以及是否为圆角。
     图7 设置边框
     
   • 效果：设置组件的透明度、轮廓样式及光标样式。
     图8 设置显示效果
     

6. 样式设置完成后，设计器会自动完成以下动作。
   1. 如果当前样式在选择器中没有选中任何一个类名或者ID，会自动生成随机类名。
   2. 将在样式面板设置完成的样式写入类名规则中。
      图9 样式写入到类名样式
      
   3. 将样式选择器自动生成或者选中的类名绑定到当前组件属性中。
      图10 属性设置面板