amis/state.md at b4283258956d74fd45e5e9d8f2d26caf74563c95

test/amis

mirror of https://gitee.com/baidu/amis.git synced 2024-12-15 09:21:13 +08:00

docs：将文档移动 zh-CN 目录下；为以后支持英文版做准备 (#1309 )

* docs：将文档移动 zh-CN 目录下；为以后支持英文版做准备

* 整理 autoFill

* 补充下载最新版本的说明 (#1298)

* fix: 修复在新版 Firefox 下 js sdk 报错 (#1300)

* 删掉可能报错的代码 (#1311)

* fix: 修复 css 变量不支持数字问题 (#1302)

* feat：增加 animation-duration，可以控制所有动画时长，也能用于一次性关闭所有动画效果 (#1303)

* feat：增加 animation-duration，可以控制所有动画时长，也能用于一次性关闭所有动画效果

* 补充文档

* Pageleave (#1310)

* form 添加页面离开提示功能

* 补充文档

Co-authored-by: 2betop <2betop.cn@gmail.com>
Co-authored-by: liaoxuezhi <liaoxuezhi@baidu.com>

2021-01-04 16:59:32 +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