bootstrap4_helper 1.0.1 → 1.0.2
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/README.md +484 -6
- data/lib/bootstrap4_helper.rb +1 -1
- data/lib/bootstrap4_helper/version.rb +1 -1
- metadata +5 -6
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 96ca003a3537479c6938e25c5e3c63a2a7cc07f6231da69990e99b4d27a096ec
|
|
4
|
+
data.tar.gz: 1de1ebb2c2db736dd990e0a656beb6e959a7affa3696bad3e6776b65a0eed9c2
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 9efa4daa8b090928e043b3437353338bf24afa29c6535a552eb3087911a45537fdeff7f8d25188af0a921fae0a8e1e3f5e62edc10a780c6006e36c2714b1543e
|
|
7
|
+
data.tar.gz: 22119b3d181c221effbb3c822a655bf2cbb1a5a574d8dc5f8fc5e31102dc38208970b1d87bb7a5d69214f71833ed0f1006a1e3ab3d253d55357d72dfc8ea4d0f
|
data/README.md
CHANGED
|
@@ -1,10 +1,6 @@
|
|
|
1
1
|
# Bootstrap4Helper
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
## Usage
|
|
6
|
-
|
|
7
|
-
How to use my plugin.
|
|
3
|
+
Simple template helper to build Bootstrap 4 components in Rails views easier.
|
|
8
4
|
|
|
9
5
|
## Installation
|
|
10
6
|
|
|
@@ -26,9 +22,491 @@ Or install it yourself as:
|
|
|
26
22
|
$ gem install bootstrap4_helper
|
|
27
23
|
```
|
|
28
24
|
|
|
25
|
+
## Usage
|
|
26
|
+
|
|
27
|
+
All of the helpers will be available inside your views. If you wish to stop that behavior and only include the helpers on the views of your choosing, pass the following to the `config` object in a intializer:
|
|
28
|
+
|
|
29
|
+
<em>config/initializers/bootstrap4-helper.rb</em>
|
|
30
|
+
|
|
31
|
+
```ruby
|
|
32
|
+
Bootstrap4Helper.config do |config|
|
|
33
|
+
config.autoload_in_views = false
|
|
34
|
+
end
|
|
35
|
+
```
|
|
36
|
+
|
|
37
|
+
> Note: Almost all the helpers support attributes for `id`, `class` and `data` HTML attributes.
|
|
38
|
+
|
|
39
|
+
### Accordion:
|
|
40
|
+
|
|
41
|
+
For use with a single, collapsible accordion.
|
|
42
|
+
|
|
43
|
+
```erb
|
|
44
|
+
<%= accordion_helper class: 'text-white bg-primary' do |a| %>
|
|
45
|
+
<%= a.header do %>
|
|
46
|
+
// Some HTML or Ruby
|
|
47
|
+
<% end %>
|
|
48
|
+
<%= a.body %>
|
|
49
|
+
// Some HTML or Ruby
|
|
50
|
+
<% end %>
|
|
51
|
+
<% end %>
|
|
52
|
+
```
|
|
53
|
+
|
|
54
|
+
### Accordion Groups:
|
|
55
|
+
|
|
56
|
+
Use the group helper when you want to have a group of accordions, where one opens and the previous one closes.
|
|
57
|
+
|
|
58
|
+
> Note: The helper will handle all the linking of the elements together. If you do pass an id to the parent Dom Element - accordion_grou_helper id: 'some_id', that id will be used for the linking of the element. But you don't have to, unless you have a specific need to.
|
|
59
|
+
|
|
60
|
+
```erb
|
|
61
|
+
<%= accordion_group_helper do |grp| %>
|
|
62
|
+
<%= grp.accordion do |a| %>
|
|
63
|
+
<%= a.header class: 'text-white bg-primary' do %>
|
|
64
|
+
// Some HTML or Ruby
|
|
65
|
+
<% end %>
|
|
66
|
+
<%= a.body %>
|
|
67
|
+
// Some HTML or Ruby
|
|
68
|
+
<% end %>
|
|
69
|
+
<% end %>
|
|
70
|
+
|
|
71
|
+
<%= grp.accordion do |a| %>
|
|
72
|
+
<%= a.header class: 'text-white bg-danger' do %>
|
|
73
|
+
// Some HTML or Ruby
|
|
74
|
+
<% end %>
|
|
75
|
+
<%= a.body %>
|
|
76
|
+
// Some HTML or Ruby
|
|
77
|
+
<% end %>
|
|
78
|
+
<% end %>
|
|
79
|
+
<% end $>
|
|
80
|
+
```
|
|
81
|
+
|
|
82
|
+
### Alerts
|
|
83
|
+
|
|
84
|
+
Alerts use the contextual helper, where you can pass one of the states to the object and it will render the appropriate colors.
|
|
85
|
+
|
|
86
|
+
```erb
|
|
87
|
+
<%= alert_helper :danger, dismissble: true do %>
|
|
88
|
+
Something went wrong with your model data...
|
|
89
|
+
<% end %>
|
|
90
|
+
```
|
|
91
|
+
|
|
92
|
+
### Badges
|
|
93
|
+
|
|
94
|
+
The badge helper will build badges realitively quickly. If you are just passing a String, use the shorter curly brace block syntax. If you plan on building other HTML elements of using other Ruby proceedures, use the do/end method.
|
|
95
|
+
|
|
96
|
+
```erb
|
|
97
|
+
<li>
|
|
98
|
+
Messages: <%= badge_helper(:primary) { @messages.count } %>
|
|
99
|
+
</li>
|
|
100
|
+
<li>
|
|
101
|
+
Notifications: <%= badge_healper { @notifications.count } %>
|
|
102
|
+
</li>
|
|
103
|
+
<li>
|
|
104
|
+
Users: <%= badge_helper :danger do %>Some HTML / Ruby <% end %>
|
|
105
|
+
</li>
|
|
106
|
+
```
|
|
107
|
+
|
|
108
|
+
### Cards
|
|
109
|
+
|
|
110
|
+
Cards support a few methods that make building them easier:
|
|
111
|
+
|
|
112
|
+
- `body`
|
|
113
|
+
- `header`
|
|
114
|
+
- `footer`
|
|
115
|
+
- `image_overlay`
|
|
116
|
+
- `text`
|
|
117
|
+
- `title`
|
|
118
|
+
|
|
119
|
+
For usage on various card sub components, @see https://getbootstrap.com/docs/4.0/components/card/
|
|
120
|
+
|
|
121
|
+
```erb
|
|
122
|
+
<%# Regular %>
|
|
123
|
+
|
|
124
|
+
<%= card_helper do |c| %>
|
|
125
|
+
<%= c.header class: 'text-white bg-primary' do %>
|
|
126
|
+
<h4>This is the header...</h4>
|
|
127
|
+
<% end %>
|
|
128
|
+
<%= c.body do %>
|
|
129
|
+
<%= c.title { 'This is the title' } %>
|
|
130
|
+
<%= c.text { 'This card body' } %>
|
|
131
|
+
<ul>
|
|
132
|
+
<% [1, 2, 3].each do |x| %>
|
|
133
|
+
<li>Item: <%= x %></li>
|
|
134
|
+
<% end %>
|
|
135
|
+
</ul>
|
|
136
|
+
<% end %>
|
|
137
|
+
<%= c.footer do %>
|
|
138
|
+
This is the footer...
|
|
139
|
+
<% end %>
|
|
140
|
+
<% end %>
|
|
141
|
+
|
|
142
|
+
<%# Horizontal %>
|
|
143
|
+
|
|
144
|
+
<div class="row">
|
|
145
|
+
<div class="col-sm mt-3 mb-3">
|
|
146
|
+
<%= card_helper do |c| %>
|
|
147
|
+
<div class="row no-gutters">
|
|
148
|
+
<div class="col-md-4">
|
|
149
|
+
<%= image_tag 'placeholder.svg', class: 'card-img' %>
|
|
150
|
+
</div>
|
|
151
|
+
<div class="col-md-8">
|
|
152
|
+
<%= c.body do %>
|
|
153
|
+
<%= c.title { "Card title" } %>
|
|
154
|
+
<%= c.text { "This is a wider card with supporting text below as a natural lead-in to additional content." } %>
|
|
155
|
+
<%= c.text do %>
|
|
156
|
+
<small class="text-muted">Last updated 3 mins ago</small>
|
|
157
|
+
<% end %>
|
|
158
|
+
<% end %>
|
|
159
|
+
</div>
|
|
160
|
+
</div>
|
|
161
|
+
<% end %>
|
|
162
|
+
</div>
|
|
163
|
+
</div>
|
|
164
|
+
```
|
|
165
|
+
|
|
166
|
+
### Card Groups
|
|
167
|
+
|
|
168
|
+
Card Groups are a group of cards.
|
|
169
|
+
|
|
170
|
+
> Use card groups to render cards as a single, attached element with equal width and height columns. Card groups use display: flex; to achieve their uniform sizing. - Bootstrap Docs
|
|
171
|
+
|
|
172
|
+
```erb
|
|
173
|
+
<%= card_group_helper do |group| %>
|
|
174
|
+
<%= group.card do |c| %>
|
|
175
|
+
<%= c.body do %>
|
|
176
|
+
<%= c.title { 'This is the title one' } %>
|
|
177
|
+
<%= c.text { 'This card body' } %>
|
|
178
|
+
<ul>
|
|
179
|
+
<% [1, 2, 3, 4, 5, 6, 7].each do |x| %>
|
|
180
|
+
<li>Item: <%= x %></li>
|
|
181
|
+
<% end %>
|
|
182
|
+
</ul>
|
|
183
|
+
<% end %>
|
|
184
|
+
<%= c.footer do %>
|
|
185
|
+
This is the footer...
|
|
186
|
+
<% end %>
|
|
187
|
+
<% end %>
|
|
188
|
+
<%= group.card do |c| %>
|
|
189
|
+
<%= c.body do %>
|
|
190
|
+
<%= c.title { 'This is the title two' } %>
|
|
191
|
+
<%= c.text { 'This card body' } %>
|
|
192
|
+
<ul>
|
|
193
|
+
<% [1, 2, 3].each do |x| %>
|
|
194
|
+
<li>Item: <%= x %></li>
|
|
195
|
+
<% end %>
|
|
196
|
+
</ul>
|
|
197
|
+
<% end %>
|
|
198
|
+
<%= c.footer do %>
|
|
199
|
+
This is the footer...
|
|
200
|
+
<% end %>
|
|
201
|
+
<% end %>
|
|
202
|
+
<%= group.card do |c| %>
|
|
203
|
+
<%= c.body do %>
|
|
204
|
+
<%= c.title { 'This is the title three' } %>
|
|
205
|
+
<%= c.text { 'This card body' } %>
|
|
206
|
+
<ul>
|
|
207
|
+
<% [1, 2, 3].each do |x| %>
|
|
208
|
+
<li>Item: <%= x %></li>
|
|
209
|
+
<% end %>
|
|
210
|
+
</ul>
|
|
211
|
+
<% end %>
|
|
212
|
+
<%= c.footer do %>
|
|
213
|
+
This is the footer...
|
|
214
|
+
<% end %>
|
|
215
|
+
<% end %>
|
|
216
|
+
<% end %>
|
|
217
|
+
```
|
|
218
|
+
|
|
219
|
+
### Card Decks
|
|
220
|
+
|
|
221
|
+
Card Decks are for, well, decks of cards :D
|
|
222
|
+
|
|
223
|
+
> Need a set of equal width and height cards that aren’t attached to one another? Use card decks. - Bootstrap 4 Docs
|
|
224
|
+
|
|
225
|
+
```erb
|
|
226
|
+
<%= card_deck_helper do |deck| %>
|
|
227
|
+
<%= deck.card do |c| %>
|
|
228
|
+
<%= c.body do %>
|
|
229
|
+
<%= c.title { 'This is the title one' } %>
|
|
230
|
+
<%= c.text { 'This card body' } %>
|
|
231
|
+
<ul>
|
|
232
|
+
<% [1, 2, 3, 4, 5, 6, 7].each do |x| %>
|
|
233
|
+
<li>Item: <%= x %></li>
|
|
234
|
+
<% end %>
|
|
235
|
+
</ul>
|
|
236
|
+
<% end %>
|
|
237
|
+
<%= c.footer do %>
|
|
238
|
+
This is the footer...
|
|
239
|
+
<% end %>
|
|
240
|
+
<% end %>
|
|
241
|
+
<%= deck.card do |c| %>
|
|
242
|
+
<%= c.body do %>
|
|
243
|
+
<%= c.title { 'This is the title two' } %>
|
|
244
|
+
<%= c.text { 'This card body' } %>
|
|
245
|
+
<ul>
|
|
246
|
+
<% [1, 2, 3].each do |x| %>
|
|
247
|
+
<li>Item: <%= x %></li>
|
|
248
|
+
<% end %>
|
|
249
|
+
</ul>
|
|
250
|
+
<% end %>
|
|
251
|
+
<%= c.footer do %>
|
|
252
|
+
This is the footer...
|
|
253
|
+
<% end %>
|
|
254
|
+
<% end %>
|
|
255
|
+
<%= deck.card do |c| %>
|
|
256
|
+
<%= c.body do %>
|
|
257
|
+
<%= c.title { 'This is the title three' } %>
|
|
258
|
+
<%= c.text { 'This card body' } %>
|
|
259
|
+
<ul>
|
|
260
|
+
<% [1, 2, 3].each do |x| %>
|
|
261
|
+
<li>Item: <%= x %></li>
|
|
262
|
+
<% end %>
|
|
263
|
+
</ul>
|
|
264
|
+
<% end %>
|
|
265
|
+
<%= c.footer do %>
|
|
266
|
+
This is the footer...
|
|
267
|
+
<% end %>
|
|
268
|
+
<% end %>
|
|
269
|
+
<% end %>
|
|
270
|
+
```
|
|
271
|
+
|
|
272
|
+
### Card Columns
|
|
273
|
+
|
|
274
|
+
Build Card Columns.
|
|
275
|
+
|
|
276
|
+
> Cards are built with CSS column properties instead of flexbox for easier alignment. Cards are ordered from top to bottom and left to right.
|
|
277
|
+
>
|
|
278
|
+
> Heads up! Your mileage with card columns may vary. To prevent cards breaking across columns, we must set them to display: inline-block as column-break-inside: avoid isn’t a bulletproof solution yet. <br>- Bootstrap Docs
|
|
279
|
+
|
|
280
|
+
```erb
|
|
281
|
+
<%= card_column_helper do |column| %>
|
|
282
|
+
<%= column.card do |c| %>
|
|
283
|
+
<%= c.body do %>
|
|
284
|
+
<%= c.title { 'This is the title one' } %>
|
|
285
|
+
<%= c.text { 'This card body' } %>
|
|
286
|
+
<ul>
|
|
287
|
+
<% [1, 2, 3, 4, 5, 6, 7].each do |x| %>
|
|
288
|
+
<li>Item: <%= x %></li>
|
|
289
|
+
<% end %>
|
|
290
|
+
</ul>
|
|
291
|
+
<% end %>
|
|
292
|
+
<%= c.footer do %>
|
|
293
|
+
This is the footer...
|
|
294
|
+
<% end %>
|
|
295
|
+
<% end %>
|
|
296
|
+
<%= column.card do |c| %>
|
|
297
|
+
<%= c.body do %>
|
|
298
|
+
<%= c.title { 'This is the title two' } %>
|
|
299
|
+
<%= c.text { 'This card body' } %>
|
|
300
|
+
<ul>
|
|
301
|
+
<% [1, 2, 3].each do |x| %>
|
|
302
|
+
<li>Item: <%= x %></li>
|
|
303
|
+
<% end %>
|
|
304
|
+
</ul>
|
|
305
|
+
<% end %>
|
|
306
|
+
<%= c.footer do %>
|
|
307
|
+
This is the footer...
|
|
308
|
+
<% end %>
|
|
309
|
+
<% end %>
|
|
310
|
+
<%= column.card do |c| %>
|
|
311
|
+
<%= c.body do %>
|
|
312
|
+
<%= c.title { 'This is the title three' } %>
|
|
313
|
+
<%= c.text { 'This card body' } %>
|
|
314
|
+
<ul>
|
|
315
|
+
<% [1, 2, 3].each do |x| %>
|
|
316
|
+
<li>Item: <%= x %></li>
|
|
317
|
+
<% end %>
|
|
318
|
+
</ul>
|
|
319
|
+
<% end %>
|
|
320
|
+
<%= c.footer do %>
|
|
321
|
+
This is the footer...
|
|
322
|
+
<% end %>
|
|
323
|
+
<% end %>
|
|
324
|
+
<% end %>
|
|
325
|
+
```
|
|
326
|
+
|
|
327
|
+
### Dropdowns
|
|
328
|
+
|
|
329
|
+
Generates a Dropdown component. Default type `:dropdown`. For inline buttons, use `:group`.
|
|
330
|
+
|
|
331
|
+
Dropdowns support the following methods:
|
|
332
|
+
|
|
333
|
+
- `button`
|
|
334
|
+
- `menu`
|
|
335
|
+
- `item` - Use this method when you are using the item in the menu as trigger for tab content.
|
|
336
|
+
- `link` - Use this method when the item in the menu is nothing more than a hyperlink.
|
|
337
|
+
- `text` - simple text
|
|
338
|
+
- `header` - Is a header item
|
|
339
|
+
- `divider` - A dividing element
|
|
340
|
+
|
|
341
|
+
```erb
|
|
342
|
+
<%= dropdown_helper do |dropdown| %>
|
|
343
|
+
<%= dropdown.button(:primary) { "Action" } %>
|
|
344
|
+
<%= dropdown.menu do |menu| %>
|
|
345
|
+
<%= menu.link 'Edit', '#' %>
|
|
346
|
+
<%= menu.link 'Delete', '#' %>
|
|
347
|
+
<%= menu.text 'Static text' %>
|
|
348
|
+
<% end %>
|
|
349
|
+
<% end %>
|
|
350
|
+
|
|
351
|
+
<%= dropdown_helper :group, class: 'dropright' do |dropdown| %>
|
|
352
|
+
<button type="button" class="btn btn-danger">Action 2</button>
|
|
353
|
+
<%= dropdown.button(:danger, split: true) %>
|
|
354
|
+
<%= dropdown.menu do |menu| %>
|
|
355
|
+
<%= menu.header "Crud operations" %>
|
|
356
|
+
<%= menu.divider %>
|
|
357
|
+
<%= menu.link 'Edit', 'SOME-URL' %>
|
|
358
|
+
<%= menu.link 'Delete', 'SOME-URL' %>
|
|
359
|
+
<% end %>
|
|
360
|
+
<% end %>
|
|
361
|
+
|
|
362
|
+
<%= dropdown_helper do |dropdown| %>
|
|
363
|
+
<%= dropdown.button :primary do %>
|
|
364
|
+
<i class="fas fa-users"></i> User
|
|
365
|
+
<% end %>
|
|
366
|
+
<%= dropdown.menu do |menu| %>
|
|
367
|
+
<form class="px-4 py-3">
|
|
368
|
+
<div class="form-group">
|
|
369
|
+
<label for="exampleDropdownFormEmail1">Email address</label>
|
|
370
|
+
<input type="email" class="form-control" id="exampleDropdownFormEmail1" placeholder="email@example.com">
|
|
371
|
+
</div>
|
|
372
|
+
<div class="form-group">
|
|
373
|
+
<label for="exampleDropdownFormPassword1">Password</label>
|
|
374
|
+
<input type="password" class="form-control" id="exampleDropdownFormPassword1" placeholder="Password">
|
|
375
|
+
</div>
|
|
376
|
+
<div class="form-group">
|
|
377
|
+
<div class="form-check">
|
|
378
|
+
<input type="checkbox" class="form-check-input" id="dropdownCheck">
|
|
379
|
+
<label class="form-check-label" for="dropdownCheck">
|
|
380
|
+
Remember me
|
|
381
|
+
</label>
|
|
382
|
+
</div>
|
|
383
|
+
</div>
|
|
384
|
+
<button type="submit" class="btn btn-primary">Sign in</button>
|
|
385
|
+
</form>
|
|
386
|
+
<%= menu.divider %>
|
|
387
|
+
<%= menu.link "New around here? Sign up", "#" %>
|
|
388
|
+
<%= menu.link "Forgot password", "#" %>
|
|
389
|
+
<% end %>
|
|
390
|
+
<% end %>
|
|
391
|
+
```
|
|
392
|
+
|
|
393
|
+
### Modals
|
|
394
|
+
|
|
395
|
+
Builds a modal window.
|
|
396
|
+
|
|
397
|
+
> Note: When the `close_button` is not passed a block, it will default to the X icon.
|
|
398
|
+
|
|
399
|
+
```erb
|
|
400
|
+
<%= modal_helper id: 'exampleModal' do |m| %>
|
|
401
|
+
<%= m.header do %>
|
|
402
|
+
<%= m.title { 'Example Modal' } %>
|
|
403
|
+
<%= m.close_button %>
|
|
404
|
+
<% end %>
|
|
405
|
+
<%= m.body do %>
|
|
406
|
+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel nisi tempora, eius iste sit nobis
|
|
407
|
+
earum in harum optio dolore explicabo. Eveniet reprehenderit harum itaque ad fuga beatae, quasi
|
|
408
|
+
sequi! Laborum ea porro nihil ipsam repudiandae vel harum voluptates minima corrupti unde quas,
|
|
409
|
+
dolore possimus doloribus voluptatem sint fuga dolores odio dignissimos at molestias earum.
|
|
410
|
+
<% end %>
|
|
411
|
+
<%= m.footer do %>
|
|
412
|
+
<%= m.close_button class: 'btn btn-secondary' do %>
|
|
413
|
+
Close
|
|
414
|
+
<% end %>
|
|
415
|
+
<% end %>
|
|
416
|
+
<% end %>
|
|
417
|
+
```
|
|
418
|
+
|
|
419
|
+
### Navs
|
|
420
|
+
|
|
421
|
+
For building nav components. The Nav compoent has the following methods:
|
|
422
|
+
|
|
423
|
+
- `dropwdown` - @see Dropdown for list of methods
|
|
424
|
+
- `item`
|
|
425
|
+
- `link`
|
|
426
|
+
|
|
427
|
+
```erb
|
|
428
|
+
<%= nav_helper do |nav| %>
|
|
429
|
+
<%= nav.link "Item 1", "https://www.google.com" %>
|
|
430
|
+
<%= nav.link "Item 2", "#" %>
|
|
431
|
+
<%= nav.link "Item 3", "#" %>
|
|
432
|
+
<%= nav.dropdown :more do |menu| %>
|
|
433
|
+
<%= menu.link 'People', '#' %>
|
|
434
|
+
<%= menu.link 'Records', '#' %>
|
|
435
|
+
<% end %>
|
|
436
|
+
|
|
437
|
+
<%= nav.dropdown "More 2" do |menu| %>
|
|
438
|
+
<%= menu.link 'People', '#' %>
|
|
439
|
+
<%= menu.link 'Records', '#' %>
|
|
440
|
+
<% end %>
|
|
441
|
+
<% end %>
|
|
442
|
+
```
|
|
443
|
+
|
|
444
|
+
### Tabs
|
|
445
|
+
|
|
446
|
+
For building Tab components.
|
|
447
|
+
|
|
448
|
+
> Note: The tab helper responds to the `type:` and there are two types, `:tabs` and `:pills`. The default is `:tabs`.
|
|
449
|
+
>
|
|
450
|
+
> Example:
|
|
451
|
+
> `<%= tab_helper type: :pills do |tab| %>`
|
|
452
|
+
|
|
453
|
+
```erb
|
|
454
|
+
<%= tab_helper do |tab| %>
|
|
455
|
+
<%= tab.nav do |nav| %>
|
|
456
|
+
<%= nav.item :item1 do %>
|
|
457
|
+
Item 1
|
|
458
|
+
<% end %>
|
|
459
|
+
<%= nav.item(:item2, class: 'active') { "Item 2" } %>
|
|
460
|
+
<%= nav.item(:item3) { "Item 3" } %>
|
|
461
|
+
<%= nav.item :item4 %>
|
|
462
|
+
<%= nav.dropdown 'More' do |dropdown| %>
|
|
463
|
+
<%= dropdown.item :item5 %>
|
|
464
|
+
<%= dropdown.item(:item6) { 'Item 6' } %>
|
|
465
|
+
<% end %>
|
|
466
|
+
<% end %>
|
|
467
|
+
|
|
468
|
+
<%= tab.content do |content| %>
|
|
469
|
+
<%= content.pane :item1, class: 'mt-3' do %>
|
|
470
|
+
Content 1
|
|
471
|
+
<% end %>
|
|
472
|
+
|
|
473
|
+
<%= content.pane :item2, class: 'active mt-3' do %>
|
|
474
|
+
Content 2
|
|
475
|
+
<% end %>
|
|
476
|
+
|
|
477
|
+
<%= content.pane :item3, class: 'mt-3' do %>
|
|
478
|
+
Content 3
|
|
479
|
+
<% end %>
|
|
480
|
+
|
|
481
|
+
<%= content.pane :item4, class: 'mt-3' do %>
|
|
482
|
+
Content 4
|
|
483
|
+
<% end %>
|
|
484
|
+
|
|
485
|
+
<%= content.pane :item5, class: 'mt-3' do %>
|
|
486
|
+
Content 5
|
|
487
|
+
<% end %>
|
|
488
|
+
|
|
489
|
+
<%= content.pane :item6, class: 'mt-3' do %>
|
|
490
|
+
Content 6
|
|
491
|
+
<% end %>
|
|
492
|
+
<% end %>
|
|
493
|
+
<% end %>
|
|
494
|
+
```
|
|
495
|
+
|
|
496
|
+
### Spinners
|
|
497
|
+
|
|
498
|
+
Creates CSS spinner components. Supports two types: `:border` and `:grow`. Teh default is `:border`
|
|
499
|
+
|
|
500
|
+
```erb
|
|
501
|
+
<%= spinner_helper class: 'text-warning' %>
|
|
502
|
+
<%= spinner_helper type: :grow, class: 'text-danger', id: 'loadingRecords' %>
|
|
503
|
+
```
|
|
504
|
+
|
|
29
505
|
## Contributing
|
|
30
506
|
|
|
31
|
-
|
|
507
|
+
If you would like to contribution, by all means, do a PR and send up your suggestions.
|
|
508
|
+
|
|
509
|
+
If there are components you would like to see added, open an issue and I will try to get to them, or you can do a PR and add them yourself :D
|
|
32
510
|
|
|
33
511
|
## License
|
|
34
512
|
|
data/lib/bootstrap4_helper.rb
CHANGED
|
@@ -82,7 +82,7 @@ module Bootstrap4Helper
|
|
|
82
82
|
Alert.new(self, *args, &block)
|
|
83
83
|
end
|
|
84
84
|
|
|
85
|
-
# Creates a badge component.
|
|
85
|
+
# Creates a badge component. Badges have a context variable. Providing nothing
|
|
86
86
|
# will give you the `secondary` context.
|
|
87
87
|
#
|
|
88
88
|
# ```erb
|
metadata
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: bootstrap4_helper
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 1.0.
|
|
4
|
+
version: 1.0.2
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- Robert David
|
|
8
8
|
autorequire:
|
|
9
9
|
bindir: bin
|
|
10
10
|
cert_chain: []
|
|
11
|
-
date: 2020-
|
|
11
|
+
date: 2020-05-07 00:00:00.000000000 Z
|
|
12
12
|
dependencies:
|
|
13
13
|
- !ruby/object:Gem::Dependency
|
|
14
14
|
name: rails
|
|
@@ -58,14 +58,14 @@ dependencies:
|
|
|
58
58
|
requirements:
|
|
59
59
|
- - "~>"
|
|
60
60
|
- !ruby/object:Gem::Version
|
|
61
|
-
version: 5.2.
|
|
61
|
+
version: 5.2.4
|
|
62
62
|
type: :development
|
|
63
63
|
prerelease: false
|
|
64
64
|
version_requirements: !ruby/object:Gem::Requirement
|
|
65
65
|
requirements:
|
|
66
66
|
- - "~>"
|
|
67
67
|
- !ruby/object:Gem::Version
|
|
68
|
-
version: 5.2.
|
|
68
|
+
version: 5.2.4
|
|
69
69
|
- !ruby/object:Gem::Dependency
|
|
70
70
|
name: redcarpet
|
|
71
71
|
requirement: !ruby/object:Gem::Requirement
|
|
@@ -175,8 +175,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
|
|
|
175
175
|
- !ruby/object:Gem::Version
|
|
176
176
|
version: '0'
|
|
177
177
|
requirements: []
|
|
178
|
-
|
|
179
|
-
rubygems_version: 2.7.6
|
|
178
|
+
rubygems_version: 3.1.3
|
|
180
179
|
signing_key:
|
|
181
180
|
specification_version: 4
|
|
182
181
|
summary: Library for rapidly building bootstrap 4 components
|