使用状态选择器

使用说明

在样式选择器右侧，我们还提供了一个状态选择器的下拉框。可以选择hover、focused、pressed、disabled等状态。选择之后，我们此时编辑样式面板，就是相当于在编辑该类名对应状态的样式。

操作步骤

1. 参考登录AstroPro界面中操作，登录AstroPro界面。
2. 在左侧导航栏中，选择“前端应用”。
3. 单击待编辑应用模块内的“应用开发”，进入设计器。
4. 画布中选中组件，在组件属性设置面板选择“样式”。
5. 在全局样式选择框中选择已有的类名或创建新类名，例如 .test，并设置全局样式，此时状态选择器默认为None。
6. 在状态选择器下拉框中选择状态，例如hover，并设置全局样式。

   从全局样式面板中可以看到，等效于直接编辑一下样式：

   .test:hover{   
   /**  这里会注入样式面板编辑的样式 */ 
   }

7. 查看CSS编辑页面，可见已存在 .test和 .test:hover两条样式记录。
8. 鼠标悬浮在组件上查看样式切换效果。