辅助类 - 状态样式

辅助类 - 状态样式

除了给默认状态设置样式外，还支持几个特定状态的样式设置比如：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 某个元素的时候，你想要给子元素设置不同的样式，需要两步操作。

1. 给容器添加 group 类名。
2. 给子元素添加 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>