评分 MDB Pro组件
评级-Bootstrap 5和Material Design 2.0组件
评分组件可用于允许用户分享他们对产品的看法, 文档页面,照片等。
注意:阅读 API 标签以找到所有可用选项,然后 高级定制
基本例子
您可以使用以下方法自动初始化评分组件
data-mdb-toggle="rating"
只读
如果您想使用评分来显示分数,可以使用
只读
选项
大事记
评级在单击和悬停元素之后发出事件。检查浏览器控制台进行测试。
自订文字
您可以使用以下命令在图标之前或之后添加其他文本
data-mdb-after
和 data-mdb-before
自定义图标
您可以轻松使用其他图标。只需将 fa
类更改为所需的任何内容即可。
图标数量
如果您想在评分中显示更多或更少的图标,只需添加尽可能多的图标
您喜欢的图标 <ul>
标签。
图标自定义颜色
如果您想设置自己的图标颜色,可以使用
data-mdb-color
标签
动态图标
您可以通过添加以下内容使您更动态地评分
data-mdb-dynamic="true"
样式化活动元素
您可以使用 active
类为所选元素设置不同的样式
弹出框实现示例
评级使您可以轻松添加弹出框功能
获取选择的值
要获取用户选择的值,只需侦听返回值的onSelect.imdb.rating事件。打开浏览器控制台以测试其工作方式
评分 - API
用法
通过数据属性
<ul class="rating" data-mdb-toggle="rating">
<li>
<i class="far fa-star fa-sm text-primary" title="Bad"></i>
</li>
<li>
<i class="far fa-star fa-sm text-primary" title="Poor"></i>
</li>
<li>
<i class="far fa-star fa-sm text-primary" title="OK"></i>
</li>
<li>
<i class="far fa-star fa-sm text-primary" title="Good"></i>
</li>
<li>
<i class="far fa-star fa-sm text-primary" title="Excellent"></i>
</li>
</ul>
通过JavaScript
<ul class="rating">
<li>
<i class="far fa-star fa-sm text-primary" title="Bad"></i>
</li>
<li>
<i class="far fa-star fa-sm text-primary" title="Poor"></i>
</li>
<li>
<i class="far fa-star fa-sm text-primary" title="OK"></i>
</li>
<li>
<i class="far fa-star fa-sm text-primary" title="Good"></i>
</li>
<li>
<i class="far fa-star fa-sm text-primary" title="Excellent"></i>
</li>
</ul>
const rating = document.getElementByClassName('rating');
const instance = new mdb.Rating(rating, options);
通过jQuery
注意:默认情况下,MDB 不包含jQuery,并且您拥有 自行添加到项目中。
<ul class="rating">
<li>
<i class="far fa-star fa-sm text-primary" title="Bad"></i>
</li>
<li>
<i class="far fa-star fa-sm text-primary" title="Poor"></i>
</li>
<li>
<i class="far fa-star fa-sm text-primary" title="OK"></i>
</li>
<li>
<i class="far fa-star fa-sm text-primary" title="Good"></i>
</li>
<li>
<i class="far fa-star fa-sm text-primary" title="Excellent"></i>
</li>
</ul>
$('.rating').rating(options);
选件
Name | Type | Default | Description |
---|---|---|---|
value |
Number | '' |
Set default rating value |
readonly
|
Boolean | false |
Disable hover, click and keypress events |
after |
String | '' |
Set a custom text after the icon |
before |
String | '' |
et a custom text before the icon |
dynamic
|
Boolean | false |
Dynamically change previous icons to the currently selected/hovered icon |
tooltip
|
String | 'top' |
set tooltip position |
title |
String | '' |
Set the text displayed in the tooltip (for use only on the icons element) |
color |
String | '' |
Set icon color (for use only on the icons element) |
方法
Name | Description | Example |
---|---|---|
dispose
|
Removes a mdb.Rating instance |
instance.dispose()
|
const myRatingEl = document.getElementById('myRating');
const rating = new mdb.Rating(myRatingEl);
rating.dispose();
大事记
Name | Description |
---|---|
onSelect.mdb.rating
|
This event fires immediately when you clicked on icon. The clicked element is
available as the target property of the event, and selected value as the
value property.
|
onHover.mdb.rating
|
This event fires immediately when you hovered on icon. The hovered element is
available as the target property of the event, and hovered value as the
value property.
|
const myRatingEl = document.getElementById('myRating')
myRatingEl.addEventListener('onSelect.mdb.rating', (e) => {
// do something...
})
进口
MDB UI KIT 也可与模块捆绑器一起使用。使用以下代码导入 此组件:
import { Rating } from 'mdb-ui-kit';