评分

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

Rating 是一个评分模块 .. 我们经常会在一些电子商务网站上看到,用一些小星星表示商品的某种受欢迎的程度 ..

先添加一个容器 ... 上面加上 ui .. 还有 rating .. 然后再用一个 data 属性 .. data-max-rating .. 设置一下评分的最大数 ... 先把它设置成 1 ..

下面再去初始化一下评分模块 .. 添加一行 JavaScript .. 先找到想要应用 Rating 的元素 .. 这里就是 .ui.rating ... 表示同时包含 ui 还有 rating 这两个类的元素 .. 调用一下 Semantic UI 的 rating 方法 ..

保存 .. 在页面上你会看到一个空心的小星星 .. 点一下 .. 可以把它变成实心的 ... 比如你想要更多的小星星,可以再设置一下 data-max-rating 的值 .. 把它设置成 5 .. 会显示 5 个小星星 ..

再添加一个 data-rating 属性 .. 它的值表示的就是评分数 .. 先把它设置成 3 .. 表示三颗星 ..

我们可以改变这个评分的样式 .. 比如打算使用一个心型的小图标表示评分 .. 复制一下 .. 然后在这个包装上添加一个 heart ..

再复现一下 .. 然后试一下 star .. 这种样式的评分表示评分数的小星星是黄色的 .. 想改变它的尺寸 .. 可以再使用一些表示大小的类 .. 比如我想让它变得大一些 .. 可以用一个 large ..

比它再大一点的是 huge ...

评分《 Semantic UI 模块 》

统计

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

社会化网络

关于

微信订阅号

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