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`