Dimmer 模块的行为

0
视频
0
完成
0%
进度
0
分钟
0
完成
0%
进度

下面我们去修改几个 Dimmer 模块的行为 .. 我们可以改变触发显示 dimmer 的动作 .. 找到这个 dimmer 方法 .. 给它一个对象作为参数 ..

要使用的行为的名字是 on .. 默认它的值是 false ... 先把它的值设置成 click .. 保存 .. 点击这个应用了 dimmer 的元素里的内容 ..

这样会触发显示 dimmer .. 再点一下 ... 会隐藏 dimmer .. 再试一下 hover .. 把 click 换成 hover .. 保存 ..

现在我们把鼠标指针放在这个元素上的时候,就会触发显示 dimmer .. 离开它的时候 .. 会隐藏 dimmer ..

下面再去设置一下过渡到 dimmer 的效果 .. 添加一个叫 transition 的行为 .. 默认它的值是 fade .. 我们再试一下翻转的效果 .. 用一个垂直翻转 .. vertical flip ..

这里我们再去掉 blurring .. 还有 dimmer 容器上的 inverted .. 鼠标指针放在内容上 .. 现在会用垂直翻转的效果显示还有隐藏这个 dimmer ..

再试一下 drop 这种过渡效果 .. 把 vertical flip 换成 drop .. 保存 ..

现在你看到的就是 drop 这种过渡效果 ..

Dimmer 模块的行为《 Semantic UI 模块 》

统计

14696
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点