Component

UiBibz::Ui::Core::Component

The component is the core of Ui Bibz.
Each element of the framework inherits from component element.
It may contain three arguments :

  • content (variable or block)
  • options (hash <default: {}>)
  • html_options (hash <default: {}>)

Examples

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

Component

A component can be write with a variable or a block.
Content, options or html_options can be nil.
Important: The position of options and html_options change when content is passed by variable or by block.

# by variable
Component.new content, options, html_options

# or by block
Component.new(options, html_options) do
  content
end

Render method

The render method generates the html code of the component.

# by variable
Component.new('My content', { status: :primary }, { class: 'my-class' }).render

# or by block
Component.new({ size: :xs }, { id: 'my-id' }) do
  My content
end.render

Size

The size option has following symbols for argument:
  • :lg
  • :md
  • :sm
Component.new content, size: :lg
Component.new content, size: :md
Component.new content, size: :sm

Status

Some component may have the status option in their settings. This option lets you change the color of the item as specified in the bootstrap documentation.

The status option has following symbols for argument:
  • :primary
  • :secondary
  • :success
  • :danger
  • :warning
  • :info
  • :light
  • :dark
Component.new content, status: :primary
Component.new content, status: :secondary
Component.new content, status: :success
Component.new content, status: :danger
Component.new content, status: :warning
Component.new content, status: :info
Component.new content, status: :light
Component.new content, status: :dark

Glyph

Some component may have the glyph option in their settings. This option lets you add a glyph to its component. You can write the value of this argument in many ways, for this, please refer to the component glyph.

# by variable
Component.new content, glyph: 'star'

# or by block
Component.new glyph: { name: 'star', size: 2, type: 'fw', label: 'gem' } do
  content
end

State

# by variable
Component.new content, state: :active

# or by block
Component.new state: :disabled do
  content
end

Html options

You can add any html properties.

# by variable
Component.new content, nil, { class: 'my-component', data: { target: 'first' }}

# or by block
Component.new(nil, { id: 'my-id' }) do
  content
end

Tips

Key class: can be insert in html_options and in options too.
This solution was added to simplify writing of the component.

# by variable
Component.new content, { size: :xs }, { class: 'my-component' }
Component.new content, class: 'my-component', size: :xs

# or by block
Component.new class: 'my-component', size: :xs do
  content
end

Custom Component

You can create your own components into your application.

For more information, see Custom Component page