Col(ui_col)

UiBibz::Ui::Core::Layouts::Col

Grid systems are used for creating a series of columns 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]
  • options[hash]<default: {}>
  • html_options[hash]<default: {}>

 # by variable 
 col content, options, html_options 

 # or by block 
 col options, html_options do 
   content 
 end

Options

The specific options for this component are:
  • num[integer]
  • offset[integer]
  • pull[integer]
  • push[integer]
  • xs[hash]
  • sm[hash]
  • md[hash]
  • lg[hash]
  • xl[hash]
  • cache[string](use to cache your component)
  • controller[string](use component stimulus-options method)
  • action[string](use component stimulus-options method)
  • target[string](use component stimulus-options method)

Examples

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

Col

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

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

Options

A column can take several arguments :

  • num - Integer/Symbol (1..12 || :auto)
  • offset - Integer (1..12)
  • pull - Integer (1..12)
  • push - Integer (1..12)
Col 1
Col 2
ui_row class: "test" do
  ui_col({ num: 10, offset: 2 }, { class: "test-col" }) do
    Col 1
  end
  ui_col "Col 2", { num: 2, pull: 4 }, { class: "test-col2" }
end

<div class="test row">
  <div class="test-col col-md-10 offset-md-2">Col 1</div>
  <div class="test-col2 col-md-2 col-md-pull-4">Col 2</div>
</div>

Col with differents sizes

To add multiple sizes of columns, you must use arguments :

  • :xs
  • :sm
  • :md
  • :lg
  • :xl
Col 1
Col 2
ui_row class: "test" do
  ui_col(md: { num: 5, offset: 2 }, xs: { num: 2 }) do
    Col 1
  end
  ui_col "Col 2", { md: { num: 7, pull: 4 }, xs: { num: 10 }}, { class: "test-col2" }
end

<div class="test row">
  <div class="col-md-5 offset-md-2 col-xs-2">Col 1</div>
  <div class="test-col2 col-md-7 col-md-pull-4 col-xs-10">Col 2</div>
</div>

Col with differents sizes

Col 
ui_row class: "test" do
  ui_col(md: { num: 5, offset: 2 }, xs: { num: 2 }) do
    Col 1
  end
  ui_col "Col 2", { md: { num: 7, pull: 4 }, xs: { num: 10 }}, { class: "test-col2" }
end

<div class="test row">
  <div class="col-md-5 offset-md-2 col-xs-2">Col 1</div>
  <div class="test-col2 col-md-7 col-md-pull-4 col-xs-10">Col 2</div>
</div>

Contents