element_component 0.7.0 → 0.8.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (24) hide show
  1. checksums.yaml +4 -4
  2. data/AGENTS.md +2 -2
  3. data/README.md +83 -83
  4. data/examples/alert_example.rb +10 -10
  5. data/examples/badge_example.rb +2 -2
  6. data/examples/breadcrumb_example.rb +14 -10
  7. data/examples/button_example.rb +2 -2
  8. data/examples/button_group_example.rb +3 -3
  9. data/examples/card_example.rb +13 -13
  10. data/examples/carousel_example.rb +26 -24
  11. data/examples/close_button_example.rb +2 -2
  12. data/examples/dropdown_example.rb +46 -38
  13. data/examples/list_group_example.rb +26 -18
  14. data/examples/modal_example.rb +23 -21
  15. data/examples/nav_example.rb +25 -23
  16. data/examples/navbar_example.rb +38 -30
  17. data/examples/pagination_example.rb +16 -16
  18. data/examples/progress_example.rb +12 -12
  19. data/examples/spinner_example.rb +2 -2
  20. data/examples/table_example.rb +3 -3
  21. data/lib/element_component/components/dropdown.rb +1 -1
  22. data/lib/element_component/element.rb +5 -3
  23. data/lib/element_component/version.rb +1 -1
  24. metadata +1 -1
data/examples/dropdown_example.rb CHANGED
@@ -5,22 +5,22 @@ require_relative "../lib/element_component"
5
5
  # =============================================================================
6
6
  # Basic Dropdown
7
7
  # =============================================================================
8
- dropdown = ElementComponent::Components::Dropdown.new do
9
- add_content(
8
+ dropdown = ElementComponent::Components::Dropdown.new do |d|
9
+ d.add_content(
10
10
  ElementComponent::Element.new("button",
11
11
  class: "btn btn-secondary dropdown-toggle",
12
12
  type: "button",
13
13
  "data-bs-toggle": "dropdown",
14
- "aria-expanded": "false") do
15
- add_content("Dropdown")
14
+ "aria-expanded": "false") do |btn|
15
+ btn.add_content("Dropdown")
16
16
  end
17
17
  )
