波纹

波纹-Bootstrap 5和Material Design 2.0

波纹方法以向外扩展的视觉波纹形式提供径向作用 通过用户的触摸波纹是触摸事件反馈的一种视觉形式,可为用户提供 清除信号表示正在触摸某个元素。

注意:阅读 API 标签以找到所有可用选项,然后 高级定制


基本例子

默认情况下,纹波会添加到每个按钮(通过 .btn 类),但不会 需要任何其他类或属性。


          <button type="button" class="btn btn-primary btn-lg">Primary</button>
        

它还会自动添加到 .ripple 类中。有了这个,你可以使用 .ripple 类将波纹效果应用于给定的clickable元素-对于 包裹图像的例子 <a> 元件。

example

          <a class="ripple" href="#!">
            <img
              alt="example"
              class="img-fluid rounded"
              src="https://mdbootstrap.com/img/new/standard/city/043.webp"
            />
          </a>
        

Colors

通过使用 data-mdb-ripple-color 属性,您可以更改波纹的颜色。

例如,您可以使用基本MDB调色板中的颜色 data-mdb-ripple-color =“主要” data-mdb-ripple-color =“ danger”


          <button data-mdb-ripple-color="primary" type="button" class="btn btn-light">Primary</button>
          <button data-mdb-ripple-color="secondary" type="button" class="btn btn-light">Secondary</button>
          <button data-mdb-ripple-color="success" type="button" class="btn btn-light">Success</button>
          <button data-mdb-ripple-color="danger" type="button" class="btn btn-light">Danger</button>
          <button data-mdb-ripple-color="info" type="button" class="btn btn-light">Info</button>
          <button data-mdb-ripple-color="light" type="button" class="btn btn-dark">Light</button>
          <button data-mdb-ripple-color="dark" type="button" class="btn btn-light">Dark</button>
        

您还可以使用任何CSS颜色名称:


          <button data-mdb-ripple-color="red" type="button" class="btn btn-light">Red</button>
          <button data-mdb-ripple-color="green" type="button" class="btn btn-light">Green</button>
          <button data-mdb-ripple-color="blue" type="button" class="btn btn-light">Blue</button>
          <button data-mdb-ripple-color="yellow" type="button" class="btn btn-light">Yellow</button>
          <button data-mdb-ripple-color="orange" type="button" class="btn btn-light">Orange</button>
          <button data-mdb-ripple-color="purple" type="button" class="btn btn-light">Purple</button>
          <button data-mdb-ripple-color="aqua" type="button" class="btn btn-light">Aqua</button>
        

或者简单地使用十六进制颜色代码:


          <button data-mdb-ripple-color="#c953d6" type="button" class="btn btn-light">
            #c953d6
          </button>
          <button data-mdb-ripple-color="#44c6e3" type="button" class="btn btn-light">
            #44c6e3
          </button>
          <button data-mdb-ripple-color="#fcc834" type="button" class="btn btn-light">
            #fcc834
          </button>
          <button data-mdb-ripple-color="#386f06" type="button" class="btn btn-light">
            #386f06
          </button>
          <button data-mdb-ripple-color="#c1303a" type="button" class="btn btn-light">
            #c1303a
          </button>
          <button data-mdb-ripple-color="#a57c3e" type="button" class="btn btn-light">
            #a57c3e
          </button>
          <button data-mdb-ripple-color="#192ced" type="button" class="btn btn-light">
            #192ced
          </button>
          <button data-mdb-ripple-color="#525740" type="button" class="btn btn-light">
            #525740
          </button>
        

持续时间

通过使用 data-mdb-ripple-duration 属性,您可以修改 波纹。


          <button type="button" class="btn btn-primary btn-lg">
            Default (500ms)
          </button>
          <button data-mdb-ripple-duration="1000ms" type="button" class="btn btn-primary btn-lg">
            Duration 1S
          </button>
          <button data-mdb-ripple-duration="3s" type="button" class="btn btn-primary btn-lg">
            Duration 3s
          </button>
          <button data-mdb-ripple-duration="5s" type="button" class="btn btn-primary btn-lg">
            Duration 5s
          </button>
          <button data-mdb-ripple-duration="10s" type="button" class="btn btn-primary btn-lg">
            Duration 10s
          </button>
        

居中

如果添加 data-mdb-ripple-centered =“ true” 属性,则波纹总是在 元素的中心,而不是在触摸的位置。


          <button type="button" data-mdb-ripple-centered="true" class="btn btn-primary btn-lg">
            Centered ripple
          </button>
        

未绑定

如果您使用 data-mdb-ripple-unbound =“ true” 属性,则波纹不会绑定到 给定的元素,它将超出其边界。


          <button data-mdb-ripple-unbound="true" data-mdb-ripple-color="dark" type="button" class="btn btn-primary">
            Unbound
          </button>
        

半径

