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

# 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

# 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'

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

Popover

Some component may have the popover option in their settings like buttons, links, ...
This option lets you add a popover to its component by object, hash or string.
See the popover component.

  • animation
  • boundary
  • container
  • customClass
  • delay
  • fallbackPlacement
  • html
  • offset
  • popperConfig
  • position[symbol](:auto, :top, :left, :right, :bottom)How to position the popover
  • selector
  • template
  • title
  • trigger

Documentation for popover options are in bootstrap documentation.

# By object
popover = UiBibz::Ui::Core::Notifications::Popover.new('My popover text...', title: 'My popover title')
Component.new content, popover: popover

# By hash
Component.new content, popover: { content: 'My popover text...', title: 'My Title', ... }

# By string
Component.new content, popover: 'My popover text...'

Tooltip

Some component may have the tooltip option in their settings like buttons, links, ...
This option lets you add a tooltip to its component by object, hash or boolean.
See the tooltip component.

  • animation
  • boundary
  • container
  • delay
  • fallbackPlacement
  • html
  • position[symbol](:auto, :top, :left, :right, :bottom)How to position the popover
  • selector
  • template
  • trigger

Documentation for popover options are in bootstrap documentation.

# By object
tooltip = UiBibz::Ui::Core::Notifications::Tooltip.new('My popover text...')
Component.new content, tooltip: tooltip

# By hash
Component.new content, tooltip: { content: 'My popover text...', title: 'My Title', ... }

# By boolean
Component.new content, { tooltip: true }, { title: 'My popover text...' }
# or
Component.new content, tooltip: true, text: false

State

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

# By block
Component.new state: :disabled do
  content
end

Cache

You can cache your component thanks to rails cache options.

# By variable
Component.new content, cache: "my-component-cache-#{ Date.today }"

# By block
Component.new cache: "my-static-component-cache" do
  content
end

Stimulus options

Ui Bibz can use stimulus with these options:

  • controller [String]
  • action [String]
  • target [String] 
Component.new controller: "hello" do
  Component.new 'My sub component', target: 'hello.name'
  Component.new 'My sub component 2', action: 'click->hello#greet'
end

Turbo

Disable turbo for some components: data-turbo='false' 

= ui_link "My link", url: "my-link.html", turbo: false

Html options

You can add any html properties.

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

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

Tips

Key class: can be inserted 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

# 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