Panel(ui_panel)Bootstrap Logo

UiBibz::Ui::Ux::Containers::Panel

A panel is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options.

Usage

This component is an extension of component element. A Ui Bibz component consists of 3 arguments:
  • content[value/block]
  • html_options[hash]<default: {}>
  • options[hash]<default: {}>

ui_panel options, html_options do |c|
  # by variable
  c.header content, options, html_options
  # or by block
  c.header options, html_options do
    content
  end

  c.toolbar do |t|
    t.button_group do |bg|
      # by variable
      bg.button content, options, html_options
      # or by block
      bg.button options, html_options do
        content
      end
    end
  end

  # by variable
  c.body content, options, html_options
  # or by block
  c.body options, html_options do
    content
  end

  c.deck options, html_options do |d|
    d.panel do |pa|
      pa.body content, options, html_options
    end
    d.panel do |pa|
      pa.body options, html_options do
        content
      end
    end
  end

  c.group options, html_options do |g|
    g.panel do |pa|
      pa.body content, options, html_options
    end
    g.panel do |pa|
      pa.body options, html_options do
        content
      end
    end
  end

  c.column options, html_options do |o|
    o.panel do |pa|
      pa.body content, options, html_options
    end
    o.panel do |pa|
      pa.body options, html_options do
        content
      end
    end
  end

  # by variable
  c.footer content, options, html_options
  # or by block
  c.footer options, html_options do
    content
  end
end

Options

The specific options for this component are:

Items

The allowed items for this component are:

Examples

Some examples explain how to use the options present in the component.

Panel

My header
Body
Footer
ui_panel do |p|
  p.header do |h|
    h.title 'My header'
    h.actions size: :sm, outline: true, status: :secondary do |a|
      a.button 'Minimize', glyph: 'caret-up', text: false
      a.button 'Options', glyph: 'cog', text: false
      a.button 'Close', glyph: 'times', text: false
    end
  end
  p.toolbar justify: true, size: :sm do |t|
    t.button_group do |bg|
      bg.button 'Copy'
      bg.button 'Cut'
      bg.button 'Paste'
    end
    t.spacer 2
    t.button_group do |bg|
      bg.button 'Delete'
    end
    t.spacer
    t.button_group do |bg|
      bg.dropdown 'Dropdown', position: :right do |d|
        d.link 'Link'
      end
    end
  end
  p.body 'Body'
  p.toolbar size: :sm do |t|
    t.button_group size: :sm do |bg|
      bg.button 'Add', glyph: 'plus-circle', status: :success, text: false
      bg.button 'Remove', glyph: 'minus-circle', status: :danger, text: false
    end
  end
  p.footer 'Footer'
end

<div class="panel">
  <div class="panel-header justify-content-between">
    <div class="panel-title">My header</div>
    <div class="btn-group btn-group-sm" role="group">
      <button class="btn-outline-secondary btn btn-sm without-text" title="" data-original-title="Minimize"><i class="glyph fa fa-caret-up"></i></button>
      <button class="btn-outline-secondary btn btn-sm without-text" title="" data-original-title="Options"><i class="glyph fa fa-cog"></i></button>
      <button class="btn-outline-secondary btn btn-sm without-text" title="" data-original-title="Close"><i class="glyph fa fa-times"></i></button>
    </div>
  </div>
  <div class="btn-toolbar justify-content-between panel-toolbar" role="toolbar">
    <div class="btn-group btn-group-sm me-2" role="group">
      <button class="btn btn-sm">Copy</button>
      <button class="btn btn-sm">Cut</button>
      <button class="btn btn-sm">Paste</button>
    </div>
    <div class="btn-group btn-group-sm me-auto" role="group">
      <button class="btn btn-sm">Delete</button>
    </div>
    <div class="btn-group btn-group-sm" role="group">
      <div class="dropdown btn-group">
        <button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="dropdown-184398579916786730635240775791701139983">Dropdown <span class="caret"></span></button>
        <div class="dropdown-menu dropdown-menu-right" arial-labelledby="dropdown-184398579916786730635240775791701139983"><a class="dropdown-item" href="#">Link</a></div>
      </div>
    </div>
  </div>
  <div class="panel-body">Body</div>
  <div class="btn-toolbar panel-toolbar" role="toolbar">
    <div class="btn-group btn-group-sm" role="group">
      <button class="btn-success btn btn-sm without-text" title="" data-original-title="Add"><i class="glyph fa fa-plus-circle"></i></button>
      <button class="btn-danger btn btn-sm without-text" title="" data-original-title="Remove"><i class="glyph fa fa-minus-circle"></i></button>
    </div>
  </div>
  <div class="panel-footer">Footer</div>