通过使用 data-mdb-ripple-radius 属性,您可以修改 波纹。数值以像素表示,例如: data-mdb-ripple-radius =“ 10”


          <button type="button" class="btn btn-primary btn-lg">
            Default
          </button>
          <button type="button" data-mdb-ripple-radius="10" class="btn btn-primary btn-lg">
            10
          </button>
          <button type="button" data-mdb-ripple-radius="25" class="btn btn-primary btn-lg">
            25
          </button>
          <button type="button" data-mdb-ripple-radius="50" class="btn btn-primary btn-lg">
            50
          </button>
        

JavaScript实现

您可以使用JavaScript将涟漪图一次应用于多个元素。在这个例子中 在下面,我们将示例类 .example-class 添加到了 <a> 元素包装图像,然后我们使用JavaScript施加波纹 上这个课。

您可以将波纹应用于任何选择器-类,ID甚至本机HTML元素。

...
Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Button
...
Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Button
...
Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Button

          <div class="row">
            <div class="col-md-4">
              <!-- Card -->
              <div class="card">
                <!-- Custom class for applying ripple -->
                <a href="#!" class="example-class">
                  <img
                    src="https://mdbootstrap.com/img/new/standard/city/024.webp"
                    class="card-img-top"
                    alt="..."
                  />
                </a>
                <div class="card-body">
                  <h5 class="card-title">Card title</h5>
                  <p class="card-text">
                    Some quick example text to build on the card title and make up the bulk of the
                    card's content.
                  </p>
                  <a href="#!" class="btn btn-primary">Button</a>
                </div>
              </div>
              <!-- Card -->
            </div>

            <div class="col-md-4">
              <!-- Card -->
              <div class="card">
                <!-- Custom class for applying ripple -->
                <a href="#!" class="example-class">
                  <img
                    src="https://mdbootstrap.com/img/new/standard/city/025.webp"
                    class="card-img-top"
                    alt="..."
                  />
                </a>
                <div class="card-body">
                  <h5 class="card-title">Card title</h5>
                  <p class="card-text">
                    Some quick example text to build on the card title and make up the bulk of the
                    card's content.
                  </p>
                  <a href="#!" class="btn btn-primary">Button</a>
                </div>
              </div>
              <!-- Card -->
            </div>

            <div class="col-md-4">
              <!-- Card -->
              <div class="card">
                <!-- Custom class for applying ripple -->
                <a href="#!" class="example-class">
                  <img
                    src="https://mdbootstrap.com/img/new/standard/city/032.webp"
                    class="card-img-top"
                    alt="..."
                  />
                </a>
                <div class="card-body">
                  <h5 class="card-title">Card title</h5>
                  <p class="card-text">
                    Some quick example text to build on the card title and make up the bulk of the
                    card's content.
                  </p>
                  <a href="#!" class="btn btn-primary">Button</a>
                </div>
              </div>
              <!-- Card -->
            </div>
          </div>
        

          document.querySelectorAll('.example-class').forEach((cardRipple) => {
            new mdb.Ripple(cardRipple, { color: 'light' })
          });
        

波纹 - API


用法

通过类

.ripple 类添加到clickable元素以应用波纹效果。


          <a class="ripple" href="#!">
            <img
              alt="example"
              class="img-fluid rounded"
              src="https://mdbootstrap.com/img/new/standard/city/043.webp"
            />
          </a>
        

通过JavaScript

您可以使用JavaScript将涟漪图应用于任何元素。在下面的示例中,我们添加了一个 示例类 .example-class <a>元素包装图像,然后我们使用JavaScript将波纹应用于此类


          <a class="example-class" href="#!">
            <img
              alt="example"
              class="img-fluid rounded"
              src="https://mdbootstrap.com/img/new/standard/city/043.webp"
              style="max-width: 27rem;"
            />
          </a>
        

          document.querySelectorAll('.example-class').forEach((cardRipple) => {
            new mdb.Ripple(cardRipple, { color: 'light' })
          });
        

通过jQuery

注意:默认情况下,MDB 包含jQuery,并且您拥有 自行添加jQuery到项目中。


          <a class="example-class" href="#!">
            <img
              alt="example"
              class="img-fluid rounded"
              src="https://mdbootstrap.com/img/new/standard/city/043.webp"
              style="max-width: 27rem;"
            />
          </a>
        

          $('.example-class').ripple(options);
        

选件

Name Type Default Description
rippleCentered Boolean false Centers the position of ripple
rippleColor String '' Changes color of ripple
rippleDuration String '500ms' Sets duration of animation
rippleRadius Number 0 Sets radius value
rippleUnbound Boolean false Sets whether the effect should go beyond the wrapper's boundaries

方法

Name Description Example
dispose Manually dispose of component ripple.dispose()

        var rippleElement = document.getElementById('rippleElement')
        var ripple = new mdb.Ripple(rippleElement)
        ripple.dispose()
      

进口

MDB UI KIT也可以与模块捆绑器一起使用。使用以下代码导入此组件:


          import { Ripple } from 'mdb-ui-kit';