bs5 0.0.24 → 0.0.29

data/app/views/bs5/examples/alert/default/snippet.html.erb

@@ -1,3 +1 @@
-<%= bs5_alert do %>
-  A simple primary alert—check it out!
-<%- end %>
+<%= bs5_alert { "A simple primary alert—check it out!" } %>

data/app/views/bs5/examples/carousel/_dark_variant.html.erb

@@ -0,0 +1,2 @@
+<h2>Dark variant</h2>
+<%= bs5_example(snippet: 'carousel/dark_variant/snippet1') %>

data/app/views/bs5/examples/carousel/_examples.html.erb

@@ -0,0 +1,13 @@
+<h2>Examples</h2>
+<h3>Slides only</h3>
+<%= bs5_example(snippet: 'carousel/examples/snippet1') %>
+<h3>With controls</h3>
+<%= bs5_example(snippet: 'carousel/examples/snippet2') %>
+<h3>With indicators</h3>
+<%= bs5_example(snippet: 'carousel/examples/snippet3') %>
+<h3>With captions</h3>
+<%= bs5_example(snippet: 'carousel/examples/snippet4') %>
+<h3>Crossfade</h3>
+<%= bs5_example(snippet: 'carousel/examples/snippet5') %>
+<h3>Individual <code>.carousel-item</code> interval</h3>
+<%= bs5_example(snippet: 'carousel/examples/snippet6') %>

data/app/views/bs5/examples/carousel/dark_variant/snippet1.html.erb

@@ -0,0 +1,25 @@
+<%= bs5_carousel(controls: true, indicators: true, dark: true) do |c| %>
+  <% c.item do |i| %>
+    <%= image_tag 'https://picsum.photos/id/131/800/400?grayscale' %>
+    <%= i.caption do %>
+      <h5>First slide label</h5>
+      <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
+    <% end %>
+  <% end %>
+
+  <% c.item do |i| %>
+    <%= image_tag 'https://picsum.photos/id/383/800/400?grayscale' %>
+    <%= i.caption do %>
+      <h5>Second slide label</h5>
+      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+    <% end %>
+  <% end %>
+
+  <% c.item do |i| %>
+    <%= image_tag 'https://picsum.photos/id/130/800/400' %>
+    <%= i.caption do %>
+      <h5>Third slide label</h5>
+      <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
+    <% end %>
+  <% end %>
+<% end %>

data/app/views/bs5/examples/carousel/examples/snippet1.html.erb

@@ -0,0 +1,13 @@
+<%= bs5_carousel do |c| %>
+  <% c.item do %>
+    <%= image_tag 'https://picsum.photos/800/400?random=1' %>
+  <% end %>
+
+  <% c.item do %>
+    <%= image_tag 'https://picsum.photos/800/400?random=2' %>
+  <% end %>
+
+  <% c.item do %>
+    <%= image_tag 'https://picsum.photos/800/400?random=3' %>
+  <% end %>
+<% end %>

data/app/views/bs5/examples/carousel/examples/snippet2.html.erb

@@ -0,0 +1,13 @@
+<%= bs5_carousel(controls: true) do |c| %>
+  <% c.item do %>
+    <%= image_tag 'https://picsum.photos/800/400?random=1' %>
+  <% end %>
+
+  <% c.item do %>
+    <%= image_tag 'https://picsum.photos/800/400?random=2' %>
+  <% end %>
+
+  <% c.item do %>
+    <%= image_tag 'https://picsum.photos/800/400?random=3' %>
+  <% end %>
+<% end %>

data/app/views/bs5/examples/carousel/examples/snippet3.html.erb

@@ -0,0 +1,13 @@
+<%= bs5_carousel(controls: true, indicators: true) do |c| %>
+  <% c.item do %>
+    <%= image_tag 'https://picsum.photos/800/400?random=1' %>
+  <% end %>
+
+  <% c.item do %>
+    <%= image_tag 'https://picsum.photos/800/400?random=2' %>
+  <% end %>
+
+  <% c.item do %>
+    <%= image_tag 'https://picsum.photos/800/400?random=3' %>
+  <% end %>
+<% end %>

