Delete | Bulma-Gomponents

Delete

The b.Delete constructor creates a delete cross.

Modifier	Action
`b.Small`	Set size to small
`b.Normal`	Set size to normal
`b.Medium`	Set size to medium
`b.Large`	Set size to large

Bulma examples

Bulma documentation

Example

Code

b.Delete()

ResultHTML

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

Sizes

Bulma documentation

Example

Code

b.Delete(b.Small),
b.Delete(),
b.Delete(b.Medium),
b.Delete(b.Large)

ResultHTML

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

Combinations

Bulma documentation

Example

Code

b.Block(
	b.Tag(
		b.Success,
		"Hello World",
		b.Delete(b.Small),
	),
),
b.Notification(
	b.Danger,
	b.Delete(),
	"Lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum dolor sit amet, consectetur adipiscing elit",
),
b.Message(
	b.Info,
	b.MessageHeader(
		"Info",
		b.Delete(),
	),
	b.MessageBody(
		"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.",
	),
)

ResultHTML

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.

<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"><p>Info</p><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>