Want to get started with web components? Want to bring them into your Rails app? Easily build your own and use web components that are built by community in your Ruby on Rails Application. Poymer-rails helps you to do this:
Adds polymer library to assets of your rails project.
Allows you to easily import web component with
<%= html_import_tag "my-component" %>helper.
Prefer using SASS or CoffeeSript?
Polymer-rails works well with compiling assets, such as CoffeeScript and Sass.
You can easily use external stylesheet or script tag references in your web component
<link rel="stylesheet" href="application.css"> for stylesheets and
This assets will be automatically compiled and required into component html file.
- Note that if you're using sass or coffe precompilation, assets are required to use '.css.sass' and '.js.coffee' extensions.*
Add this line to your application's Gemfile:
And then execute:
Or install it yourself as:
$ gem install polymer-rails
$ rails g polymer:install
- This generator adds
//= require polymer/webcomponentsinto
application.htmlmanifest file where you can include all your components.
vendor/assets/componentsdirectory for third-party web components.
rails g polymer:install, add
<%= html_import_tag 'application'%> line into your layout,
to import web components manifest to your app.
Creating a component
$ rails g polymer:component <component-name>
This generates new
<component-name> component directory and
.js files of the same name under
Add your component to
.html manifest file after requiring polymer:
// //= require polymer/polymer //= require component-name/component-name
And you can use your component in Rails application!
Polymer core/paper elements
Polymer team is working on set of core element which you can learn more about here http://www.polymer-project.org/docs/elements/core-elements.html. If you want to use them in your Rails application, checkout polymer-core-rails gem.
You may also be interested in Polymer paper elements, they are also available as polymer-paper-rails gem.
See example Rails application here http://polymer-rails-example.herokuapp.com/
Source code can be found here https://github.com/alchapone/polymer-rails-example
- Fork it ( http://github.com/alchapone/polymer-rails/fork )
- Create your feature branch (
git checkout -b my-new-feature)
- Commit your changes (
git commit -am 'Add some feature')
- Push to the branch (
git push origin my-new-feature)
- Create new Pull Request