data/app/views/bs5/examples/carousel/examples/snippet4.html.erb

@@ -0,0 +1,25 @@
+<%= bs5_carousel(controls: true, indicators: true) do |c| %>
+  <% c.item do |i| %>
+    <%= image_tag 'https://picsum.photos/id/1042/800/400?blur=2' %>
+    <%= i.caption do %>
+      <h5>First slide label</h5>
+      <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
+    <% end %>
+  <% end %>
+
+  <% c.item do |i| %>
+    <%= image_tag 'https://picsum.photos/id/195/800/400?blur=2' %>
+    <%= i.caption do %>
+      <h5>Second slide label</h5>
+      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+    <% end %>
+  <% end %>
+
+  <% c.item do |i| %>
+    <%= image_tag 'https://picsum.photos/id/960/800/400?blur=2' %>
+    <%= i.caption do %>
+      <h5>Third slide label</h5>
+      <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
+    <% end %>
+  <% end %>
+<% end %>

data/app/views/bs5/examples/carousel/examples/snippet5.html.erb

@@ -0,0 +1,13 @@
+<%= bs5_carousel(controls: true, crossfade: true) do |c| %>
+  <% c.item do %>
+    <%= image_tag 'https://picsum.photos/800/400?random=1' %>
+  <% end %>
+
+  <% c.item do %>
+    <%= image_tag 'https://picsum.photos/800/400?random=2' %>
+  <% end %>
+
+  <% c.item do %>
+    <%= image_tag 'https://picsum.photos/800/400?random=3' %>
+  <% end %>
+<% end %>

data/app/views/bs5/examples/carousel/examples/snippet6.html.erb

@@ -0,0 +1,13 @@
+<%= bs5_carousel(controls: true, crossfade: true) do |c| %>
+  <% c.item(interval: 10_000) do %>
+    <%= image_tag 'https://picsum.photos/800/400?random=1' %>
+  <% end %>
+
+  <% c.item(interval: 2_000) do %>
+    <%= image_tag 'https://picsum.photos/800/400?random=2' %>
+  <% end %>
+
+  <% c.item do %>
+    <%= image_tag 'https://picsum.photos/800/400?random=3' %>
+  <% end %>
+<% end %>

data/app/views/bs5/examples/dropdowns/dark/_example.html.erb

@@ -0,0 +1,2 @@
+<h2>Dark dropdown</h2>
+<%= bs5_example(snippet: 'dropdowns/dark/snippet') %>

data/app/views/bs5/examples/dropdowns/dark/snippet.html.erb

@@ -0,0 +1,7 @@
+<%= bs5_dropdown('Dropdown button', dark: true) do |d| %>
+  <%= d.item do %><%= link_to 'Action', '#', class: 'active' %><% end %>
+  <%= d.item do %><%= link_to 'Another action', '#' %><% end %>
+  <%= d.item do %><%= link_to 'Something else here', '#' %><% end %>
+  <%= d.item %>
+  <%= d.item do %><%= link_to 'Separated link', '#' %><% end %>
+<% end %>

data/app/views/bs5/examples/dropdowns/directions/_example.html.erb

@@ -0,0 +1,7 @@
+<h2>Directions</h2>
+<h3>Dropup</h3>
+<%= bs5_example(snippet: 'dropdowns/directions/snippet1') %>
+<h3>Dropright</h3>
+<%= bs5_example(snippet: 'dropdowns/directions/snippet2') %>
+<h3>Dropleft</h3>
+<%= bs5_example(snippet: 'dropdowns/directions/snippet3') %>

data/app/views/bs5/examples/dropdowns/directions/snippet1.html.erb

@@ -0,0 +1,17 @@
+<%= bs5_button_group do %>
+  <%= bs5_dropdown('Drop up', direction: :up) do |d| %>
+    <%= d.item do %><%= link_to 'Action', '#' %><% end %>
+    <%= d.item do %><%= link_to 'Another action', '#' %><% end %>
+    <%= d.item do %><%= link_to 'Something else here', '#' %><% end %>
+    <%= d.item %>
+    <%= d.item do %><%= link_to 'Separated link', '#' %><% end %>
+  <% end %>
+<% end %>
+
+<%= bs5_dropdown('Split dropup', split: true, direction: :up) do |d| %>
+  <%= d.item do %><%= link_to 'Action', '#' %><% end %>
+  <%= d.item do %><%= link_to 'Another action', '#' %><% end %>
+  <%= d.item do %><%= link_to 'Something else here', '#' %><% end %>
+  <%= d.item %>
+  <%= d.item do %><%= link_to 'Separated link', '#' %><% end %>
+<% end %>

