amis/state.md at 9abe783023f9f5b93de3acb11d96ecd9424e9cf0

test/amis

mirror of https://gitee.com/baidu/amis.git synced 2024-12-15 17:31:18 +08:00

SCSS 基于 CSS custom properties 重构，支持通过配置来控制展现风格 (#1190 )

* 使用自定义 css 属性初步，支持大部分组件的展现

* button 大部分可以看了

* cxd 和 dark 大部分正常

* 修复一些细节样式错误；补充 css 变量的文档

* 修复几个脚本发现的错误

* 完善一下注释

* 修复一些样式不一致问题

* 修复可能存在的 css xss

* 恢复 font-variant 功能

* 修复绝大部分 @if 相关的问题

* 恢复之前的注释

* 修复小错误，并将所有 background-color 改成 background，这样就能设置渐变色

* 修复 button group 在 cxd 下不一致问题

* 缩小查看配置和复制配置的宽度，留出更多空间

* 修复一些潜在的错误

* 恢复 utilities 中 label 背景色的设置

* 修复错误的 css 变量

* 补充 IE11 Variables Polyfill

2020-12-21 10:08:40 +08:00

2.6 KiB

Raw Blame History

title
辅助类 - 状态样式

除了给默认状态设置样式外，还支持几个特定状态的样式设置比如：hover（鼠标悬停）、active（当前选中）、focus（当前聚焦）或者 disabled（当前不可用）。

<button
  class="Button
  rounded-xl text-light
  bg-pink-400 border-pink-600
  hover:bg-pink-500 hover:border-pink-800
  active:bg-pink-600 active:border-pink-900"
>
  按钮示例
</button>

<button
  class="Button m-l-16
  rounded-xl text-light
  bg-pink-500 border-pink-800
  hover:bg-pink-500 hover:border-pink-800"
>
  悬停态
</button>

<button
  class="Button m-l-xs
  rounded-xl text-light
  bg-pink-600 border-pink-900
  hover:bg-pink-600 hover:border-pink-900"
>
  按下态
</button>

<button
  class="Button m-l-xs
  rounded-xl text-light
  disabled:text-dark disabled:bg-pink-200 disabled:border-pink-400"
  disabled
>
  禁用态
</button>

Hover

在 css 类名前面添加 hover: 表示在 hover 时启用这个样式比如。

<button
  class="Button
  text-blue-500
  hover:text-red-500"
>
  蓝色按钮，hover 红色
</button>

Group-Hover

当 hover 某个元素的时候，你想要给子元素设置不同的样式，需要两步操作。

给容器添加 group 类名。
给子元素添加 group-hover: 前缀形式的样式类。

<div
  class="group p-4 border border-solid border-dark
  hover:bg-dark"
>
  <p class="group-hover:text-red-500">整体hover 红色</p>
  <p class="group-hover:text-green-500">整体hover 绿色</p>
</div>

Focus

当要给元素设置「聚焦态」样式时，类名添加 focus: 前缀。

<button
  class="Button
  text-blue-500
  focus:border-dark
  focus:text-red-500"
>
  蓝色按钮，focus 红色
</button>

Active

当要给元素设置「选中态」样式时，类名添加 active: 前缀。

<button
  class="Button
  text-blue-500
  active:border-dark
  active:text-red-500
  is-active"
>
  蓝色按钮，active 红色
</button>

Disabled

当要给元素设置「禁用态」样式时，类名添加 disabled: 前缀。

<button
  disabled
  class="Button
  text-blue-500
  disabled:border-dark
  disabled:text-red-500"
>
  蓝色按钮，disabled 红色
</button>

结合响应式设计一起？

那就先加「设备前缀」，再加「状态前缀」。如：pc:hover:bg-pink-500、m:hover:bg-blue-500

<button
  class="Button
  rounded-xl text-light

  pc:bg-pink-400 pc:border-pink-600
  pc:hover:bg-pink-500 pc:hover:border-pink-800

  m:bg-blue-400 m:border-blue-600
  m:hover:bg-blue-500 m:hover:border-blue-800
  "
>
  按钮示例
</button>

2.6 KiB Raw Blame History Unescape Escape