Row(ui_row)Bootstrap Logo

UiBibz::Ui::Core::Layouts::Row

Grid systems are used for creating page layouts through a series of rows that house your content. You can read about the doc : Bootstrap doc

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: {}>

# by variable
ui_row content, options, html_options

# or by block
ui_row options, html_options do
  content
end

# or by block tapped
ui_row options, html_options do |c|
  # by variable
  c.col content, options, html_options
  # or by block
  c.col options, html_options do
    content
  end
end

Options

The specific options for this component are:
  • action[string](use component stimulus-options method)
  • cache[string](use to cache your component)
  • controller[string](use component stimulus-options method)
  • gutters[integer/hash]
  • lg[hash]
  • md[hash]
  • num[integer]
  • sm[hash]
  • status[symbol](:primary, :secondary, :success, :danger, :warning, :info, :light, :dark)(use component status method)
  • target[string](use component stimulus-options method)
  • turbo[string](use component turbo method)
  • xl[hash]
  • xs[hash]
  • xxl[hash]

Items

The allowed items for this component are:
  • col(inherit of component)
  • html[html/string]Insert html as a component

Examples

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

Row

Col 1
Col 2

Col 1
Col 2 
ui_row class: 'test' do
  ui_col "Col 1"
  ui_col do
    Col 2
  end
end

ui_row class: 'test' do |row|
  row.col "Col 1"
  row.col do
    Col 2
  end
end

<div class="test row">
  <div class="col">Col 1</div>
  <div class="col">Col 2</div>
</div>

<div class="test row">
  <div class="col">Col 1</div>
  <div class="col">Col 2</div>
</div>

Size

Cols accept an integer or a hash:

  • lg[hash]
    • num[integer]
  • md[hash]
    • num[integer]
  • num[integer]
  • sm[hash]
    • num[integer]
  • xl[hash]
    • num[integer]
  • xs[hash]
    • num[integer]
  • xxl[hash]
    • num[integer]
Col 1
Col 2
Col 3

Col 1
Col 2
Col 3
ui_row 1, class: 'test' do
  ui_col 'Col 1'
  ui_col 'Col 2'
  ui_col 'Col 3'
end

ui_row md: { num: 2 }, xs: { num: 1}, class: 'test' do
  ui_col 'Col 1'
  ui_col 'Col 2'
  ui_col 'Col 3'
end

<div class="test row row-cols-1">
  <div class="col">Col 1</div>
  <div class="col">Col 2</div>
  <div class="col">Col 3</div>
</div>

<div class="test row row-cols-md-2 row-cols-xs-1">
  <div class="col">Col 1</div>
  <div class="col">Col 2</div>
  <div class="col">Col 3</div>
</div>

<div class="test row">
  <div class="col">
    <input type="text" name="test" id="test" class="form-control">
  </div>
  <div class="col">
    <input type="text" name="test" id="test" class="form-control">
  </div>
</div>

Gutters

Gutters accept an integer or a hash:

  • lg[hash]
    • num[integer]
    • position[symbol](:vertical, :horizontal)
  • md[hash]
    • num[integer]
    • position[symbol](:vertical, :horizontal)
  • num[integer]
  • position[symbol](:vertical, :horizontal)
  • sm[hash]
    • num[integer]
    • position[symbol](:vertical, :horizontal)
  • xl[hash]
    • num[integer]
    • position[symbol](:vertical, :horizontal)
  • xs[hash]
    • num[integer]
    • position[symbol](:vertical, :horizontal)
  • xxl[hash]
    • num[integer]
    • position[symbol](:vertical, :horizontal)
col 1
col 2
col 3
col 4

col 1
col 2
col 3
col 4

col 1
col 2
col 3
col 4

col 1
col 2
col 3
col 4

col 1
col 2
col 3
col 4
ui_container class: "border" do
  ui_row gutters: 3, class: "test" do
    ui_col 'col 1', num: 6
    ui_col 'col 2', num: 6
    ui_col 'col 3', num: 6
    ui_col 'col 4', num: 6
  end
end

ui_container class: "border" do
  ui_row gutters: { num: 2 }, class: "test" do
    ui_col 'col 1', num: 6
    ui_col 'col 2', num: 6
    ui_col 'col 3', num: 6
    ui_col 'col 4', num: 6
  end
end

ui_container class: "border" do
  ui_row gutters: { num: 4, position: :horizontal }, class: "test" do
    ui_col 'col 1', num: 6
    ui_col 'col 2', num: 6
    ui_col 'col 3', num: 6
    ui_col 'col 4', num: 6
  end
end

ui_container class: "border" do
  ui_row gutters: {md: { num: 1 }}, class: "test" do
    ui_col 'col 1', num: 6
    ui_col 'col 2', num: 6
    ui_col 'col 3', num: 6
    ui_col 'col 4', num: 6
  end
end

ui_container class: "border" do
  ui_row gutters: {md: { num: 5, position: :vertical }, xs: { num: 3}}, class: "test" do
    ui_col 'col 1', num: 6
    ui_col 'col 2', num: 6
    ui_col 'col 3', num: 6
    ui_col 'col 4', num: 6
  end
end

<div class="border container">
  <div class="test row g-3">
    <div class="col-6">col 1</div>
    <div class="col-6">col 2</div>
    <div class="col-6">col 3</div>
    <div class="col-6">col 4</div>
  </div>
</div>

<div class="border container">
  <div class="test row g-2">
    <div class="col-6">col 1</div>
    <div class="col-6">col 2</div>
    <div class="col-6">col 3</div>
    <div class="col-6">col 4</div>
  </div>
</div>

<div class="border container">
  <div class="test row gx-4">
    <div class="col-6">col 1</div>
    <div class="col-6">col 2</div>
    <div class="col-6">col 3</div>
    <div class="col-6">col 4</div>
  </div>
</div>

<div class="border container">
  <div class="test row g-md-1">
    <div class="col-6">col 1</div>
    <div class="col-6">col 2</div>
    <div class="col-6">col 3</div>
    <div class="col-6">col 4</div>
  </div>
</div>

<div class="border container">
  <div class="test row gy-md-5 g-xs-3">
    <div class="col-6">col 1</div>
    <div class="col-6">col 2</div>
    <div class="col-6">col 3</div>
    <div class="col-6">col 4</div>
  </div>
</div>