data/app/views/bs5/examples/dropdowns/directions/snippet2.html.erb

@@ -0,0 +1,17 @@
+<%= bs5_button_group do %>
+  <%= bs5_dropdown('Drop end', direction: :end) do |d| %>
+    <%= d.item do %><%= link_to 'Action', '#' %><% end %>
+    <%= d.item do %><%= link_to 'Another action', '#' %><% end %>
+    <%= d.item do %><%= link_to 'Something else here', '#' %><% end %>
+    <%= d.item %>
+    <%= d.item do %><%= link_to 'Separated link', '#' %><% end %>
+  <% end %>
+<% end %>
+
+<%= bs5_dropdown('Split dropend', split: true, direction: :end) do |d| %>
+  <%= d.item do %><%= link_to 'Action', '#' %><% end %>
+  <%= d.item do %><%= link_to 'Another action', '#' %><% end %>
+  <%= d.item do %><%= link_to 'Something else here', '#' %><% end %>
+  <%= d.item %>
+  <%= d.item do %><%= link_to 'Separated link', '#' %><% end %>
+<% end %>

data/app/views/bs5/examples/dropdowns/directions/snippet3.html.erb

@@ -0,0 +1,17 @@
+<%= bs5_button_group do %>
+  <%= bs5_dropdown('Drop start', direction: :start) do |d| %>
+    <%= d.item do %><%= link_to 'Action', '#' %><% end %>
+    <%= d.item do %><%= link_to 'Another action', '#' %><% end %>
+    <%= d.item do %><%= link_to 'Something else here', '#' %><% end %>
+    <%= d.item %>
+    <%= d.item do %><%= link_to 'Separated link', '#' %><% end %>
+  <% end %>
+<% end %>
+
+<%= bs5_dropdown('Split dropstart', split: true, direction: :start) do |d| %>
+  <%= d.item do %><%= link_to 'Action', '#' %><% end %>
+  <%= d.item do %><%= link_to 'Another action', '#' %><% end %>
+  <%= d.item do %><%= link_to 'Something else here', '#' %><% end %>
+  <%= d.item %>
+  <%= d.item do %><%= link_to 'Separated link', '#' %><% end %>
+<% end %>

data/app/views/bs5/examples/dropdowns/menu_alignment/_example.html.erb

@@ -0,0 +1,5 @@
+<h2>Menu alignment</h2>
+<%= bs5_example(snippet: 'dropdowns/menu_alignment/snippet1') %>
+<h3>Responsive alignment</h3>
+<%= bs5_example(snippet: 'dropdowns/menu_alignment/snippet2') %>
+<%= bs5_example(snippet: 'dropdowns/menu_alignment/snippet3') %>

data/app/views/bs5/examples/dropdowns/menu_alignment/snippet1.html.erb

@@ -0,0 +1,5 @@
+<%= bs5_dropdown('Right-aligned menu example', align: :end) do |d| %>
+  <%= d.item do %><%= button_tag 'Action' %><% end %>
+  <%= d.item do %><%= button_tag 'Another action' %><% end %>
+  <%= d.item do %><%= button_tag 'Something else here' %><% end %>
+<% end %>

data/app/views/bs5/examples/dropdowns/menu_alignment/snippet2.html.erb

@@ -0,0 +1,7 @@
+<%= bs5_button_group do %>
+  <%= bs5_dropdown('Left-aligned but right aligned when large screen', align: { end: :lg }) do |d| %>
+    <%= d.item do %><%= button_tag 'Action' %><% end %>
+    <%= d.item do %><%= button_tag 'Another action' %><% end %>
+    <%= d.item do %><%= button_tag 'Something else here' %><% end %>
+  <% end %>
+<% end %>

