bs5 0.0.29 → 0.0.30
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/app/components/bs5/nav/item_component.html.erb +1 -0
- data/app/components/bs5/nav/item_component.rb +80 -0
- data/app/components/bs5/nav_component.html.erb +7 -0
- data/app/components/bs5/nav_component.rb +47 -0
- data/app/components/bs5/tabs/item_component.html.erb +3 -0
- data/app/components/bs5/tabs/item_component.rb +48 -0
- data/app/components/bs5/tabs/link_component.html.erb +1 -0
- data/app/components/bs5/tabs/link_component.rb +27 -0
- data/app/components/bs5/tabs_component.html.erb +16 -0
- data/app/components/bs5/tabs_component.rb +63 -0
- data/app/helpers/bs5/components_helper.rb +3 -3
- data/app/views/bs5/examples/navs_and_tabs/_base_nav.html.erb +2 -0
- data/app/views/bs5/examples/navs_and_tabs/_dropdowns.html.erb +5 -0
- data/app/views/bs5/examples/navs_and_tabs/_flex_utils.html.erb +2 -0
- data/app/views/bs5/examples/navs_and_tabs/_styles.html.erb +15 -0
- data/app/views/bs5/examples/navs_and_tabs/_tabs.html.erb +4 -0
- data/app/views/bs5/examples/navs_and_tabs/base_nav/snippet1.html.erb +6 -0
- data/app/views/bs5/examples/navs_and_tabs/dropdowns/snippet1.html.erb +14 -0
- data/app/views/bs5/examples/navs_and_tabs/dropdowns/snippet2.html.erb +14 -0
- data/app/views/bs5/examples/navs_and_tabs/flex_utils/snippet1.html.erb +6 -0
- data/app/views/bs5/examples/navs_and_tabs/styles/snippet1.html.erb +6 -0
- data/app/views/bs5/examples/navs_and_tabs/styles/snippet2.html.erb +6 -0
- data/app/views/bs5/examples/navs_and_tabs/styles/snippet3.html.erb +6 -0
- data/app/views/bs5/examples/navs_and_tabs/styles/snippet4.html.erb +6 -0
- data/app/views/bs5/examples/navs_and_tabs/styles/snippet5.html.erb +6 -0
- data/app/views/bs5/examples/navs_and_tabs/styles/snippet6.html.erb +6 -0
- data/app/views/bs5/examples/navs_and_tabs/styles/snippet7.html.erb +6 -0
- data/app/views/bs5/examples/navs_and_tabs/styles/snippet8.html.erb +6 -0
- data/app/views/bs5/examples/navs_and_tabs/styles/snippet9.html.erb +6 -0
- data/app/views/bs5/examples/navs_and_tabs/tabs/snippet1.html.erb +11 -0
- data/app/views/bs5/examples/navs_and_tabs/tabs/snippet2.html.erb +11 -0
- data/app/views/bs5/examples/navs_and_tabs/tabs/snippet3.html.erb +11 -0
- data/app/views/bs5/pages/navs_and_tabs.html.erb +6 -0
- data/app/views/layouts/bs5/pages.html.erb +1 -0
- data/lib/bs5/version.rb +1 -1
- metadata +34 -2
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 3cddc2280bdce3dfc49c8c980c0176cbdf80f0f5ad5ecf462482d3514818a7a9
|
4
|
+
data.tar.gz: 3b9c82cf6f9eeabb0752a9ab8f5d2c7019b339cc86dcd389d844d4eccb04c65d
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: c55b185ac6ee246cb9f2b0e853f13238b2f8c90962e2472c69a89d599d9cf003b3a4224718b3dd2d1991e106f7344c214ec9a68eb799101892b115c703fb41e8
|
7
|
+
data.tar.gz: b7bd776ed2d0701f63672cb1a4242c5d7e4a9f4f14ff597b9ef79bf9eb88e2f44098b6ce43c573ae3cd8c3601890a3aeed8a4e9c5960c8c5706ec2fc0f9c2378
|
@@ -0,0 +1 @@
|
|
1
|
+
<%= content %>
|
@@ -0,0 +1,80 @@
|
|
1
|
+
# frozen_string_literal: true
|
2
|
+
|
3
|
+
module Bs5
|
4
|
+
module Nav
|
5
|
+
class ItemComponent < ViewComponent::Base
|
6
|
+
def initialize(options = {})
|
7
|
+
@options = options.symbolize_keys
|
8
|
+
extract_options
|
9
|
+
end
|
10
|
+
|
11
|
+
private
|
12
|
+
|
13
|
+
def extract_options
|
14
|
+
@active = @options.delete(:active)
|
15
|
+
@disabled = @options.delete(:disabled)
|
16
|
+
end
|
17
|
+
|
18
|
+
def content
|
19
|
+
set_element_attributes
|
20
|
+
fragment.to_html.html_safe # rubocop:disable Rails/OutputSafety
|
21
|
+
end
|
22
|
+
|
23
|
+
def set_element_attributes
|
24
|
+
element['aria-current'] = 'page' if active?
|
25
|
+
|
26
|
+
if disabled?
|
27
|
+
element['aria-disabled'] = true
|
28
|
+
element['tabindex'] = -1
|
29
|
+
end
|
30
|
+
|
31
|
+
set_element_class_names
|
32
|
+
element.replace(element.to_html)
|
33
|
+
end
|
34
|
+
|
35
|
+
def set_element_class_names
|
36
|
+
class_names = Array(element[:class])
|
37
|
+
class_names << Array(@options[:class])
|
38
|
+
class_names << extra_classes
|
39
|
+
element[:class] = class_names.compact.uniq.join(' ')
|
40
|
+
end
|
41
|
+
|
42
|
+
def extra_classes
|
43
|
+
class_names = element_classes
|
44
|
+
class_names << active_class
|
45
|
+
class_names << disabled_class
|
46
|
+
class_names.compact.uniq
|
47
|
+
end
|
48
|
+
|
49
|
+
def element_classes
|
50
|
+
%w[nav-link]
|
51
|
+
end
|
52
|
+
|
53
|
+
def active_class
|
54
|
+
return unless active?
|
55
|
+
|
56
|
+
%w[active]
|
57
|
+
end
|
58
|
+
|
59
|
+
def disabled_class
|
60
|
+
return unless disabled?
|
61
|
+
|
62
|
+
%w[disabled]
|
63
|
+
end
|
64
|
+
|
65
|
+
def element
|
66
|
+
@element ||= fragment.at_css('button', 'a')
|
67
|
+
end
|
68
|
+
|
69
|
+
def fragment
|
70
|
+
@fragment ||= Nokogiri::HTML::DocumentFragment.parse(@content)
|
71
|
+
end
|
72
|
+
|
73
|
+
%i[active disabled].each do |name|
|
74
|
+
define_method("#{name}?") do
|
75
|
+
!!instance_variable_get("@#{name}")
|
76
|
+
end
|
77
|
+
end
|
78
|
+
end
|
79
|
+
end
|
80
|
+
end
|
@@ -0,0 +1,47 @@
|
|
1
|
+
# frozen_string_literal: true
|
2
|
+
|
3
|
+
module Bs5
|
4
|
+
class NavComponent < ViewComponent::Base
|
5
|
+
include ViewComponent::SlotableV2
|
6
|
+
|
7
|
+
renders_many :items, Bs5::Nav::ItemComponent
|
8
|
+
|
9
|
+
def initialize(options = {})
|
10
|
+
@options = options.symbolize_keys
|
11
|
+
extract_options
|
12
|
+
end
|
13
|
+
|
14
|
+
private
|
15
|
+
|
16
|
+
def extract_options
|
17
|
+
@style = @options.delete(:style)
|
18
|
+
@space = @options.delete(:space)
|
19
|
+
end
|
20
|
+
|
21
|
+
def component_class
|
22
|
+
class_names = Array(@options[:class])
|
23
|
+
class_names << ['nav']
|
24
|
+
class_names << style_class
|
25
|
+
class_names << space_class
|
26
|
+
class_names.join(' ')
|
27
|
+
end
|
28
|
+
|
29
|
+
def style_class
|
30
|
+
return unless style?
|
31
|
+
|
32
|
+
["nav-#{@style}"]
|
33
|
+
end
|
34
|
+
|
35
|
+
def space_class
|
36
|
+
return unless space?
|
37
|
+
|
38
|
+
["nav-#{@space}"]
|
39
|
+
end
|
40
|
+
|
41
|
+
%i[style space].each do |name|
|
42
|
+
define_method("#{name}?") do
|
43
|
+
!!instance_variable_get("@#{name}")
|
44
|
+
end
|
45
|
+
end
|
46
|
+
end
|
47
|
+
end
|
@@ -0,0 +1,48 @@
|
|
1
|
+
# frozen_string_literal: true
|
2
|
+
|
3
|
+
module Bs5
|
4
|
+
module Tabs
|
5
|
+
class ItemComponent < ViewComponent::Base
|
6
|
+
attr_reader :title, :options
|
7
|
+
attr_accessor :style
|
8
|
+
|
9
|
+
def initialize(title, options = {})
|
10
|
+
@title = title
|
11
|
+
@options = options.symbolize_keys
|
12
|
+
extract_options
|
13
|
+
end
|
14
|
+
|
15
|
+
def tab_id
|
16
|
+
"nav-#{object_id}-tab"
|
17
|
+
end
|
18
|
+
|
19
|
+
def pane_id
|
20
|
+
"nav-#{object_id}"
|
21
|
+
end
|
22
|
+
|
23
|
+
%i[active].each do |name|
|
24
|
+
define_method("#{name}?") do
|
25
|
+
!!instance_variable_get("@#{name}")
|
26
|
+
end
|
27
|
+
end
|
28
|
+
|
29
|
+
private
|
30
|
+
|
31
|
+
def extract_options
|
32
|
+
@active = @options.delete(:active)
|
33
|
+
end
|
34
|
+
|
35
|
+
def component_class
|
36
|
+
class_names = %w[tab-pane fade]
|
37
|
+
class_names << active_class
|
38
|
+
class_names.join(' ')
|
39
|
+
end
|
40
|
+
|
41
|
+
def active_class
|
42
|
+
return unless active?
|
43
|
+
|
44
|
+
%w[show active]
|
45
|
+
end
|
46
|
+
end
|
47
|
+
end
|
48
|
+
end
|
@@ -0,0 +1 @@
|
|
1
|
+
<%= link_to item.title, "##{item.pane_id}", class: component_class, id: item.tab_id, role: :tab, data: { bs_toggle: item.style }, aria: { controls: item.pane_id, selected: item.active? } %>
|
@@ -0,0 +1,27 @@
|
|
1
|
+
# frozen_string_literal: true
|
2
|
+
|
3
|
+
module Bs5
|
4
|
+
module Tabs
|
5
|
+
class LinkComponent < ViewComponent::Base
|
6
|
+
attr_reader :item
|
7
|
+
|
8
|
+
def initialize(item)
|
9
|
+
@item = item
|
10
|
+
end
|
11
|
+
|
12
|
+
def component_class
|
13
|
+
class_names = ['nav-link']
|
14
|
+
|
15
|
+
class_names << active_class
|
16
|
+
|
17
|
+
class_names.compact.join(' ')
|
18
|
+
end
|
19
|
+
|
20
|
+
def active_class
|
21
|
+
return unless item.active?
|
22
|
+
|
23
|
+
%w[active]
|
24
|
+
end
|
25
|
+
end
|
26
|
+
end
|
27
|
+
end
|
@@ -0,0 +1,16 @@
|
|
1
|
+
<% if items.any? %>
|
2
|
+
<%= vertical_container do %>
|
3
|
+
<nav>
|
4
|
+
<div class="<%= tablist_class %>" role="tablist">
|
5
|
+
<% items.each do |item| %>
|
6
|
+
<%= render Bs5::Tabs::LinkComponent.new(item) %>
|
7
|
+
<% end %>
|
8
|
+
</div>
|
9
|
+
</nav>
|
10
|
+
<div class="tab-content">
|
11
|
+
<% items.each do |item| %>
|
12
|
+
<%= item %>
|
13
|
+
<% end %>
|
14
|
+
</div>
|
15
|
+
<% end %>
|
16
|
+
<% end %>
|
@@ -0,0 +1,63 @@
|
|
1
|
+
# frozen_string_literal: true
|
2
|
+
|
3
|
+
module Bs5
|
4
|
+
class TabsComponent < ViewComponent::Base
|
5
|
+
include ViewComponent::SlotableV2
|
6
|
+
|
7
|
+
renders_many :items, Bs5::Tabs::ItemComponent
|
8
|
+
|
9
|
+
def initialize(options = {})
|
10
|
+
@options = options.symbolize_keys
|
11
|
+
extract_options
|
12
|
+
end
|
13
|
+
|
14
|
+
def before_render
|
15
|
+
items.each { |item| item.style = item_style }
|
16
|
+
end
|
17
|
+
|
18
|
+
private
|
19
|
+
|
20
|
+
def extract_options
|
21
|
+
@style = @options.delete(:style) || :pills
|
22
|
+
@vertical = @options.delete(:vertical)
|
23
|
+
end
|
24
|
+
|
25
|
+
def vertical_container(&block)
|
26
|
+
if vertical?
|
27
|
+
tag.div(class: 'd-flex align-items-start') do
|
28
|
+
capture(&block)
|
29
|
+
end
|
30
|
+
else
|
31
|
+
capture(&block)
|
32
|
+
end
|
33
|
+
end
|
34
|
+
|
35
|
+
def tablist_class
|
36
|
+
class_names = Array(@options[:class])
|
37
|
+
class_names << %w[nav]
|
38
|
+
class_names << style_class
|
39
|
+
class_names << vertical_class
|
40
|
+
class_names.join(' ')
|
41
|
+
end
|
42
|
+
|
43
|
+
def style_class
|
44
|
+
["nav-#{@style}"]
|
45
|
+
end
|
46
|
+
|
47
|
+
def vertical_class
|
48
|
+
return unless vertical?
|
49
|
+
|
50
|
+
['flex-column']
|
51
|
+
end
|
52
|
+
|
53
|
+
%i[vertical].each do |name|
|
54
|
+
define_method("#{name}?") do
|
55
|
+
!!instance_variable_get("@#{name}")
|
56
|
+
end
|
57
|
+
end
|
58
|
+
|
59
|
+
def item_style
|
60
|
+
@style.to_s.singularize
|
61
|
+
end
|
62
|
+
end
|
63
|
+
end
|
@@ -4,13 +4,13 @@ module Bs5
|
|
4
4
|
module ComponentsHelper
|
5
5
|
COMPONENTS = %w[accordion alert badge breadcrumb button_group button_tag button_to button_toolbar
|
6
6
|
carousel close_button
|
7
|
-
dropdown list_group modal spinner
|
7
|
+
dropdown list_group modal nav spinner
|
8
8
|
progress
|
9
|
-
toast toast_container].freeze
|
9
|
+
tabs toast toast_container].freeze
|
10
10
|
|
11
11
|
COMPONENTS.each do |name|
|
12
12
|
define_method("bs5_#{name}") do |*args, &block|
|
13
|
-
clazz = "Bs5::#{name.
|
13
|
+
clazz = "Bs5::#{name.camelize}Component".constantize
|
14
14
|
render_component(clazz, *args, &block)
|
15
15
|
end
|
16
16
|
end
|
@@ -0,0 +1,15 @@
|
|
1
|
+
<h2>Available styles</h2>
|
2
|
+
<h3>Horizontal alignment</h3>
|
3
|
+
<%= bs5_example(snippet: 'navs_and_tabs/styles/snippet1') %>
|
4
|
+
<%= bs5_example(snippet: 'navs_and_tabs/styles/snippet2') %>
|
5
|
+
<h3>Vertical</h3>
|
6
|
+
<%= bs5_example(snippet: 'navs_and_tabs/styles/snippet3') %>
|
7
|
+
<h3>Tabs</h3>
|
8
|
+
<%= bs5_example(snippet: 'navs_and_tabs/styles/snippet4') %>
|
9
|
+
<h3>Pills</h3>
|
10
|
+
<%= bs5_example(snippet: 'navs_and_tabs/styles/snippet5') %>
|
11
|
+
<h3>Fill and justify</h3>
|
12
|
+
<%= bs5_example(snippet: 'navs_and_tabs/styles/snippet6') %>
|
13
|
+
<%= bs5_example(snippet: 'navs_and_tabs/styles/snippet7') %>
|
14
|
+
<%= bs5_example(snippet: 'navs_and_tabs/styles/snippet8') %>
|
15
|
+
<%= bs5_example(snippet: 'navs_and_tabs/styles/snippet9') %>
|
@@ -0,0 +1,6 @@
|
|
1
|
+
<%= bs5_nav do |n| %>
|
2
|
+
<% n.item(active: true) do %><%= link_to 'Active', '#' %><% end %>
|
3
|
+
<% n.item do %><%= link_to 'Link', '#' %><% end %>
|
4
|
+
<% n.item do %><%= link_to 'Link', '#' %><% end %>
|
5
|
+
<% n.item(disabled: true) do %><%= link_to 'Disabled', '#' %><% end %>
|
6
|
+
<%- end %>
|
@@ -0,0 +1,14 @@
|
|
1
|
+
<%= bs5_nav(style: :tabs) do |n| %>
|
2
|
+
<% n.item(active: true) do %><%= link_to 'Active', '#' %><% end %>
|
3
|
+
<% n.item do %>
|
4
|
+
<%= bs5_dropdown('Dropdown', color: :link) do |d| %>
|
5
|
+
<%= d.item do %><%= link_to 'Action', '#' %><% end %>
|
6
|
+
<%= d.item do %><%= link_to 'Another action', '#' %><% end %>
|
7
|
+
<%= d.item do %><%= link_to 'Something else here', '#' %><% end %>
|
8
|
+
<%= d.item do %><% end %>
|
9
|
+
<%= d.item do %><%= link_to 'Separated link', '#' %><% end %>
|
10
|
+
<% end %>
|
11
|
+
<% end %>
|
12
|
+
<% n.item do %><%= link_to 'Link', '#' %><% end %>
|
13
|
+
<% n.item(disabled: true) do %><%= link_to 'Disabled', '#' %><% end %>
|
14
|
+
<%- end %>
|
@@ -0,0 +1,14 @@
|
|
1
|
+
<%= bs5_nav(style: :pills) do |n| %>
|
2
|
+
<% n.item(active: true) do %><%= link_to 'Active', '#' %><% end %>
|
3
|
+
<% n.item do %>
|
4
|
+
<%= bs5_dropdown('Dropdown', color: :link) do |d| %>
|
5
|
+
<%= d.item do %><%= link_to 'Action', '#' %><% end %>
|
6
|
+
<%= d.item do %><%= link_to 'Another action', '#' %><% end %>
|
7
|
+
<%= d.item do %><%= link_to 'Something else here', '#' %><% end %>
|
8
|
+
<%= d.item do %><% end %>
|
9
|
+
<%= d.item do %><%= link_to 'Separated link', '#' %><% end %>
|
10
|
+
<% end %>
|
11
|
+
<% end %>
|
12
|
+
<% n.item do %><%= link_to 'Link', '#' %><% end %>
|
13
|
+
<% n.item(disabled: true) do %><%= link_to 'Disabled', '#' %><% end %>
|
14
|
+
<%- end %>
|
@@ -0,0 +1,6 @@
|
|
1
|
+
<%= bs5_nav(style: :pills, class: 'flex-column flex-sm-row') do |n| %>
|
2
|
+
<% n.item(active: true, class: 'flex-sm-fill text-sm-center') do %><%= link_to 'Active', '#' %><% end %>
|
3
|
+
<% n.item(class: 'flex-sm-fill text-sm-center') do %><%= link_to 'Longer nav link', '#' %><% end %>
|
4
|
+
<% n.item(class: 'flex-sm-fill text-sm-center') do %><%= link_to 'Link', '#' %><% end %>
|
5
|
+
<% n.item(disabled: true, class: 'flex-sm-fill text-sm-center') do %><%= link_to 'Disabled', '#' %><% end %>
|
6
|
+
<%- end %>
|
@@ -0,0 +1,6 @@
|
|
1
|
+
<%= bs5_nav(class: 'justify-content-center') do |n| %>
|
2
|
+
<% n.item(active: true) do %><%= link_to 'Active', '#' %><% end %>
|
3
|
+
<% n.item do %><%= link_to 'Link', '#' %><% end %>
|
4
|
+
<% n.item do %><%= link_to 'Link', '#' %><% end %>
|
5
|
+
<% n.item(disabled: true) do %><%= link_to 'Disabled', '#' %><% end %>
|
6
|
+
<%- end %>
|
@@ -0,0 +1,6 @@
|
|
1
|
+
<%= bs5_nav(class: 'justify-content-end') do |n| %>
|
2
|
+
<% n.item(active: true) do %><%= link_to 'Active', '#' %><% end %>
|
3
|
+
<% n.item do %><%= link_to 'Link', '#' %><% end %>
|
4
|
+
<% n.item do %><%= link_to 'Link', '#' %><% end %>
|
5
|
+
<% n.item(disabled: true) do %><%= link_to 'Disabled', '#' %><% end %>
|
6
|
+
<%- end %>
|
@@ -0,0 +1,6 @@
|
|
1
|
+
<%= bs5_nav(class: 'flex-column') do |n| %>
|
2
|
+
<% n.item(active: true) do %><%= link_to 'Active', '#' %><% end %>
|
3
|
+
<% n.item do %><%= link_to 'Link', '#' %><% end %>
|
4
|
+
<% n.item do %><%= link_to 'Link', '#' %><% end %>
|
5
|
+
<% n.item(disabled: true) do %><%= link_to 'Disabled', '#' %><% end %>
|
6
|
+
<%- end %>
|
@@ -0,0 +1,6 @@
|
|
1
|
+
<%= bs5_nav(style: :tabs) do |n| %>
|
2
|
+
<% n.item(active: true) do %><%= link_to 'Active', '#' %><% end %>
|
3
|
+
<% n.item do %><%= link_to 'Link', '#' %><% end %>
|
4
|
+
<% n.item do %><%= link_to 'Link', '#' %><% end %>
|
5
|
+
<% n.item(disabled: true) do %><%= link_to 'Disabled', '#' %><% end %>
|
6
|
+
<%- end %>
|
@@ -0,0 +1,6 @@
|
|
1
|
+
<%= bs5_nav(style: :pills) do |n| %>
|
2
|
+
<% n.item(active: true) do %><%= link_to 'Active', '#' %><% end %>
|
3
|
+
<% n.item do %><%= link_to 'Link', '#' %><% end %>
|
4
|
+
<% n.item do %><%= link_to 'Link', '#' %><% end %>
|
5
|
+
<% n.item(disabled: true) do %><%= link_to 'Disabled', '#' %><% end %>
|
6
|
+
<%- end %>
|
@@ -0,0 +1,6 @@
|
|
1
|
+
<%= bs5_nav(style: :pills, space: :fill) do |n| %>
|
2
|
+
<% n.item(active: true) do %><%= link_to 'Active', '#' %><% end %>
|
3
|
+
<% n.item do %><%= link_to 'Much longer nav link', '#' %><% end %>
|
4
|
+
<% n.item do %><%= link_to 'Link', '#' %><% end %>
|
5
|
+
<% n.item(disabled: true) do %><%= link_to 'Disabled', '#' %><% end %>
|
6
|
+
<%- end %>
|
@@ -0,0 +1,6 @@
|
|
1
|
+
<%= bs5_nav(style: :tabs, space: :fill) do |n| %>
|
2
|
+
<% n.item(active: true) do %><%= link_to 'Active', '#' %><% end %>
|
3
|
+
<% n.item do %><%= link_to 'Much longer nav link', '#' %><% end %>
|
4
|
+
<% n.item do %><%= link_to 'Link', '#' %><% end %>
|
5
|
+
<% n.item(disabled: true) do %><%= link_to 'Disabled', '#' %><% end %>
|
6
|
+
<%- end %>
|
@@ -0,0 +1,6 @@
|
|
1
|
+
<%= bs5_nav(style: :pills, space: :justified) do |n| %>
|
2
|
+
<% n.item(active: true) do %><%= link_to 'Active', '#' %><% end %>
|
3
|
+
<% n.item do %><%= link_to 'Much longer nav link', '#' %><% end %>
|
4
|
+
<% n.item do %><%= link_to 'Link', '#' %><% end %>
|
5
|
+
<% n.item(disabled: true) do %><%= link_to 'Disabled', '#' %><% end %>
|
6
|
+
<%- end %>
|
@@ -0,0 +1,6 @@
|
|
1
|
+
<%= bs5_nav(style: :tabs, space: :justified) do |n| %>
|
2
|
+
<% n.item(active: true) do %><%= link_to 'Active', '#' %><% end %>
|
3
|
+
<% n.item do %><%= link_to 'Much longer nav link', '#' %><% end %>
|
4
|
+
<% n.item do %><%= link_to 'Link', '#' %><% end %>
|
5
|
+
<% n.item(disabled: true) do %><%= link_to 'Disabled', '#' %><% end %>
|
6
|
+
<%- end %>
|
@@ -0,0 +1,11 @@
|
|
1
|
+
<%= bs5_tabs(style: :tabs) do |n| %>
|
2
|
+
<% n.item('Home', active: true) do %>
|
3
|
+
<p class="mt-3">Et et consectetur ipsum labore excepteur est proident excepteur ad velit occaecat qui minim occaecat veniam. Fugiat veniam incididunt anim aliqua enim pariatur veniam sunt est aute sit dolor anim. Velit non irure adipisicing aliqua ullamco irure incididunt irure non esse consectetur nostrud minim non minim occaecat. Amet duis do nisi duis veniam non est eiusmod tempor incididunt tempor dolor ipsum in qui sit. Exercitation mollit sit culpa nisi culpa non adipisicing reprehenderit do dolore. Duis reprehenderit occaecat anim ullamco ad duis occaecat ex.</p>
|
4
|
+
<% end %>
|
5
|
+
<% n.item('Profile') do %>
|
6
|
+
<p class="mt-3">Nulla est ullamco ut irure incididunt nulla Lorem Lorem minim irure officia enim reprehenderit. Magna duis labore cillum sint adipisicing exercitation ipsum. Nostrud ut anim non exercitation velit laboris fugiat cupidatat. Commodo esse dolore fugiat sint velit ullamco magna consequat voluptate minim amet aliquip ipsum aute laboris nisi. Labore labore veniam irure irure ipsum pariatur mollit magna in cupidatat dolore magna irure esse tempor ad mollit. Dolore commodo nulla minim amet ipsum officia consectetur amet ullamco voluptate nisi commodo ea sit eu.</p>
|
7
|
+
<% end %>
|
8
|
+
<% n.item('Contact') do %>
|
9
|
+
<p class="mt-3">Sint sit mollit irure quis est nostrud cillum consequat Lorem esse do quis dolor esse fugiat sunt do. Eu ex commodo veniam Lorem aliquip laborum occaecat qui Lorem esse mollit dolore anim cupidatat. Deserunt officia id Lorem nostrud aute id commodo elit eiusmod enim irure amet eiusmod qui reprehenderit nostrud tempor. Fugiat ipsum excepteur in aliqua non et quis aliquip ad irure in labore cillum elit enim. Consequat aliquip incididunt ipsum et minim laborum laborum laborum et cillum labore. Deserunt adipisicing cillum id nulla minim nostrud labore eiusmod et amet. Laboris consequat consequat commodo non ut non aliquip reprehenderit nulla anim occaecat. Sunt sit ullamco reprehenderit irure ea ullamco Lorem aute nostrud magna.</p>
|
10
|
+
<% end %>
|
11
|
+
<%- end %>
|
@@ -0,0 +1,11 @@
|
|
1
|
+
<%= bs5_tabs(style: :pills) do |n| %>
|
2
|
+
<% n.item('Home', active: true) do %>
|
3
|
+
<p class="mt-3">Et et consectetur ipsum labore excepteur est proident excepteur ad velit occaecat qui minim occaecat veniam. Fugiat veniam incididunt anim aliqua enim pariatur veniam sunt est aute sit dolor anim. Velit non irure adipisicing aliqua ullamco irure incididunt irure non esse consectetur nostrud minim non minim occaecat. Amet duis do nisi duis veniam non est eiusmod tempor incididunt tempor dolor ipsum in qui sit. Exercitation mollit sit culpa nisi culpa non adipisicing reprehenderit do dolore. Duis reprehenderit occaecat anim ullamco ad duis occaecat ex.</p>
|
4
|
+
<% end %>
|
5
|
+
<% n.item('Profile') do %>
|
6
|
+
<p class="mt-3">Nulla est ullamco ut irure incididunt nulla Lorem Lorem minim irure officia enim reprehenderit. Magna duis labore cillum sint adipisicing exercitation ipsum. Nostrud ut anim non exercitation velit laboris fugiat cupidatat. Commodo esse dolore fugiat sint velit ullamco magna consequat voluptate minim amet aliquip ipsum aute laboris nisi. Labore labore veniam irure irure ipsum pariatur mollit magna in cupidatat dolore magna irure esse tempor ad mollit. Dolore commodo nulla minim amet ipsum officia consectetur amet ullamco voluptate nisi commodo ea sit eu.</p>
|
7
|
+
<% end %>
|
8
|
+
<% n.item('Contact') do %>
|
9
|
+
<p class="mt-3">Sint sit mollit irure quis est nostrud cillum consequat Lorem esse do quis dolor esse fugiat sunt do. Eu ex commodo veniam Lorem aliquip laborum occaecat qui Lorem esse mollit dolore anim cupidatat. Deserunt officia id Lorem nostrud aute id commodo elit eiusmod enim irure amet eiusmod qui reprehenderit nostrud tempor. Fugiat ipsum excepteur in aliqua non et quis aliquip ad irure in labore cillum elit enim. Consequat aliquip incididunt ipsum et minim laborum laborum laborum et cillum labore. Deserunt adipisicing cillum id nulla minim nostrud labore eiusmod et amet. Laboris consequat consequat commodo non ut non aliquip reprehenderit nulla anim occaecat. Sunt sit ullamco reprehenderit irure ea ullamco Lorem aute nostrud magna.</p>
|
10
|
+
<% end %>
|
11
|
+
<%- end %>
|
@@ -0,0 +1,11 @@
|
|
1
|
+
<%= bs5_tabs(vertical: true) do |n| %>
|
2
|
+
<% n.item('Home', active: true) do %>
|
3
|
+
<p class="ms-3">Et et consectetur ipsum labore excepteur est proident excepteur ad velit occaecat qui minim occaecat veniam. Fugiat veniam incididunt anim aliqua enim pariatur veniam sunt est aute sit dolor anim. Velit non irure adipisicing aliqua ullamco irure incididunt irure non esse consectetur nostrud minim non minim occaecat. Amet duis do nisi duis veniam non est eiusmod tempor incididunt tempor dolor ipsum in qui sit. Exercitation mollit sit culpa nisi culpa non adipisicing reprehenderit do dolore. Duis reprehenderit occaecat anim ullamco ad duis occaecat ex.</p>
|
4
|
+
<% end %>
|
5
|
+
<% n.item('Profile') do %>
|
6
|
+
<p class="ms-3">Nulla est ullamco ut irure incididunt nulla Lorem Lorem minim irure officia enim reprehenderit. Magna duis labore cillum sint adipisicing exercitation ipsum. Nostrud ut anim non exercitation velit laboris fugiat cupidatat. Commodo esse dolore fugiat sint velit ullamco magna consequat voluptate minim amet aliquip ipsum aute laboris nisi. Labore labore veniam irure irure ipsum pariatur mollit magna in cupidatat dolore magna irure esse tempor ad mollit. Dolore commodo nulla minim amet ipsum officia consectetur amet ullamco voluptate nisi commodo ea sit eu.</p>
|
7
|
+
<% end %>
|
8
|
+
<% n.item('Contact') do %>
|
9
|
+
<p class="ms-3">Sint sit mollit irure quis est nostrud cillum consequat Lorem esse do quis dolor esse fugiat sunt do. Eu ex commodo veniam Lorem aliquip laborum occaecat qui Lorem esse mollit dolore anim cupidatat. Deserunt officia id Lorem nostrud aute id commodo elit eiusmod enim irure amet eiusmod qui reprehenderit nostrud tempor. Fugiat ipsum excepteur in aliqua non et quis aliquip ad irure in labore cillum elit enim. Consequat aliquip incididunt ipsum et minim laborum laborum laborum et cillum labore. Deserunt adipisicing cillum id nulla minim nostrud labore eiusmod et amet. Laboris consequat consequat commodo non ut non aliquip reprehenderit nulla anim occaecat. Sunt sit ullamco reprehenderit irure ea ullamco Lorem aute nostrud magna.</p>
|
10
|
+
<% end %>
|
11
|
+
<%- end %>
|
@@ -0,0 +1,6 @@
|
|
1
|
+
<h1>Navs and tabs</h1>
|
2
|
+
<%= render 'bs5/examples/navs_and_tabs/base_nav' %>
|
3
|
+
<%= render 'bs5/examples/navs_and_tabs/styles' %>
|
4
|
+
<%= render 'bs5/examples/navs_and_tabs/flex_utils' %>
|
5
|
+
<%= render 'bs5/examples/navs_and_tabs/dropdowns' %>
|
6
|
+
<%= render 'bs5/examples/navs_and_tabs/tabs' %>
|
@@ -26,6 +26,7 @@
|
|
26
26
|
<% lg.item(active: current_page?(pages_path('dropdowns'))) do %><%= link_to 'Dropdowns', pages_path('dropdowns') %><% end %>
|
27
27
|
<% lg.item(active: current_page?(pages_path('list_group'))) do %><%= link_to 'List group', pages_path('list_group') %><% end %>
|
28
28
|
<% lg.item(active: current_page?(pages_path('modal'))) do %><%= link_to 'Modal', pages_path('modal') %><% end %>
|
29
|
+
<% lg.item(active: current_page?(pages_path('navs_and_tabs'))) do %><%= link_to 'Navs & tabs', pages_path('navs_and_tabs') %><% end %>
|
29
30
|
<% lg.item(active: current_page?(pages_path('popovers'))) do %><%= link_to 'Popovers', pages_path('popovers') %><% end %>
|
30
31
|
<% lg.item(active: current_page?(pages_path('progress'))) do %><%= link_to 'Progress', pages_path('progress') %><% end %>
|
31
32
|
<% lg.item(active: current_page?(pages_path('spinners'))) do %><%= link_to 'Spinners', pages_path('spinners') %><% end %>
|
data/lib/bs5/version.rb
CHANGED
metadata
CHANGED
@@ -1,14 +1,14 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: bs5
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 0.0.
|
4
|
+
version: 0.0.30
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- Patrick Baselier
|
8
8
|
autorequire:
|
9
9
|
bindir: bin
|
10
10
|
cert_chain: []
|
11
|
-
date:
|
11
|
+
date: 2021-01-06 00:00:00.000000000 Z
|
12
12
|
dependencies:
|
13
13
|
- !ruby/object:Gem::Dependency
|
14
14
|
name: nokogiri
|
@@ -167,12 +167,22 @@ files:
|
|
167
167
|
- app/components/bs5/modal/header_component.rb
|
168
168
|
- app/components/bs5/modal_component.html.erb
|
169
169
|
- app/components/bs5/modal_component.rb
|
170
|
+
- app/components/bs5/nav/item_component.html.erb
|
171
|
+
- app/components/bs5/nav/item_component.rb
|
172
|
+
- app/components/bs5/nav_component.html.erb
|
173
|
+
- app/components/bs5/nav_component.rb
|
170
174
|
- app/components/bs5/progress/bar_component.html.erb
|
171
175
|
- app/components/bs5/progress/bar_component.rb
|
172
176
|
- app/components/bs5/progress_component.html.erb
|
173
177
|
- app/components/bs5/progress_component.rb
|
174
178
|
- app/components/bs5/spinner_component.html.erb
|
175
179
|
- app/components/bs5/spinner_component.rb
|
180
|
+
- app/components/bs5/tabs/item_component.html.erb
|
181
|
+
- app/components/bs5/tabs/item_component.rb
|
182
|
+
- app/components/bs5/tabs/link_component.html.erb
|
183
|
+
- app/components/bs5/tabs/link_component.rb
|
184
|
+
- app/components/bs5/tabs_component.html.erb
|
185
|
+
- app/components/bs5/tabs_component.rb
|
176
186
|
- app/components/bs5/toast/body_component.html.erb
|
177
187
|
- app/components/bs5/toast/body_component.rb
|
178
188
|
- app/components/bs5/toast/header_component.html.erb
|
@@ -319,6 +329,27 @@ files:
|
|
319
329
|
- app/views/bs5/examples/modal/examples/snippet4.html.erb
|
320
330
|
- app/views/bs5/examples/modal/fullscreen/snippet1.html.erb
|
321
331
|
- app/views/bs5/examples/modal/optional_sizes/snippet1.html.erb
|
332
|
+
- app/views/bs5/examples/navs_and_tabs/_base_nav.html.erb
|
333
|
+
- app/views/bs5/examples/navs_and_tabs/_dropdowns.html.erb
|
334
|
+
- app/views/bs5/examples/navs_and_tabs/_flex_utils.html.erb
|
335
|
+
- app/views/bs5/examples/navs_and_tabs/_styles.html.erb
|
336
|
+
- app/views/bs5/examples/navs_and_tabs/_tabs.html.erb
|
337
|
+
- app/views/bs5/examples/navs_and_tabs/base_nav/snippet1.html.erb
|
338
|
+
- app/views/bs5/examples/navs_and_tabs/dropdowns/snippet1.html.erb
|
339
|
+
- app/views/bs5/examples/navs_and_tabs/dropdowns/snippet2.html.erb
|
340
|
+
- app/views/bs5/examples/navs_and_tabs/flex_utils/snippet1.html.erb
|
341
|
+
- app/views/bs5/examples/navs_and_tabs/styles/snippet1.html.erb
|
342
|
+
- app/views/bs5/examples/navs_and_tabs/styles/snippet2.html.erb
|
343
|
+
- app/views/bs5/examples/navs_and_tabs/styles/snippet3.html.erb
|
344
|
+
- app/views/bs5/examples/navs_and_tabs/styles/snippet4.html.erb
|
345
|
+
- app/views/bs5/examples/navs_and_tabs/styles/snippet5.html.erb
|
346
|
+
- app/views/bs5/examples/navs_and_tabs/styles/snippet6.html.erb
|
347
|
+
- app/views/bs5/examples/navs_and_tabs/styles/snippet7.html.erb
|
348
|
+
- app/views/bs5/examples/navs_and_tabs/styles/snippet8.html.erb
|
349
|
+
- app/views/bs5/examples/navs_and_tabs/styles/snippet9.html.erb
|
350
|
+
- app/views/bs5/examples/navs_and_tabs/tabs/snippet1.html.erb
|
351
|
+
- app/views/bs5/examples/navs_and_tabs/tabs/snippet2.html.erb
|
352
|
+
- app/views/bs5/examples/navs_and_tabs/tabs/snippet3.html.erb
|
322
353
|
- app/views/bs5/examples/popovers/default/_example.html.erb
|
323
354
|
- app/views/bs5/examples/popovers/default/snippet.html.erb
|
324
355
|
- app/views/bs5/examples/popovers/disabled_elements/_example.html.erb
|
@@ -387,6 +418,7 @@ files:
|
|
387
418
|
- app/views/bs5/pages/dropdowns.html.erb
|
388
419
|
- app/views/bs5/pages/list_group.html.erb
|
389
420
|
- app/views/bs5/pages/modal.html.erb
|
421
|
+
- app/views/bs5/pages/navs_and_tabs.html.erb
|
390
422
|
- app/views/bs5/pages/popovers.html.erb
|
391
423
|
- app/views/bs5/pages/progress.html.erb
|
392
424
|
- app/views/bs5/pages/spinners.html.erb
|