README.md in actionview-component-1.4.0 vs README.md in actionview-component-1.5.0
- old
+ new
@@ -30,11 +30,11 @@
```
In `config/application.rb`, add:
```bash
-require "action_view/component/base"
+require "action_view/component"
```
## Guide
### What are components?
@@ -95,14 +95,30 @@
Components are subclasses of `ActionView::Component::Base` and live in `app/components`. You may wish to create an `ApplicationComponent` that is a subclass of `ActionView::Component::Base` and inherit from that instead.
Component class names end in -`Component`.
+Component module names are plural, as they are for controllers. (`Users::AvatarComponent`)
+
Components support ActiveModel validations. Components are validated after initialization, but before rendering.
Content passed to an `ActionView::Component` as a block is captured and assigned to the `content` accessor.
+#### Quick start
+
+Use the component generator to create a new `ActionView::Component`.
+
+The generator accepts the component name and the list of accepted properties as arguments:
+
+```bash
+bin/rails generate component Example title content
+ invoke test_unit
+ create test/components/example_component_test.rb
+ create app/components/example_component.rb
+ create app/components/example_component.html.erb
+```
+
#### Implementation
An `ActionView::Component` is a Ruby file and corresponding template file (in any format supported by Rails) with the same base name:
`app/components/test_component.rb`:
@@ -197,9 +213,52 @@
%(<span title="my title">Hello, tablets!</span>),
render_inline(TestComponent, title: "my title") { "Hello, tablets!" }.css("span").to_html
)
end
end
+```
+
+### Previewing Components
+`ActionView::Component::Preview`s provide a way to see how components look by visiting a special URL that renders them.
+In the previous example, the preview class for `TestComponent` would be called `TestComponentPreview` and located in `test/components/previews/test_component_preview.rb`.
+To see the preview of the component with a given title, implement a method that renders the component.
+You can define as many examples as you want:
+
+```ruby
+# test/components/previews/test_component_preview.rb
+
+class TestComponentPreview < ActionView::Component::Preview
+ def with_default_title
+ render(TestComponent, title: "Test component default")
+ end
+
+ def with_long_title
+ render(TestComponent, title: "This is a really long title to see how the component renders this")
+ end
+end
+```
+
+The previews will be available in <http://localhost:3000/rails/components/test_component/with_default_title>
+and <http://localhost:3000/rails/components/test_component/with_long_title>.
+
+Previews use the application layout by default, but you can also use other layouts from your app:
+
+```ruby
+# test/components/previews/test_component_preview.rb
+
+class TestComponentPreview < ActionView::Component::Preview
+ layout "admin"
+
+ ...
+end
+```
+
+By default, the preview classes live in `test/components/previews`.
+This can be configured using the `preview_path` option.
+For example, if you want to use `lib/component_previews`, set the following in `config/application.rb`:
+
+```ruby
+config.action_view_component.preview_path = "#{Rails.root}/lib/component_previews"
```
## Frequently Asked Questions
### Can I use other templating languages besides ERB?