data/app/views/bs5/examples/dropdowns/menu_alignment/snippet3.html.erb

@@ -0,0 +1,7 @@
+<%= bs5_button_group do %>
+  <%= bs5_dropdown('Right-aligned but left aligned when large screen', align: { start: :lg }) do |d| %>
+    <%= d.item do %><%= button_tag 'Action' %><% end %>
+    <%= d.item do %><%= button_tag 'Another action' %><% end %>
+    <%= d.item do %><%= button_tag 'Something else here' %><% end %>
+  <% end %>
+<% end %>

data/app/views/bs5/examples/dropdowns/menu_content/_example.html.erb

@@ -0,0 +1,9 @@
+<h2>Menu content</h2>
+<h3>Headers</h3>
+<%= bs5_example(snippet: 'dropdowns/menu_content/snippet1') %>
+<h3>Dividers</h3>
+<%= bs5_example(snippet: 'dropdowns/menu_content/snippet2') %>
+<h3>Text</h3>
+<%= bs5_example(snippet: 'dropdowns/menu_content/snippet3') %>
+<h3>Forms</h3>
+<%= bs5_example(snippet: 'dropdowns/menu_content/snippet4') %>

data/app/views/bs5/examples/dropdowns/menu_content/snippet1.html.erb

@@ -0,0 +1,5 @@
+<%= bs5_dropdown('Dropdown') do |d| %>
+  <%= d.item do %><h6 class="dropdown-header">Dropdown header</h6><% end %>
+  <%= d.item do %><%= link_to 'Action', '#' %><% end %>
+  <%= d.item do %><%= link_to 'Another action', '#' %><% end %>
+<% end %>

data/app/views/bs5/examples/dropdowns/menu_content/snippet2.html.erb

@@ -0,0 +1,7 @@
+<%= bs5_dropdown('Dropdown') do |d| %>
+  <%= d.item do %><%= link_to 'Action', '#' %><% end %>
+  <%= d.item do %><%= link_to 'Another action', '#' %><% end %>
+  <%= d.item do %><%= link_to 'Something else here', '#' %><% end %>
+  <%= d.item %>
+  <%= d.item do %><%= link_to 'Separated link', '#' %><% end %>
+<% end %>

data/app/views/bs5/examples/dropdowns/menu_content/snippet3.html.erb

@@ -0,0 +1,10 @@
+<%= bs5_dropdown('Dropdown') do %>
+  <div class="p-4 text-muted" style="max-width: 200px;">
+    <p>
+      Some example text that's free-flowing within the dropdown menu.
+    </p>
+    <p class="mb-0">
+      And this is more example text.
+    </p>
+  </div>
+<% end %>

data/app/views/bs5/examples/dropdowns/menu_content/snippet4.html.erb

@@ -0,0 +1,24 @@
+<%= bs5_dropdown('Dropdown') do %>
+  <form class="px-4 py-3">
+    <div class="mb-3">
+      <label for="exampleDropdownFormEmail1" class="form-label">Email address</label>
+      <input type="email" class="form-control" id="exampleDropdownFormEmail1" placeholder="email@example.com">
+    </div>
+    <div class="mb-3">
+      <label for="exampleDropdownFormPassword1" class="form-label">Password</label>
+      <input type="password" class="form-control" id="exampleDropdownFormPassword1" placeholder="Password">
+    </div>
+    <div class="mb-3">
+      <div class="form-check">
+        <input type="checkbox" class="form-check-input" id="dropdownCheck">
+        <label class="form-check-label" for="dropdownCheck">
+          Remember me
+        </label>
+      </div>
+    </div>
+    <button type="submit" class="btn btn-primary">Sign in</button>
+  </form>
+  <div class="dropdown-divider"></div>
+  <a class="dropdown-item" href="#">New around here? Sign up</a>
+  <a class="dropdown-item" href="#">Forgot password?</a>
+<% end %>

data/app/views/bs5/examples/dropdowns/menu_items/_example.html.erb