</div>

Grid in panel

My header
Tree Header
Tree Body
with content
on multiline
Overview Header
Overview Body
Footer
ui_panel do |p|
  p.header do |h|
    h.title 'My header'
    h.actions size: :sm, outline: true, status: :secondary do |a|
      a.button 'Minimize', glyph: 'caret-up', text: false
      a.button 'Options', glyph: 'cog', text: false
      a.button 'Close', glyph: 'times', text: false
    end
  end
  p.toolbar justify: true, size: :sm do |t|
    t.button_group do |bg|
      bg.button 'Copy'
      bg.button 'Cut'
      bg.button 'Paste'
    end
    t.spacer 2
    t.button_group do |bg|
      bg.button 'Delete'
    end
    t.spacer
    t.button_group do |bg|
      bg.dropdown 'Dropdown', position: :right do |d|
        d.link 'Link'
      end
    end
  end
  p.body 'Body'
  p.toolbar size: :sm do |t|
    t.button_group size: :sm do |bg|
      bg.button 'Add', glyph: 'plus-circle', status: :success, text: false
      bg.button 'Remove', glyph: 'minus-circle', status: :danger, text: false
    end
  end
  p.footer 'Footer'
end

<div class="card">
  <div class="card-body">Content 1</div>
</div>

<div class="my-card1 bg-info text-white card">
  <div class="card-body">Content 2</div>
</div>

<div class="my-card2 bg-success text-white card">
  <div class="card-body">Content 3</div>
</div>

Group in panel

Main panel header
Left Panel Header
Left Panel Body
Left Panel Footer
Right Panel Header
Right Panel Body
with content
on multiline
and again
and again...
Main Panel Footer
ui_panel do |p|

  p.header do |h|
    h.title 'Main panel header'
  end

  p.toolbar justify: true, size: :sm do |t|
    t.button_group do |bg|
      bg.button 'Copy'
      bg.button 'Cut'
      bg.button 'Paste'
    end
    t.spacer 2
    t.button_group do |bg|
      bg.button 'Delete'
    end
    t.spacer
    t.button_group do |bg|
      bg.dropdown 'Dropdown', position: :right do |d|
        d.link 'Link'
      end
    end
  end

  p.group do |d|
    d.panel class: 'w-30' do |b|
      b.header 'Left Panel Header'
      b.body 'Left Panel Body'
      b.footer 'Left Panel Footer'
    end
    d.panel do |b|
      b.header 'Right Panel Header'
      b.body 'Right Panel Body'
    end
  end

  p.footer 'Main Panel Footer'

