3.5.0






Layout

Colors

Light
Body


Dark
Body


Gradient
Body

Close
<%= pb_rails("layout", props: {position: "left", size: "sm", collapse: "md"}) do %>
  <%= pb_rails("layout/sidebar") do %>
    <%= pb_rails("body", props: { text: "Light" }) %>
  <% end %>
  <%= pb_rails("layout/body") do %> Body <% end %>
<% end %>

<br/><br/>

<%= pb_rails("layout", props: {position: "left", size: "sm", collapse: "md", variant: "dark"}) do %>
  <%= pb_rails("layout/sidebar") do %>
    <%= pb_rails("body", props: { text: "Dark", dark: true }) %>
  <% end %>
  <%= pb_rails("layout/body") do %> Body <% end %>
<% end %>

<br/><br/>

<%= pb_rails("layout", props: {position: "left", size: "sm", collapse: "md", variant: "gradient"}) do %>
  <%= pb_rails("layout/sidebar") do %>
    <%= pb_rails("body", props: { text: "Gradient", dark: true }) %>
  <% end %>
  <%= pb_rails("layout/body") do %> Body <% end %>
<% end %>
Transparent

Side
Body

Close
<%= pb_rails("layout", props: {position: "left", size: "xs", collapse: "sm", transparent: true}) do %>
  <%= pb_rails("layout/sidebar") do %>
    <%= pb_rails("body", props: { text: "Side" }) %>
  <% end %>
  <%= pb_rails("layout/body") do %>
    <%= pb_rails("body", props: { text: "Body" }) %>
  <% end %>
<% end %>
Sizes

Side
Body


Side
Body


Side
Body


Side
Body


Side
Body

Close
<%= pb_rails("layout", props: {position: "left", size: "xs", collapse: "xs"}) do %>
  <%= pb_rails("layout/sidebar") do %> Side <% end %>
  <%= pb_rails("layout/body") do %> Body <% end %>
<% end %>

<br/><br/>

<%= pb_rails("layout", props: {position: "left", size: "sm", collapse: "sm"}) do %>
  <%= pb_rails("layout/sidebar") do %> Side <% end %>
  <%= pb_rails("layout/body") do %> Body <% end %>
<% end %>

<br/><br/>

<%= pb_rails("layout", props: {position: "left", size: "md", collapse: "sm"}) do %>
  <%= pb_rails("layout/sidebar") do %> Side <% end %>
  <%= pb_rails("layout/body") do %> Body <% end %>
<% end %>

<br/><br/>

<%= pb_rails("layout", props: {position: "left", size: "lg", collapse: "sm"}) do %>
  <%= pb_rails("layout/sidebar") do %> Side <% end %>
  <%= pb_rails("layout/body") do %> Body <% end %>
<% end %>

<br/><br/>

<%= pb_rails("layout", props: {position: "left", size: "xl", collapse: "sm"}) do %>
  <%= pb_rails("layout/sidebar") do %> Side <% end %>
  <%= pb_rails("layout/body") do %> Body <% end %>
<% end %>
Sizes Dark

Side
Body


Side
Body


Side
Body


Side
Body


Side
Body

Close
<%= pb_rails("layout", props: {position: "left", size: "xs", collapse: "xs", variant: "dark"}) do %>
  <%= pb_rails("layout/sidebar") do %> Side <% end %>
  <%= pb_rails("layout/body") do %> Body <% end %>
<% end %>

<br/><br/>

<%= pb_rails("layout", props: {position: "left", size: "sm", collapse: "sm", variant: "dark"}) do %>
  <%= pb_rails("layout/sidebar") do %> Side <% end %>
  <%= pb_rails("layout/body") do %> Body <% end %>
<% end %>

<br/><br/>

<%= pb_rails("layout", props: {position: "left", size: "md", collapse: "sm", variant: "dark"}) do %>
  <%= pb_rails("layout/sidebar") do %> Side <% end %>
  <%= pb_rails("layout/body") do %> Body <% end %>
<% end %>

<br/><br/>

<%= pb_rails("layout", props: {position: "left", size: "lg", collapse: "sm", variant: "dark"}) do %>
  <%= pb_rails("layout/sidebar") do %> Side <% end %>
  <%= pb_rails("layout/body") do %> Body <% end %>
<% end %>

<br/><br/>

<%= pb_rails("layout", props: {position: "left", size: "xl", collapse: "sm", variant: "dark"}) do %>
  <%= pb_rails("layout/sidebar") do %> Side <% end %>
  <%= pb_rails("layout/body") do %> Body <% end %>
<% end %>
Available Props
id
data
classname
aria
children
collapse
full
position
size
transparent
variant