Message

Colored message blocks, to emphasize part of your page.

The Bulma message is a multi-part component which contains:

the message container
the optional bu-message-header that can hold a title and a delete element
the bu-message-content for the longer body of the message.

To use a Message component in your application, you need to import the BulmaMessageModule by adding the following lines to your app.module.ts file.

import { BulmaMessageModule } from 'ngx-bulma';

@NgModule({
  imports: [BulmaMessageModule]
  // ...
})
export class AppModule {}

Basic Message Details

The most basic Message component needs only of <bu-message> element with some content. However, Bulma components provides number of preset sections that you can use inside of <bu-message>.

components	Description
`<bu-message>`	Parent Message Component
`<bu-message-header>`	Message Header
`<bu-message-content>`	Message content

Dark

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.

Header

<bu-message>
  <bu-message-header>
    <p>Header</p>
    <button class="delete" aria-label="delete" (click)="showMyContainer=!showMyContainer"></button>
  </bu-message-header>
  <bu-message-content *ngIf="showMyContainer">
    <p>Content..........</p>
  </bu-message-content>
</bu-message>

Add showMyContainer property in your app.component.ts to make it work.

export class MessageComponent implements OnInit {
  showMyContainer = true;
  constructor() {}
  ngOnInit() {}
}

Colors

The bu-message component is available in different colors. You can set the theme property of the bu-message component using any of the following color options:

primary
link
info
success
warning
danger
black
dark
light
white

Header

<bu-message theme="primary">
  <bu-message-header>
    <p>Header</p>
    <button
      class="delete"
      aria-label="delete"
      (click)="showMyContainer=!showMyContainer"
    ></button>
  </bu-message-header>
  <bu-message-content *ngIf="showMyContainer">
    <p>Content..........</p>
  </bu-message-content>
</bu-message>

Header

<bu-message theme="link">
  <bu-message-header>
    <p>Header</p>
    <button
      class="delete"
      aria-label="delete"
      (click)="showMyContainer=!showMyContainer"
    ></button>
  </bu-message-header>
  <bu-message-content *ngIf="showMyContainer">
    <p>Content..........</p>
  </bu-message-content>
</bu-message>

Header

<bu-message theme="info">
  <bu-message-header>
    <p>Header</p>
    <button
      class="delete"
      aria-label="delete"
      (click)="showMyContainer=!showMyContainer"
    ></button>
  </bu-message-header>
  <bu-message-content *ngIf="showMyContainer">
    <p>Content..........</p>
  </bu-message-content>
</bu-message>

Header

        <bu-message theme='success'>
            <bu-message-header>
                <p>Header</p>
                  <button class="delete" aria-label="delete" (click)="showMyContainer=!showMyContainer"></button>
            </bu-message-header>
            <bu-message-content *ngIf="showMyContainer">
                <p>Content..........</p>
            </bu-message-content>
        </bu-message>

Header

        <bu-message theme='warning'>
            <bu-message-header>
                <p>Header</p>
                  <button class="delete" aria-label="delete" (click)="showMyContainer=!showMyContainer"></button>
            </bu-message-header>
            <bu-message-content *ngIf="showMyContainer">
                <p>Content..........</p>
            </bu-message-content>
        </bu-message>

Header

<bu-message theme="danger">
  <bu-message-header>
    <p>Header</p>
    <button
      class="delete"
      aria-label="delete"
      (click)="showMyContainer=!showMyContainer"
    ></button>
  </bu-message-header>
  <bu-message-content *ngIf="showMyContainer">
    <p>Content..........</p>
  </bu-message-content>
</bu-message>

Sizes

You can add one of the following 3 size modifiers to the <bu-message> component:

small
medium
large

Header

<bu-message size="small">
  <bu-message-header>
    <p>Header</p>
    <button
      class="delete"
      aria-label="delete"
      (click)="showMyContainer=!showMyContainer"
    ></button>
  </bu-message-header>
  <bu-message-content *ngIf="showMyContainer">
    <p>Content..........</p>
  </bu-message-content>
</bu-message>

Header

<bu-message size="medium">
  <bu-message-header>
    <p>Header</p>
    <button
      class="delete"
      aria-label="delete"
      (click)="showMyContainer=!showMyContainer"
    ></button>
  </bu-message-header>
  <bu-message-content *ngIf="showMyContainer">
    <p>Content..........</p>
  </bu-message-content>
</bu-message>

Header

<bu-message size="large">
  <bu-message-header>
    <p>Header</p>
    <button
      class="delete"
      aria-label="delete"
      (click)="showMyContainer=!showMyContainer"
    ></button>
  </bu-message-header>
  <bu-message-content *ngIf="showMyContainer">
    <p>Content..........</p>
  </bu-message-content>
</bu-message>