Skip to content

Commit

Permalink
Update the README with use of Bootstrap Icons.
Browse files Browse the repository at this point in the history
  • Loading branch information
donv committed Aug 31, 2023
1 parent 2db0000 commit ab23660
Show file tree
Hide file tree
Showing 3 changed files with 11 additions and 7 deletions.
18 changes: 11 additions & 7 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -385,7 +385,8 @@ If you want to attach multiple items to the input, pass them as an array:

![Example 10](demo/doc/screenshots/bootstrap/readme/10_example.png "Example 10")
```erb
<%= f.text_field :price, prepend: ['Net', '$'], append: ['.00', 'per day'] %>
<% icon = capture do %><i class="bi bi-currency-dollar"></i><% end %>
<%= f.text_field :price, prepend: ['Net', icon], append: ['.00', 'per day'] %>
```

This generates:
Expand All @@ -395,7 +396,10 @@ This generates:
<label class="form-label" for="user_price">Price</label>
<div class="input-group">
<span class="input-group-text">Net</span>
<span class="input-group-text">$</span>
<span class="input-group-text">
<i class="bi bi-currency-dollar">
</i>
</span>
<input class="form-control" id="user_price" name="user[price]" type="text">
<span class="input-group-text">.00</span>
<span class="input-group-text">per day</span>
Expand Down Expand Up @@ -894,29 +898,29 @@ illustrative icons to them). For example, the following statements

![Example 32](demo/doc/screenshots/bootstrap/readme/32_example.png "Example 32")
```erb
<%= f.primary "Save changes <span class='fa fa-save'></span>".html_safe, render_as_button: true %>
<%= f.primary "Save changes <span class='bi bi-save'></span>".html_safe, render_as_button: true %>
<%= f.primary do
concat 'Save changes '
concat content_tag(:span, nil, class: 'fa fa-save')
concat content_tag(:span, nil, class: 'bi bi-save')
end %>
```

This generates:

```html
<button class="btn btn-primary" name="button" type="submit">Save changes <span class="fa fa-save">
<button class="btn btn-primary" name="button" type="submit">Save changes <span class="bi bi-save">
</span>
</button>
<button class="btn btn-primary" name="button" type="submit">Save changes <span class="fa fa-save">
<button class="btn btn-primary" name="button" type="submit">Save changes <span class="bi bi-save">
</span>
</button>
```

are equivalent, and each of them both be rendered as:

```html
<button name="button" type="submit" class="btn btn-primary">Save changes <span class="fa fa-save"></span></button>
<button name="button" type="submit" class="btn btn-primary">Save changes <span class="bi bi-save"></span></button>
```

If you wish to add additional CSS classes to your button, while keeping the
Expand Down
Binary file modified demo/doc/screenshots/bootstrap/readme/10_example.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified demo/doc/screenshots/bootstrap/readme/32_example.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit ab23660

Please sign in to comment.