评分 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';