@@ -0,0 +1,7 @@
+<h2>Menu items</h2>
+<%= bs5_example(snippet: 'dropdowns/menu_items/snippet1') %>
+<%= bs5_example(snippet: 'dropdowns/menu_items/snippet2') %>
+<h3>Active</h3>
+<%= bs5_example(snippet: 'dropdowns/menu_items/snippet3') %>
+<h3>Disabled</h3>
+<%= bs5_example(snippet: 'dropdowns/menu_items/snippet4') %>

data/app/views/bs5/examples/dropdowns/menu_items/snippet1.html.erb

@@ -0,0 +1,5 @@
+<%= bs5_dropdown('Dropdown') do |d| %>
+  <%= d.item do %><%= button_tag 'Action' %><% end %>
+  <%= d.item do %><%= button_tag 'Another action' %><% end %>
+  <%= d.item do %><%= button_tag 'Something else here' %><% end %>
+<% end %>

data/app/views/bs5/examples/dropdowns/menu_items/snippet2.html.erb

@@ -0,0 +1,6 @@
+<%= bs5_dropdown('Dropdown') do |d| %>
+  <%= d.item do %><span class="dropdown-item-text">Dropdown item text</span><% end %>
+  <%= d.item do %><%= link_to 'Action', '#' %><% end %>
+  <%= d.item do %><%= link_to 'Another action', '#' %><% end %>
+  <%= d.item do %><%= link_to 'Something else here', '#' %><% end %>
+<% end %>

data/app/views/bs5/examples/dropdowns/menu_items/snippet3.html.erb

@@ -0,0 +1,5 @@
+<%= bs5_dropdown('Dropdown') do |d| %>
+  <%= d.item do %><%= link_to 'Regular link', '#' %><% end %>
+  <%= d.item do %><%= link_to 'Active link', '#', class: 'active' %><% end %>
+  <%= d.item do %><%= link_to 'Another link', '#' %><% end %>
+<% end %>

data/app/views/bs5/examples/dropdowns/menu_items/snippet4.html.erb

@@ -0,0 +1,5 @@
+<%= bs5_dropdown('Dropdown') do |d| %>
+  <%= d.item do %><%= link_to 'Regular link', '#' %><% end %>
+  <%= d.item do %><%= link_to 'Disabled link', '#', class: 'disabled' %><% end %>
+  <%= d.item do %><%= link_to 'Another link', '#' %><% end %>
+<% end %>

data/app/views/bs5/examples/dropdowns/single/_example.html.erb

@@ -0,0 +1,4 @@
+<h3>Single button</h3>
+<%= bs5_example(snippet: 'dropdowns/single/snippet1') %>
+<%= bs5_example(snippet: 'dropdowns/single/snippet2') %>
+<%= bs5_example(snippet: 'dropdowns/single/snippet3') %>

data/app/views/bs5/examples/dropdowns/single/snippet1.html.erb

@@ -0,0 +1,5 @@
+<%= bs5_dropdown('Dropdown button') do |d| %>
+  <%= d.item do %><%= link_to 'Action', '#' %><% end %>
+  <%= d.item do %><%= link_to 'Another action', '#' %><% end %>
+  <%= d.item do %><%= link_to 'Something else here', '#' %><% end %>
+<% end %>

data/app/views/bs5/examples/dropdowns/single/snippet2.html.erb

