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 ...