Dimmer 上的内容

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

之前我们应用的 dimmer 是自动生成的 ... 这个 dimmer 上的内容我们可以手工去设置一下 .. 我们先让这个 dimmer 显示出来 .. 把它的参数值设置成 show ..

然后在这个应用了 dimmer 的元素里边 .. 先去添加一个要显示在 dimmer 上的内容 ..

先添加一个包装 .. 用一个 div 标签 . 加上 ui .. 还有 dimmer .. 这两个类 .. 在它的里面就是要显示在 dimmer 上的内容 .. 我们先试一下用一个加载图标 ..

用一个 div 标签,上面要加上 .ui.loader .. 保存 .. 在 dimmer 上会显示一个正在加载的小图标 .. 下在我们再试一下其它的内容 .. 注释掉这个加载图标 ..

然后用一个带 content 类的容器 .. 然后在它的里面,用一个带图标的标题.. 用一个 h2 标签 .. 加上 ui .. inverted .. icon .. 还有 header .. 添加一个小图标 .. i.red.heart.icon .. 一个红色的心型图标 ..

标题上的文字是 喜欢 .. 在这个 dimmer 上会显示这个带图标的标题内容 .. 默认这个 dimmer 是一个半透明的效果 .. 我们可以让它下面的内容变成模糊的 .. 在这个应用了 dimmer 的元素的上面 .. 添加一个 blurring .. 保存 ..

现在它下面的内容会是一个半透明并且模糊的效果... 我们还可以设置一下,让这个 dimmer 的背景变成亮色的 .. 在这个 dimmer 容器的上面,添加一个 inverted .. 这样你可能需要再调整一下它里面的内容 .. 在这个标题标签上,添加一个 red .. 可以让它里面的文字变成红色的 ..

Dimmer 上的内容《 Semantic UI 模块 》

统计

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

社会化网络

关于

微信订阅号

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