@@ -0,0 +1,47 @@
+<%= bs5_button_group do %>
+  <%= bs5_dropdown('Primary', color: :primary) do |d| %>
+    <%= d.item do %><%= link_to 'Action', '#' %><% end %>
+    <%= d.item do %><%= link_to 'Another action', '#' %><% end %>
+    <%= d.item do %><%= link_to 'Something else here', '#' %><% end %>
+  <% end %>
+<% end %>
+
+<%= bs5_button_group do %>
+  <%= bs5_dropdown('Secondary', color: :secondary) do |d| %>
+    <%= d.item do %><%= link_to 'Action', '#' %><% end %>
+    <%= d.item do %><%= link_to 'Another action', '#' %><% end %>
+    <%= d.item do %><%= link_to 'Something else here', '#' %><% end %>
+  <% end %>
+<% end %>
+
+<%= bs5_button_group do %>
+  <%= bs5_dropdown('Success', color: :success) do |d| %>
+    <%= d.item do %><%= link_to 'Action', '#' %><% end %>
+    <%= d.item do %><%= link_to 'Another action', '#' %><% end %>
+    <%= d.item do %><%= link_to 'Something else here', '#' %><% end %>
+  <% end %>
+<% end %>
+
+<%= bs5_button_group do %>
+  <%= bs5_dropdown('Info', color: :info) do |d| %>
+    <%= d.item do %><%= link_to 'Action', '#' %><% end %>
+    <%= d.item do %><%= link_to 'Another action', '#' %><% end %>
+    <%= d.item do %><%= link_to 'Something else here', '#' %><% end %>
+  <% end %>
+<% end %>
+
+<%= bs5_button_group do %>
+  <%= bs5_dropdown('Warning', color: :warning) do |d| %>
+    <%= d.item do %><%= link_to 'Action', '#' %><% end %>
+    <%= d.item do %><%= link_to 'Another action', '#' %><% end %>
+    <%= d.item do %><%= link_to 'Something else here', '#' %><% end %>
+  <% end %>
+<% end %>
+
+<%= bs5_button_group do %>
+  <%= bs5_dropdown('Danger', color: :danger) do |d| %>
+    <%= d.item do %><%= link_to 'Action', '#' %><% end %>
+    <%= d.item do %><%= link_to 'Another action', '#' %><% end %>
+    <%= d.item do %><%= link_to 'Something else here', '#' %><% end %>
+  <% end %>
+<% end %>

data/app/views/bs5/examples/dropdowns/single/snippet3.html.erb

@@ -0,0 +1,47 @@
+<%= bs5_button_group do %>
+  <%= bs5_dropdown('Primary', color: :primary, outline: true) do |d| %>
+    <%= d.item do %><%= link_to 'Action', '#' %><% end %>
+    <%= d.item do %><%= link_to 'Another action', '#' %><% end %>
+    <%= d.item do %><%= link_to 'Something else here', '#' %><% end %>
+  <% end %>
+<% end %>
+
+<%= bs5_button_group do %>
+  <%= bs5_dropdown('Secondary', color: :secondary, outline: true) do |d| %>
+    <%= d.item do %><%= link_to 'Action', '#' %><% end %>
+    <%= d.item do %><%= link_to 'Another action', '#' %><% end %>
+    <%= d.item do %><%= link_to 'Something else here', '#' %><% end %>
+  <% end %>
+<% end %>
+
+<%= bs5_button_group do %>
+  <%= bs5_dropdown('Success', color: :success, outline: true) do |d| %>
+    <%= d.item do %><%= link_to 'Action', '#' %><% end %>
+    <%= d.item do %><%= link_to 'Another action', '#' %><% end %>
+    <%= d.item do %><%= link_to 'Something else here', '#' %><% end %>
+  <% end %>
+<% end %>
+
+<%= bs5_button_group do %>
+  <%= bs5_dropdown('Info', color: :info, outline: true) do |d| %>
+    <%= d.item do %><%= link_to 'Action', '#' %><% end %>
+    <%= d.item do %><%= link_to 'Another action', '#' %><% end %>
+    <%= d.item do %><%= link_to 'Something else here', '#' %><% end %>
+  <% end %>
+<% end %>
+
+<%= bs5_button_group do %>
+  <%= bs5_dropdown('Warning', color: :warning, outline: true) do |d| %>
+    <%= d.item do %><%= link_to 'Action', '#' %><% end %>
+    <%= d.item do %><%= link_to 'Another action', '#' %><% end %>
+    <%= d.item do %><%= link_to 'Something else here', '#' %><% end %>
+  <% end %>
+<% end %>
+
+<%= bs5_button_group do %>
+  <%= bs5_dropdown('Danger', color: :danger, outline: true) do |d| %>
+    <%= d.item do %><%= link_to 'Action', '#' %><% end %>
+    <%= d.item do %><%= link_to 'Another action', '#' %><% end %>
+    <%= d.item do %><%= link_to 'Something else here', '#' %><% end %>
+  <% end %>
+<% end %>