删除标记(Delete)

多才多艺的删除标记。

delete元素是一个独立的元素,可以在不同的环境中使用。

它本身就是一个简单的带叉号的圆:

Example

HTML

<button class="delete"></button>

大小 #

它有四中大小样式:

Example

HTML

<button class="delete is-small"></button>
  <button class="delete"></button>
  <button class="delete is-medium"></button>
  <button class="delete is-large"></button>

组合 #

它可以和后面介绍的tags、notifications、messages组合在一起使用:

Example

Hello World
Lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum dolor sit amet, consectetur adipiscing elit
Info
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur. Aenean ac eleifend lacus, in mollis lectus. Donec sodales, arcu et sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem.

HTML

<div class="block">
    <span class="tag is-success">
      Hello World
      <button class="delete is-small"></button>
    </span>
  </div>
  
  <div class="notification is-danger">
    <button class="delete"></button>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum dolor sit amet, consectetur adipiscing elit
  </div>
  
  <article class="message is-info">
    <div class="message-header">
      Info
      <button class="delete"></button>
    </div>
    <div class="message-body">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur. Aenean ac eleifend lacus, in mollis lectus. Donec sodales, arcu et sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem.
    </div>
  </article>

返回头部

问题反馈
返回顶部