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

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

Render method

The render method generates the html code of the component.

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

Size

Some component may have the size option in their settings. The size argument contains three distinct values :

  • :xs
  • :sm
  • :md
  • :lg
    Component.new content, size: :xs
    Component.new content, size: :md
    Component.new content, size: :lg
    

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 argument contains 7 distinct values :

  • :primary
  • :secondary
  • :danger
  • :success
  • :info
  • :warning
    Component.new content, status: :primary
    Component.new content, status: :secondary
    Component.new content, status: :danger
    Component.new content, status: :success
    Component.new content, status: :info
    Component.new content, status: :warning
    

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.

    Component.new content, glyph: 'star'
    Component.new content, glyph: { name: 'star', size: 2, type: 'fw', label: 'Diamond' }
    

State

    Component.new content, state: :active
    Component.new content, state: :disabled
    

Html options

You can add any html properties.

    Component.new content, {}, { class: 'my-component', data: { target: 'first' }}
    Component.new({}, { 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.

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