18
- add_content(
19
- ElementComponent::Components::DropdownMenu.new do
20
- add_content(ElementComponent::Components::DropdownItem.new { add_content("Action") })
21
- add_content(ElementComponent::Components::DropdownItem.new { add_content("Another action") })
22
- add_content(ElementComponent::Components::DropdownDivider.new)
23
- add_content(ElementComponent::Components::DropdownItem.new { add_content("Something else") })
18
+ d.add_content(
19
+ ElementComponent::Components::DropdownMenu.new do |menu|
20
+ menu.add_content(ElementComponent::Components::DropdownItem.new { |item| item.add_content("Action") })
21
+ menu.add_content(ElementComponent::Components::DropdownItem.new { |item| item.add_content("Another action") })
22
+ menu.add_content(ElementComponent::Components::DropdownDivider.new)
23
+ menu.add_content(ElementComponent::Components::DropdownItem.new { |item| item.add_content("Something else") })
24
24
  end
25
25
  )
26
26
  end
@@ -31,22 +31,26 @@ puts
31
31
  # =============================================================================
32
32
  # Dropdown with Active and Disabled Items
33
33
  # =============================================================================
34
- dropdown = ElementComponent::Components::Dropdown.new do
35
- add_content(
34
+ dropdown = ElementComponent::Components::Dropdown.new do |d|
35
+ d.add_content(
36
36
  ElementComponent::Element.new("button",
37
37
  class: "btn btn-primary dropdown-toggle",
38
38
  type: "button",
39
39
  "data-bs-toggle": "dropdown",
40
- "aria-expanded": "false") do
41
- add_content("Menu")
40
+ "aria-expanded": "false") do |btn|
41
+ btn.add_content("Menu")
42
42
  end
43
43
  )
44
- add_content(
45
- ElementComponent::Components::DropdownMenu.new do
46
- add_content(ElementComponent::Components::DropdownHeader.new { add_content("Section 1") })
47
- add_content(ElementComponent::Components::DropdownItem.new { add_content("Regular item") })
48
- add_content(ElementComponent::Components::DropdownItem.new(active: true) { add_content("Active item") })
49
- add_content(ElementComponent::Components::DropdownItem.new(disabled: true) { add_content("Disabled item") })
44
+ d.add_content(
45
+ ElementComponent::Components::DropdownMenu.new do |menu|
46
+ menu.add_content(ElementComponent::Components::DropdownHeader.new { |h| h.add_content("Section 1") })
47
+ menu.add_content(ElementComponent::Components::DropdownItem.new { |item| item.add_content("Regular item") })
48
+ menu.add_content(ElementComponent::Components::DropdownItem.new(active: true) do |item|
49
+ item.add_content("Active item")
50
+ end)
51
+ menu.add_content(ElementComponent::Components::DropdownItem.new(disabled: true) do |item|
52
+ item.add_content("Disabled item")
53
+ end)
50
54
  end
51
55
  )
52
56
  end
@@ -57,20 +61,24 @@ puts
57
61
  # =============================================================================
58
62
  # Dropdown Type Button Items
59
63
  # =============================================================================
60
- dropdown = ElementComponent::Components::Dropdown.new do
61
- add_content(
64
+ dropdown = ElementComponent::Components::Dropdown.new do |d|
65
+ d.add_content(
62
66
  ElementComponent::Element.new("button",
63
67
  class: "btn btn-success dropdown-toggle",
64
68
  type: "button",
65
69
  "data-bs-toggle": "dropdown",
66
- "aria-expanded": "false") do
67
- add_content("Actions")
70
+ "aria-expanded": "false") do |btn|
71
+ btn.add_content("Actions")
68
72
  end
69
73
  )
70
- add_content(
71
- ElementComponent::Components::DropdownMenu.new do
72
- add_content(ElementComponent::Components::DropdownItem.new(type: :button) { add_content("Save") })
73
- add_content(ElementComponent::Components::DropdownItem.new(type: :button) { add_content("Delete") })
74
+ d.add_content(
75
+ ElementComponent::Components::DropdownMenu.new do |menu|
76
+ menu.add_content(ElementComponent::Components::DropdownItem.new(type: :button) do |item|
77
+ item.add_content("Save")
78
+ end)
79
+ menu.add_content(ElementComponent::Components::DropdownItem.new(type: :button) do |item|
80
+ item.add_content("Delete")
81
+ end)
74
82
  end
75
83
  )
76
84
  end
@@ -81,20 +89,20 @@ puts
81
89
  # =============================================================================
82
90
  # Dropup Direction
83
91
  # =============================================================================
84
- dropdown = ElementComponent::Components::Dropdown.new(direction: :dropup) do
85
- add_content(
92
+ dropdown = ElementComponent::Components::Dropdown.new(direction: :dropup) do |d|
93
+ d.add_content(
86
94
  ElementComponent::Element.new("button",
87
95
  class: "btn btn-warning dropdown-toggle",
88
96
  type: "button",
89
97
  "data-bs-toggle": "dropdown",
90
- "aria-expanded": "false") do
91
- add_content("Up")
98
+ "aria-expanded": "false") do |btn|
99
+ btn.add_content("Up")
92
100
  end
93
101
  )
94
- add_content(
95
- ElementComponent::Components::DropdownMenu.new do
96
- add_content(ElementComponent::Components::DropdownItem.new { add_content("Item 1") })
97
- add_content(ElementComponent::Components::DropdownItem.new { add_content("Item 2") })
102
+ d.add_content(
103
+ ElementComponent::Components::DropdownMenu.new do |menu|
104
+ menu.add_content(ElementComponent::Components::DropdownItem.new { |item| item.add_content("Item 1") })
105
+ menu.add_content(ElementComponent::Components::DropdownItem.new { |item| item.add_content("Item 2") })
98
106
  end
99
107
  )
100
108
  end
@@ -110,7 +118,7 @@ puts ElementComponent::Components::DropdownMenu.new.render
110
118
  puts
111
119
 
112
120
  puts "=== DropdownItem ==="
113
- dropdown_item = ElementComponent::Components::DropdownItem.new { add_content("Item") }
121
+ dropdown_item = ElementComponent::Components::DropdownItem.new { |item| item.add_content("Item") }
114
122
  puts dropdown_item.render
115
123
  puts
116
124
 
@@ -119,5 +127,5 @@ puts ElementComponent::Components::DropdownDivider.new.render
119
127
  puts
120
128
 
121
129
  puts "=== DropdownHeader ==="
122
- dropdown_header = ElementComponent::Components::DropdownHeader.new { add_content("Header") }
130
+ dropdown_header = ElementComponent::Components::DropdownHeader.new { |h| h.add_content("Header") }
123
131
  puts dropdown_header.render
data/examples/list_group_example.rb CHANGED
@@ -5,10 +5,10 @@ require_relative "../lib/element_component"
5
5
  # =============================================================================
6
6
  # Basic List Group
7
7
  # =============================================================================
8
- group = ElementComponent::Components::ListGroup.new do
9
- add_content(ElementComponent::Components::ListGroupItem.new { add_content("Item 1") })
10
- add_content(ElementComponent::Components::ListGroupItem.new { add_content("Item 2") })
11
- add_content(ElementComponent::Components::ListGroupItem.new { add_content("Item 3") })
8
+ group = ElementComponent::Components::ListGroup.new do |g|
9
+ g.add_content(ElementComponent::Components::ListGroupItem.new { |item| item.add_content("Item 1") })
10
+ g.add_content(ElementComponent::Components::ListGroupItem.new { |item| item.add_content("Item 2") })
11
+ g.add_content(ElementComponent::Components::ListGroupItem.new { |item| item.add_content("Item 3") })
12
12
  end
13
13
  puts "=== Basic List Group ==="
14
14
  puts group.render
@@ -17,9 +17,9 @@ puts
17
17
  # =============================================================================
18
18
  # Flush List Group
19
19
  # =============================================================================
20
- group = ElementComponent::Components::ListGroup.new(flush: true) do
21
- add_content(ElementComponent::Components::ListGroupItem.new { add_content("Flush Item 1") })
22
- add_content(ElementComponent::Components::ListGroupItem.new { add_content("Flush Item 2") })
20
+ group = ElementComponent::Components::ListGroup.new(flush: true) do |g|
21
+ g.add_content(ElementComponent::Components::ListGroupItem.new { |item| item.add_content("Flush Item 1") })
22
+ g.add_content(ElementComponent::Components::ListGroupItem.new { |item| item.add_content("Flush Item 2") })
23
23
  end
24
24
  puts "=== Flush List Group ==="
25
25
  puts group.render
@@ -28,10 +28,14 @@ puts
28
28
  # =============================================================================
29
29
  # Active and Disabled Items
30
30
  # =============================================================================
31
- group = ElementComponent::Components::ListGroup.new do
32
- add_content(ElementComponent::Components::ListGroupItem.new(active: true) { add_content("Active Item") })
33
- add_content(ElementComponent::Components::ListGroupItem.new { add_content("Regular Item") })
34
- add_content(ElementComponent::Components::ListGroupItem.new(disabled: true) { add_content("Disabled Item") })
31
+ group = ElementComponent::Components::ListGroup.new do |g|
32
+ g.add_content(ElementComponent::Components::ListGroupItem.new(active: true) do |item|
33
+ item.add_content("Active Item")
34
+ end)
35
+ g.add_content(ElementComponent::Components::ListGroupItem.new { |item| item.add_content("Regular Item") })
36
+ g.add_content(ElementComponent::Components::ListGroupItem.new(disabled: true) do |item|
37
+ item.add_content("Disabled Item")
38
+ end)
35
39
  end
36
40
  puts "=== Active and Disabled Items ==="
37
41
  puts group.render
@@ -40,9 +44,9 @@ puts
40
44
  # =============================================================================
41
45
  # List Group with Links
42
46
  # =============================================================================
43
- group = ElementComponent::Components::ListGroup.new do
44
- add_content(ElementComponent::Components::ListGroupItem.new(href: "/page1") { add_content("Link 1") })
45
- add_content(ElementComponent::Components::ListGroupItem.new(href: "/page2") { add_content("Link 2") })
47
+ group = ElementComponent::Components::ListGroup.new do |g|
48
+ g.add_content(ElementComponent::Components::ListGroupItem.new(href: "/page1") { |item| item.add_content("Link 1") })
49
+ g.add_content(ElementComponent::Components::ListGroupItem.new(href: "/page2") { |item| item.add_content("Link 2") })
46
50
  end
47
51
  puts "=== List Group with Links ==="
48
52
  puts group.render
@@ -51,10 +55,14 @@ puts
51
55
  # =============================================================================
52
56
  # Variant Items
53
57
  # =============================================================================
54
- group = ElementComponent::Components::ListGroup.new do
55
- add_content(ElementComponent::Components::ListGroupItem.new(variant: :success) { add_content("Success") })
56
- add_content(ElementComponent::Components::ListGroupItem.new(variant: :danger) { add_content("Danger") })
57
- add_content(ElementComponent::Components::ListGroupItem.new(variant: :warning) { add_content("Warning") })
58
+ group = ElementComponent::Components::ListGroup.new do |g|
59
+ g.add_content(ElementComponent::Components::ListGroupItem.new(variant: :success) do |item|
60
+ item.add_content("Success")
61
+ end)
62
+ g.add_content(ElementComponent::Components::ListGroupItem.new(variant: :danger) { |item| item.add_content("Danger") })
63
+ g.add_content(ElementComponent::Components::ListGroupItem.new(variant: :warning) do |item|
64
+ item.add_content("Warning")
65
+ end)
58
66
  end
59
67
  puts "=== Variant Items ==="
60
68
  puts group.render
data/examples/modal_example.rb CHANGED
@@ -7,14 +7,16 @@ require_relative "../lib/element_component"
7
7
  # =============================================================================
8
8
  modal = ElementComponent::Components::Modal.new(id: "basicModal")
9
9
  modal.add_content(
10
- ElementComponent::Components::ModalContent.new do
11
- add_content(ElementComponent::Components::ModalHeader.new do
12
- add_content(ElementComponent::Components::ModalTitle.new { add_content("Modal title") })
10
+ ElementComponent::Components::ModalContent.new do |mc|
11
+ mc.add_content(ElementComponent::Components::ModalHeader.new do |mh|
12
+ mh.add_content(ElementComponent::Components::ModalTitle.new { |mt| mt.add_content("Modal title") })
13
13
  end)
14
- add_content(ElementComponent::Components::ModalBody.new { add_content("Modal body text goes here.") })
15
- add_content(ElementComponent::Components::ModalFooter.new do
16
- add_content(ElementComponent::Components::Button.new(variant: :secondary) { add_content("Close") })
17
- add_content(ElementComponent::Components::Button.new(variant: :primary) { add_content("Save changes") })
14
+ mc.add_content(ElementComponent::Components::ModalBody.new { |mb| mb.add_content("Modal body text goes here.") })
15
+ mc.add_content(ElementComponent::Components::ModalFooter.new do |mf|
16
+ mf.add_content(ElementComponent::Components::Button.new(variant: :secondary) { |btn| btn.add_content("Close") })
17
+ mf.add_content(ElementComponent::Components::Button.new(variant: :primary) do |btn|
18
+ btn.add_content("Save changes")
19
+ end)
18
20
  end)
19
21
  end
20
22
  )
@@ -27,12 +29,12 @@ puts
27
29
  # =============================================================================
28
30
  modal = ElementComponent::Components::Modal.new(id: "scrollModal", scrollable: true)
29
31
  modal.add_content(
30
- ElementComponent::Components::ModalContent.new do
31
- add_content(ElementComponent::Components::ModalHeader.new do
32
- add_content(ElementComponent::Components::ModalTitle.new { add_content("Scrollable") })
32
+ ElementComponent::Components::ModalContent.new do |mc|
33
+ mc.add_content(ElementComponent::Components::ModalHeader.new do |mh|
34
+ mh.add_content(ElementComponent::Components::ModalTitle.new { |mt| mt.add_content("Scrollable") })
33
35
  end)
34
- add_content(ElementComponent::Components::ModalBody.new { add_content("Long content body...") })
35
- add_content(ElementComponent::Components::ModalFooter.new { add_content("Footer") })
36
+ mc.add_content(ElementComponent::Components::ModalBody.new { |mb| mb.add_content("Long content body...") })
37
+ mc.add_content(ElementComponent::Components::ModalFooter.new { |mf| mf.add_content("Footer") })
36
38
  end
37
39
  )
38
40
  puts "=== Scrollable Modal ==="
@@ -44,8 +46,8 @@ puts
44
46
  # =============================================================================
45
47
  modal = ElementComponent::Components::Modal.new(id: "centerModal", centered: true)
46
48
  modal.add_content(
47
- ElementComponent::Components::ModalContent.new do
48
- add_content(ElementComponent::Components::ModalBody.new { add_content("Centered content") })
49
+ ElementComponent::Components::ModalContent.new do |mc|
50
+ mc.add_content(ElementComponent::Components::ModalBody.new { |mb| mb.add_content("Centered content") })
49
51
  end
50
52
  )
51
53
  puts "=== Centered Modal ==="
@@ -57,8 +59,8 @@ puts
57
59
  # =============================================================================
58
60
  modal = ElementComponent::Components::Modal.new(id: "lgModal", size: :lg)
59
61
  modal.add_content(
60
- ElementComponent::Components::ModalContent.new do
61
- add_content(ElementComponent::Components::ModalBody.new { add_content("Large modal body") })
62
+ ElementComponent::Components::ModalContent.new do |mc|
63
+ mc.add_content(ElementComponent::Components::ModalBody.new { |mb| mb.add_content("Large modal body") })
62
64
  end
63
65
  )
64
66
  puts "=== Large Modal ==="
@@ -70,8 +72,8 @@ puts
70
72
  # =============================================================================
71
73
  modal = ElementComponent::Components::Modal.new(id: "staticModal", static: true)
72
74
  modal.add_content(
73
- ElementComponent::Components::ModalContent.new do
74
- add_content(ElementComponent::Components::ModalBody.new { add_content("Click outside does not close") })
75
+ ElementComponent::Components::ModalContent.new do |mc|
76
+ mc.add_content(ElementComponent::Components::ModalBody.new { |mb| mb.add_content("Click outside does not close") })
75
77
  end
76
78
  )
77
79
  puts "=== Static Backdrop Modal ==="
@@ -83,9 +85,9 @@ puts
83
85
  # =============================================================================
84
86
  modal = ElementComponent::Components::Modal.new(id: "noCloseModal")
85
87
  modal.add_content(
86
- ElementComponent::Components::ModalContent.new do
87
- add_content(ElementComponent::Components::ModalHeader.new(close_button: false) do
88
- add_content(ElementComponent::Components::ModalTitle.new { add_content("No close button") })
88
+ ElementComponent::Components::ModalContent.new do |mc|
89
+ mc.add_content(ElementComponent::Components::ModalHeader.new(close_button: false) do |mh|
90
+ mh.add_content(ElementComponent::Components::ModalTitle.new { |mt| mt.add_content("No close button") })
89
91
  end)
90
92
  end
91
93
  )
data/examples/nav_example.rb CHANGED
@@ -13,16 +13,18 @@ puts
13
13
  # =============================================================================
14
14
  # Nav Tabs
15
15
  # =============================================================================
16
- nav = ElementComponent::Components::Nav.new(type: :tabs) do
17
- add_content(ElementComponent::Components::NavItem.new do
18
- add_content(ElementComponent::Components::NavLink.new(href: "/", active: true) { add_content("Home") })
16
+ nav = ElementComponent::Components::Nav.new(type: :tabs) do |n|
17
+ n.add_content(ElementComponent::Components::NavItem.new do |item|
18
+ item.add_content(ElementComponent::Components::NavLink.new(href: "/", active: true) do |link|
19
+ link.add_content("Home")
20
+ end)
19
21
  end)
20
- add_content(ElementComponent::Components::NavItem.new do
21
- add_content(ElementComponent::Components::NavLink.new(href: "/profile") { add_content("Profile") })
22
+ n.add_content(ElementComponent::Components::NavItem.new do |item|
23
+ item.add_content(ElementComponent::Components::NavLink.new(href: "/profile") { |link| link.add_content("Profile") })
22
24
  end)
23
- add_content(ElementComponent::Components::NavItem.new do
24
- add_content(ElementComponent::Components::NavLink.new(href: "/messages", disabled: true) do
25
- add_content("Messages")
25
+ n.add_content(ElementComponent::Components::NavItem.new do |item|
26
+ item.add_content(ElementComponent::Components::NavLink.new(href: "/messages", disabled: true) do |link|
27
+ link.add_content("Messages")
26
28
  end)
27
29
  end)
28
30
  end
@@ -33,12 +35,12 @@ puts
33
35
  # =============================================================================
34
36
  # Nav Pills
35
37
  # =============================================================================
36
- nav = ElementComponent::Components::Nav.new(type: :pills) do
37
- add_content(ElementComponent::Components::NavItem.new do
38
- add_content(ElementComponent::Components::NavLink.new(href: "/") { add_content("Home") })
38
+ nav = ElementComponent::Components::Nav.new(type: :pills) do |n|
39
+ n.add_content(ElementComponent::Components::NavItem.new do |item|
40
+ item.add_content(ElementComponent::Components::NavLink.new(href: "/") { |link| link.add_content("Home") })
39
41
  end)
40
- add_content(ElementComponent::Components::NavItem.new do
41
- add_content(ElementComponent::Components::NavLink.new(href: "/about") { add_content("About") })
42
+ n.add_content(ElementComponent::Components::NavItem.new do |item|
43
+ item.add_content(ElementComponent::Components::NavLink.new(href: "/about") { |link| link.add_content("About") })
42
44
  end)
43
45
  end
44
46
  puts "=== Nav Pills ==="
@@ -48,12 +50,12 @@ puts
48
50
  # =============================================================================
49
51
  # Nav Fill and Justified
50
52
  # =============================================================================
51
- nav = ElementComponent::Components::Nav.new(type: :pills, fill: true) do
52
- add_content(ElementComponent::Components::NavItem.new do
53
- add_content(ElementComponent::Components::NavLink.new(href: "/") { add_content("Home") })
53
+ nav = ElementComponent::Components::Nav.new(type: :pills, fill: true) do |n|
54
+ n.add_content(ElementComponent::Components::NavItem.new do |item|
55
+ item.add_content(ElementComponent::Components::NavLink.new(href: "/") { |link| link.add_content("Home") })
54
56
  end)
55
- add_content(ElementComponent::Components::NavItem.new do
56
- add_content(ElementComponent::Components::NavLink.new(href: "/about") { add_content("About") })
57
+ n.add_content(ElementComponent::Components::NavItem.new do |item|
58
+ item.add_content(ElementComponent::Components::NavLink.new(href: "/about") { |link| link.add_content("About") })
57
59
  end)
58
60
  end
59
61
  puts "=== Nav Fill ==="
@@ -63,12 +65,12 @@ puts
63
65
  # =============================================================================
64
66
  # Vertical Nav
65
67
  # =============================================================================
66
- nav = ElementComponent::Components::Nav.new(vertical: true) do
67
- add_content(ElementComponent::Components::NavItem.new do
68
- add_content(ElementComponent::Components::NavLink.new(href: "/") { add_content("Home") })
68
+ nav = ElementComponent::Components::Nav.new(vertical: true) do |n|
69
+ n.add_content(ElementComponent::Components::NavItem.new do |item|
70
+ item.add_content(ElementComponent::Components::NavLink.new(href: "/") { |link| link.add_content("Home") })
69
71
  end)
70
- add_content(ElementComponent::Components::NavItem.new do
71
- add_content(ElementComponent::Components::NavLink.new(href: "/about") { add_content("About") })
72
+ n.add_content(ElementComponent::Components::NavItem.new do |item|
73
+ item.add_content(ElementComponent::Components::NavLink.new(href: "/about") { |link| link.add_content("About") })
72
74
  end)
73
75
  end
74
76
  puts "=== Vertical Nav ==="
data/examples/navbar_example.rb CHANGED
@@ -5,16 +5,18 @@ require_relative "../lib/element_component"
5
5
  # =============================================================================
6
6
  # Basic Navbar
7
7
  # =============================================================================
8
- navbar = ElementComponent::Components::Navbar.new do
9
- add_content(ElementComponent::Components::NavbarBrand.new(href: "/") { add_content("Navbar") })
10
- add_content(ElementComponent::Components::NavbarToggler.new(target: "basicNav"))
11
- add_content(ElementComponent::Components::NavbarCollapse.new(id: "basicNav") do
12
- add_content(ElementComponent::Components::NavbarNav.new do
13
- add_content(ElementComponent::Components::NavItem.new do
14
- add_content(ElementComponent::Components::NavLink.new(href: "/", active: true) { add_content("Home") })
8
+ navbar = ElementComponent::Components::Navbar.new do |n|
9
+ n.add_content(ElementComponent::Components::NavbarBrand.new(href: "/") { |brand| brand.add_content("Navbar") })
10
+ n.add_content(ElementComponent::Components::NavbarToggler.new(target: "basicNav"))
11
+ n.add_content(ElementComponent::Components::NavbarCollapse.new(id: "basicNav") do |collapse|
12
+ collapse.add_content(ElementComponent::Components::NavbarNav.new do |nav|
13
+ nav.add_content(ElementComponent::Components::NavItem.new do |item|
14
+ item.add_content(ElementComponent::Components::NavLink.new(href: "/", active: true) do |link|
15
+ link.add_content("Home")
16
+ end)
15
17
  end)
16
- add_content(ElementComponent::Components::NavItem.new do
17
- add_content(ElementComponent::Components::NavLink.new(href: "/about") { add_content("About") })
18
+ nav.add_content(ElementComponent::Components::NavItem.new do |item|
19
+ item.add_content(ElementComponent::Components::NavLink.new(href: "/about") { |link| link.add_content("About") })
18
20
  end)
19
21
  end)
20
22
  end)
@@ -26,20 +28,24 @@ puts
26
28
  # =============================================================================
27
29
  # Dark Navbar
28
30
  # =============================================================================
29
- navbar = ElementComponent::Components::Navbar.new(theme: :dark, background: :dark) do
30
- add_content(ElementComponent::Components::NavbarBrand.new(href: "/") { add_content("Dark") })
31
- add_content(ElementComponent::Components::NavbarToggler.new(target: "darkNav"))
32
- add_content(ElementComponent::Components::NavbarCollapse.new(id: "darkNav") do
33
- add_content(ElementComponent::Components::NavbarNav.new do
34
- add_content(ElementComponent::Components::NavItem.new do
35
- add_content(ElementComponent::Components::NavLink.new(href: "/", active: true) { add_content("Home") })
31
+ navbar = ElementComponent::Components::Navbar.new(theme: :dark, background: :dark) do |n|
32
+ n.add_content(ElementComponent::Components::NavbarBrand.new(href: "/") { |brand| brand.add_content("Dark") })
33
+ n.add_content(ElementComponent::Components::NavbarToggler.new(target: "darkNav"))
34
+ n.add_content(ElementComponent::Components::NavbarCollapse.new(id: "darkNav") do |collapse|
35
+ collapse.add_content(ElementComponent::Components::NavbarNav.new do |nav|
36
+ nav.add_content(ElementComponent::Components::NavItem.new do |item|
37
+ item.add_content(ElementComponent::Components::NavLink.new(href: "/", active: true) do |link|
38
+ link.add_content("Home")
39
+ end)
36
40
  end)
37
- add_content(ElementComponent::Components::NavItem.new do
38
- add_content(ElementComponent::Components::NavLink.new(href: "/contact") { add_content("Contact") })
41
+ nav.add_content(ElementComponent::Components::NavItem.new do |item|
42
+ item.add_content(ElementComponent::Components::NavLink.new(href: "/contact") do |link|
43
+ link.add_content("Contact")
44
+ end)
39
45
  end)
40
- add_content(ElementComponent::Components::NavItem.new do
41
- add_content(ElementComponent::Components::NavLink.new(href: "/disabled", disabled: true) do
42
- add_content("Disabled")
46
+ nav.add_content(ElementComponent::Components::NavItem.new do |item|
47
+ item.add_content(ElementComponent::Components::NavLink.new(href: "/disabled", disabled: true) do |link|
48
+ link.add_content("Disabled")
43
49
  end)
44
50
  end)
45
51
  end)
@@ -52,13 +58,15 @@ puts
52
58
  # =============================================================================
53
59
  # Navbar with Container
54
60
  # =============================================================================
55
- navbar = ElementComponent::Components::Navbar.new(container: "container") do
56
- add_content(ElementComponent::Components::NavbarBrand.new(href: "/") { add_content("Container") })
57
- add_content(ElementComponent::Components::NavbarToggler.new(target: "containerNav"))
58
- add_content(ElementComponent::Components::NavbarCollapse.new(id: "containerNav") do
59
- add_content(ElementComponent::Components::NavbarNav.new do
60
- add_content(ElementComponent::Components::NavItem.new do
61
- add_content(ElementComponent::Components::NavLink.new(href: "/", active: true) { add_content("Home") })
61
+ navbar = ElementComponent::Components::Navbar.new(container: "container") do |n|
62
+ n.add_content(ElementComponent::Components::NavbarBrand.new(href: "/") { |brand| brand.add_content("Container") })
63
+ n.add_content(ElementComponent::Components::NavbarToggler.new(target: "containerNav"))
64
+ n.add_content(ElementComponent::Components::NavbarCollapse.new(id: "containerNav") do |collapse|
65
+ collapse.add_content(ElementComponent::Components::NavbarNav.new do |nav|
66
+ nav.add_content(ElementComponent::Components::NavItem.new do |item|
67
+ item.add_content(ElementComponent::Components::NavLink.new(href: "/", active: true) do |link|
68
+ link.add_content("Home")
69
+ end)
62
70
  end)
63
71
  end)
64
72
  end)
@@ -70,8 +78,8 @@ puts
70
78
  # =============================================================================
71
79
  # Navbar Without Container
72
80
  # =============================================================================
73
- navbar = ElementComponent::Components::Navbar.new(container: false) do
74
- add_content(ElementComponent::Components::NavbarBrand.new(href: "/") { add_content("Fluid") })
81
+ navbar = ElementComponent::Components::Navbar.new(container: false) do |n|
82
+ n.add_content(ElementComponent::Components::NavbarBrand.new(href: "/") { |brand| brand.add_content("Fluid") })
75
83
  end
76
84
  puts "=== Navbar Without Container ==="
77
85
  puts navbar.render
data/examples/pagination_example.rb CHANGED
@@ -5,10 +5,10 @@ require_relative "../lib/element_component"
5
5
  # =============================================================================
6
6
  # Basic Pagination
7
7
  # =============================================================================
8
- pager = ElementComponent::Components::Pagination.new do
9
- add_content(ElementComponent::Components::PageItem.new { add_content("1") })
10
- add_content(ElementComponent::Components::PageItem.new(active: true) { add_content("2") })
11
- add_content(ElementComponent::Components::PageItem.new { add_content("3") })
8
+ pager = ElementComponent::Components::Pagination.new do |p|
9
+ p.add_content(ElementComponent::Components::PageItem.new { |item| item.add_content("1") })
10
+ p.add_content(ElementComponent::Components::PageItem.new(active: true) { |item| item.add_content("2") })
11
+ p.add_content(ElementComponent::Components::PageItem.new { |item| item.add_content("3") })
12
12
  end
13
13
  puts "=== Basic Pagination ==="
14
14
  puts pager.render
@@ -17,12 +17,12 @@ puts
17
17
  # =============================================================================
18
18
  # Pagination with Previous/Next
19
19
  # =============================================================================
20
- pager = ElementComponent::Components::Pagination.new do
21
- add_content(ElementComponent::Components::PageItem.new(disabled: true) { add_content("Previous") })
22
- add_content(ElementComponent::Components::PageItem.new { add_content("1") })
23
- add_content(ElementComponent::Components::PageItem.new(active: true) { add_content("2") })
24
- add_content(ElementComponent::Components::PageItem.new { add_content("3") })
25
- add_content(ElementComponent::Components::PageItem.new { add_content("Next") })
20
+ pager = ElementComponent::Components::Pagination.new do |p|
21
+ p.add_content(ElementComponent::Components::PageItem.new(disabled: true) { |item| item.add_content("Previous") })
22
+ p.add_content(ElementComponent::Components::PageItem.new { |item| item.add_content("1") })
23
+ p.add_content(ElementComponent::Components::PageItem.new(active: true) { |item| item.add_content("2") })
24
+ p.add_content(ElementComponent::Components::PageItem.new { |item| item.add_content("3") })
25
+ p.add_content(ElementComponent::Components::PageItem.new { |item| item.add_content("Next") })
26
26
  end
27
27
  puts "=== Pagination with Previous/Next ==="
28
28
  puts pager.render
@@ -31,17 +31,17 @@ puts
31
31
  # =============================================================================
32
32
  # Pagination Sizes
33
33
  # =============================================================================
34
- pager_sm = ElementComponent::Components::Pagination.new(size: :sm) do
35
- add_content(ElementComponent::Components::PageItem.new { add_content("1") })
36
- add_content(ElementComponent::Components::PageItem.new(active: true) { add_content("2") })
34
+ pager_sm = ElementComponent::Components::Pagination.new(size: :sm) do |p|
35
+ p.add_content(ElementComponent::Components::PageItem.new { |item| item.add_content("1") })
36
+ p.add_content(ElementComponent::Components::PageItem.new(active: true) { |item| item.add_content("2") })
37
37
  end
38
38
  puts "=== Small Pagination ==="
39
39
  puts pager_sm.render
40
40
  puts
41
41
 
42
- pager_lg = ElementComponent::Components::Pagination.new(size: :lg) do
43
- add_content(ElementComponent::Components::PageItem.new { add_content("1") })
44
- add_content(ElementComponent::Components::PageItem.new(active: true) { add_content("2") })
42
+ pager_lg = ElementComponent::Components::Pagination.new(size: :lg) do |p|
43
+ p.add_content(ElementComponent::Components::PageItem.new { |item| item.add_content("1") })
44
+ p.add_content(ElementComponent::Components::PageItem.new(active: true) { |item| item.add_content("2") })
45
45
  end
46
46
  puts "=== Large Pagination ==="
47
47
  puts pager_lg.render
data/examples/progress_example.rb CHANGED
@@ -5,8 +5,8 @@ require_relative "../lib/element_component"
5
5
  # =============================================================================
6
6
  # Basic Progress Bar
7
7
  # =============================================================================
8
- progress = ElementComponent::Components::Progress.new do
9
- add_content(ElementComponent::Components::ProgressBar.new(value: 75))
8
+ progress = ElementComponent::Components::Progress.new do |p|
9
+ p.add_content(ElementComponent::Components::ProgressBar.new(value: 75))
10
10
  end
11
11
  puts "=== Basic Progress Bar ==="
12
12
  puts progress.render
@@ -15,8 +15,8 @@ puts
15
15
  # =============================================================================
16
16
  # Progress Bar with Variant
17
17
  # =============================================================================
18
- progress = ElementComponent::Components::Progress.new do
19
- add_content(ElementComponent::Components::ProgressBar.new(value: 50, variant: :info))
18
+ progress = ElementComponent::Components::Progress.new do |p|
19
+ p.add_content(ElementComponent::Components::ProgressBar.new(value: 50, variant: :info))
20
20
  end
21
21
  puts "=== Progress Bar with Variant ==="
22
22
  puts progress.render
@@ -25,10 +25,10 @@ puts
25
25
  # =============================================================================
26
26
  # Striped and Animated Progress Bar
27
27
  # =============================================================================
28
- progress = ElementComponent::Components::Progress.new do
29
- add_content(ElementComponent::Components::ProgressBar.new(
30
- value: 60, variant: :warning, striped: true, animated: true
31
- ))
28
+ progress = ElementComponent::Components::Progress.new do |p|
29
+ p.add_content(ElementComponent::Components::ProgressBar.new(
30
+ value: 60, variant: :warning, striped: true, animated: true
31
+ ))
32
32
  end
33
33
  puts "=== Striped and Animated ==="
34
34
  puts progress.render
@@ -37,10 +37,10 @@ puts
37
37
  # =============================================================================
38
38
  # Multiple Progress Bars
39
39
  # =============================================================================
40
- progress = ElementComponent::Components::Progress.new do
41
- add_content(ElementComponent::Components::ProgressBar.new(value: 30, variant: :danger))
42
- add_content(ElementComponent::Components::ProgressBar.new(value: 20, variant: :warning))
43
- add_content(ElementComponent::Components::ProgressBar.new(value: 40, variant: :success))
40
+ progress = ElementComponent::Components::Progress.new do |p|
41
+ p.add_content(ElementComponent::Components::ProgressBar.new(value: 30, variant: :danger))
42
+ p.add_content(ElementComponent::Components::ProgressBar.new(value: 20, variant: :warning))
43
+ p.add_content(ElementComponent::Components::ProgressBar.new(value: 40, variant: :success))
44
44
  end
45
45
  puts "=== Multiple Progress Bars ==="
46
46
  puts progress.render
data/examples/spinner_example.rb CHANGED
@@ -31,8 +31,8 @@ puts
31
31
  # =============================================================================
32
32
  # Spinner with Screen Reader Text
33
33
  # =============================================================================
34
- spinner = ElementComponent::Components::Spinner.new do
35
- add_content(ElementComponent::Element.new("span", class: "visually-hidden") { add_content("Loading...") })
34
+ spinner = ElementComponent::Components::Spinner.new do |s|
35
+ s.add_content(ElementComponent::Element.new("span", class: "visually-hidden") { |e| e.add_content("Loading...") })
36
36
  end
37
37
  puts "=== Spinner with Text ==="
38
38
  puts spinner.render
data/examples/table_example.rb CHANGED
@@ -23,9 +23,9 @@ puts
23
23
  # =============================================================================
24
24
  # Table with Content
25
25
  # =============================================================================
26
- table = ElementComponent::Components::Table.new(striped: true) do
27
- add_content("<thead><tr><th>Name</th><th>Age</th></tr></thead>")
28
- add_content("<tbody><tr><td>John</td><td>30</td></tr></tbody>")
26
+ table = ElementComponent::Components::Table.new(striped: true) do |t|
27
+ t.add_content("<thead><tr><th>Name</th><th>Age</th></tr></thead>")
28
+ t.add_content("<tbody><tr><td>John</td><td>30</td></tr></tbody>")
29
29
  end
30
30
  puts "=== Table with Content ==="
31
31
  puts table.render