<div class="panel">
  <div class="panel-header justify-content-between">
    <div class="panel-title">Main panel header</div>
  </div>
  <div class="btn-toolbar justify-content-between panel-toolbar" role="toolbar">
    <div class="btn-group btn-group-sm me-2" role="group">
      <button class="btn btn-sm">Copy</button>
      <button class="btn btn-sm">Cut</button>
      <button class="btn btn-sm">Paste</button>
    </div>
    <div class="btn-group btn-group-sm me-auto" role="group">
      <button class="btn btn-sm">Delete</button>
    </div>
    <div class="btn-group btn-group-sm" role="group">
      <div class="dropdown btn-group">
        <button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="dropdown-166182929122869067811882961764345065440">Dropdown <span class="caret"></span></button>
        <div class="dropdown-menu dropdown-menu-right" arial-labelledby="dropdown-166182929122869067811882961764345065440">
          <a class="dropdown-item" href="#">Link</a>
        </div>
      </div>
    </div>
  </div>
  <div class="panel-group">
    <div class="panel">
      <div class="panel-header justify-content-between">Left Panel Header</div>
      <div class="panel-body">Left Panel Body</div>
      <div class="panel-footer">Left Panel Footer</div>
    </div>
    <div class="panel">
      <div class="panel-header justify-content-between">Right Panel Header</div>
      <div class="panel-body">Right Panel Body</div>
    </div>
  </div>
  <div class="panel-footer">Main Panel Footer</div>
</div>

Column in panel

Main panel header
Panel Header
Panel Body
Panel Footer
Panel Header
Panel Body
Panel Header
Panel Body
Panel Header
Panel Body
Main Panel Footer
ui_panel do |p|

  p.header do |h|
    h.title 'Main panel header'
  end

  p.toolbar justify: true, size: :sm do |t|
    t.button_group do |bg|
      bg.button 'Copy'
      bg.button 'Cut'
      bg.button 'Paste'
    end
    t.spacer 2
    t.button_group do |bg|
      bg.button 'Delete'
    end
    t.spacer
    t.button_group do |bg|
      bg.dropdown 'Dropdown', position: :right do |d|
        d.link 'Link'
      end
    end
  end

  p.group do |d|
    d.panel class: 'w-30' do |b|
      b.header 'Left Panel Header'
      b.body 'Left Panel Body'
      b.footer 'Left Panel Footer'
    end
    d.panel do |b|
      b.header 'Right Panel Header'
      b.body 'Right Panel Body'
    end
    d.panel do |b|
      b.header 'Right Panel Header'
      b.body 'Right Panel Body'
    end
    d.panel do |b|
      b.header 'Right Panel Header'
      b.body 'Right Panel Body'
    end
  end

  p.footer 'Main Panel Footer'

<div class="panel">
  <div class="panel-header justify-content-between">
    <div class="panel-title">Main panel header</div>
  </div>
  <div class="btn-toolbar justify-content-between panel-toolbar" role="toolbar">
    <div class="btn-group btn-group-sm me-2" role="group">
      <button class="btn btn-sm">Copy</button>
      <button class="btn btn-sm">Cut</button>
      <button class="btn btn-sm">Paste</button>
    </div>
    <div class="btn-group btn-group-sm me-auto" role="group">
      <button class="btn btn-sm">Delete</button>
    </div>
    <div class="btn-group btn-group-sm" role="group">
      <div class="dropdown btn-group">
        <button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="dropdown-233265550718337323263688571266698501319">Dropdown <span class="caret"></span></button>
        <div class="dropdown-menu dropdown-menu-right" arial-labelledby="dropdown-233265550718337323263688571266698501319">
          <a class="dropdown-item" href="#">Link</a>
        </div>
      </div>
    </div>
  </div>
  <div class="panel-columns">
    <div class="panel">
      <div class="panel-header justify-content-between">Panel Header</div>
      <div class="panel-body">Panel Body</div>
      <div class="panel-footer">Panel Footer</div>
    </div>
    <div class="panel">
      <div class="panel-header justify-content-between">Panel Header</div>
      <div class="panel-body">Panel Body</div>
    </div>
    <div class="panel">
      <div class="panel-header justify-content-between">Panel Header</div>
      <div class="panel-body">Panel Body</div>
    </div>
    <div class="panel">
      <div class="panel-header justify-content-between">Panel Header</div>
      <div class="panel-body">Panel Body</div>
    </div>
  </div>
  <div class="panel-footer">Main Panel Footer</div>
</div>