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 :
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
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
option has following symbols for argument:
Component.new content, size: :lg
Component.new content, size: :md
Component.new content, size: :sm
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.
status
option has following symbols for argument:
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
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
Some component may have the popover
option in their settings like buttons, links, ...
This option lets you add a popover to its component by string or hash.
Documentation for popover options are in bootstrap documentation.
# by sting
Component.new content, popover: 'My popover text...'
# or by hash
Component.new content, popover: { content: 'My popover text...', title: 'My Titel', ... }
Some component may have the tooltip
option in their settings like buttons, links, ...
This option lets you add a tooltip to its component by boolean or hash.
Documentation for popover options are in bootstrap documentation.
# by boolean
Component.new content, { tooltip: true }, { title: 'My popover text...' }
# or by hash
Component.new content, tooltip: { content: 'My popover text...', title: 'My Titel', ... }
# by variable
Component.new content, state: :active
# or by block
Component.new state: :disabled do
content
end
You can cache your component thanks to rails cache options.
# by variable
Component.new content, cache: "my-component-cache-#{ Date.today }"
# or by block
Component.new cache: "my-static-component-cache" do
content
end
Ui Bibz can use stimulus with these options:
Component.new controller: "hello" do
Component.new 'My sub component', target: 'hello.name'
Component.new 'My sub component 2', action: 'click->hello#greet'
end
You can add any html properties.
# by variable
Component.new content, nil, { class: 'my-component', data: { level: 'first' }}
# or by block
Component.new({}, { id: 'my-id' }) do
content
end
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
You can create your own components into your application.
For more information, see Custom Component page