README.md in shoelace-rails-0.2.0 vs README.md in shoelace-rails-0.3.0
- old
+ new
@@ -2,14 +2,10 @@
The `shoelace-rails` gem adds useful helper methods for [Shoelace.style](https://shoelace.style), the design system.
## Installation
-This document assumes that you use the [`webpacker`](https://github.com/rails/webpacker) or
-the [`jsbundling-rails`](https://github.com/rails/jsbundling-rails) gem. You may have to tweak the examples here if
-you do not use it. However, the principle here should be the same regardless of the JS bundler you use.
-
Add this line to your application's Gemfile:
```ruby
gem 'shoelace-rails'
```
@@ -68,12 +64,16 @@
* In production, the icon files are automatically copied into the `public/assets` directory as part of the
`assets:precompile` rake task.
## View Helpers
-As explained above, this gem provides drop-in replacements to. Here is a short example of how the form helper works:
+As explained above, this gem provides drop-in replacements to Rails view helpers.
+### Form Helpers
+
+The `sl_form_with` or `sl_form_for` method could be used to generate a form with the Shoelace components:
+
```erb
<%= sl_form_for @user do |form| %>
<% # Text input: https://shoelace.style/components/input %>
<%= form.text_field :name %>
<%= form.password_field :password, placeholder: "Password Toggle", 'toggle-password': true %>
@@ -111,9 +111,84 @@
<sl-menu-item value="id_3">Option 3</sl-menu-item>
</sl-select>
<sl-button submit="true" type="primary" data-disable-with="Create User">Create User</sl-button>
</form>
+```
+
+#### Using The `sl-select` component with `multiple`
+
+TDB
+
+#### Using the Shoelace FormBuilder with other gems
+
+Sometimes you want to use the Shoelace FormBuilder with other gems, such as [ransack](https://github.com/activerecord-hackery/ransack).
+In this case, you can not use the `sl_form_for` or `sl_form_with` methods in tandem with `ransack`, but you can use
+the `Shoelace::FormBuilder` with e.g. [the `search_form_for` method](https://activerecord-hackery.github.io/ransack/getting-started/simple-mode/#form-helper):
+
+```erb
+<%= search_form_for @q, builder: Shoelace::FormBuilder do |form| %>
+ ...
+<% end %>
+```
+
+### Tag Helpers
+
+#### `#sl_avatar_tag`
+
+The `@sl_avatar_tag` method behaves just like the `image_tag` method.
+
+```erb
+<%= sl_avatar_tag "/path/to/image.jpg" %>
+```
+
+Will produce:
+
+```html
+<sl-avatar image="/path/to/image.jpg"></sl-avatar>
+```
+
+#### `#sl_button_to`
+
+The `sl_button_to` method behaves just like the `link_to` method. Note that this is slightly different from the
+built-in `button_to` method.
+
+Without a block:
+
+```erb
+<%= sl_button_to "Next Page", "/components?page=2" %>
+```
+
+```html
+<sl-button href="/components?page=2">
+ Next Page
+</sl-button>
+```
+
+With a block:
+
+```erb
+<%= sl_button_to "/components?page=2" do %>
+ Next Page
+<% end %>
+```
+
+```html
+<sl-button href="/components?page=2">
+ Next Page
+</sl-button>
+```
+
+#### `#sl_icon_tag`
+
+The `sl_icon_tag` method takes the `name` attribute value as the first argument:
+
+```erb
+<%= sl_icon_tag "apple" %>
+```
+
+```html
+<sl-icon name="apple"></sl-icon>
```
## Development
1. Run `bundle install`