Panel

A composable panel, for compact controls

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

import { BulmaPanelModule } from 'ngx-bulma';

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

Basic Panel Details

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

Components Description
<bu-panel> Parent Panel Component
<bu-panel-heading> Panel Header
<bu-panel-block> Panel content 

<bu-panel>
  <bu-panel-heading>Panel Header</bu-panel-heading>
  <bu-panel-block>First Block</bu-panel-block>
  <bu-panel-block>Second Block</bu-panel-block>
  <bu-panel-block>Third Block</bu-panel-block>
</bu-panel>

Colors

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

  • primary
  • link
  • info
  • success
  • warning
  • danger
  • black
  • dark
  • light
  • white

<bu-panel theme="primary">
  <bu-panel-heading>Primary</bu-panel-heading>
  <bu-panel-block>First Block</bu-panel-block>
  <bu-panel-block>Second Block</bu-panel-block>
  <bu-panel-block>Third Block</bu-panel-block>
</bu-panel>

<bu-panel theme="link">
  <bu-panel-heading>Link</bu-panel-heading>
  <bu-panel-block>First Block</bu-panel-block>
  <bu-panel-block>Second Block</bu-panel-block>
  <bu-panel-block>Third Block</bu-panel-block>
</bu-panel>

<bu-panel theme="info">
  <bu-panel-heading>Info</bu-panel-heading>
  <bu-panel-block>First Block</bu-panel-block>
  <bu-panel-block>Second Block</bu-panel-block>
  <bu-panel-block>Third Block</bu-panel-block>
</bu-panel>

<bu-panel theme="success">
  <bu-panel-heading>Success</bu-panel-heading>
  <bu-panel-block>First Block</bu-panel-block>
  <bu-panel-block>Second Block</bu-panel-block>
  <bu-panel-block>Third Block</bu-panel-block>
</bu-panel>

<bu-panel theme="warning">
  <bu-panel-heading>Warning</bu-panel-heading>
  <bu-panel-block>First Block</bu-panel-block>
  <bu-panel-block>Second Block</bu-panel-block>
  <bu-panel-block>Third Block</bu-panel-block>
</bu-panel>

<bu-panel theme="Danger">
  <bu-panel-heading>Panel Header</bu-panel-heading>
  <bu-panel-block>First Block</bu-panel-block>
  <bu-panel-block>Second Block</bu-panel-block>
  <bu-panel-block>Third Block</bu-panel-block>
</bu-panel>