Helper methods for dealing with html element attributes.
Install the gem and add to the application's Gemfile by executing:
$ bundle add has_dom_attrs
If bundler is not being used to manage dependencies, install the gem by executing:
$ gem install has_dom_attrs
Include HasDomAttrs
in your class:
class Component
include HasDomAttrs
end
This makes your component respond to dom_attrs
, which returns a hash of class, data,
aria, and style attributes, that can be passed to Rails tag helpers.
component = Component.new
tag.div "Hello world", **component.dom_attrs
You can define attributes using class methods:
class DetailsComponent
include HasDomAttrs
has_dom_attr :open
attr_reader :open
def initialize(open: false)
@open = open
end
end
component = Component.new(open: true)
component.dom_attrs
# => { open: "true" }
Likewise you can set classes, data, style, and aria attributes:
class ModalComponent
include HasDomAttrs
has_dom_attr :open
has_dom_class -> { "modal--width_#{width}" }
has_dom_aria :modal, if: :open
has_dom_data :width
has_dom_style :font_size, -> { "12px" }
attr_reader :open
def initialize(open: false, width: :m)
@open = open
@width = width
end
end
component = ModalComponent.new(open: true, width: :l)
component.dom_attrs
# => { open: "true", aria: { modal: true }, class: "modal--width_l", data: { width: "l" }, style: "font-size: 12px; }
After checking out the repo, run bin/setup
to install dependencies. You can also run bin/console
for an interactive prompt that will allow you to experiment.
To install this gem onto your local machine, run bundle exec rake install
. To release a new version, update the version number in version.rb
, and then run bundle exec rake release
, which will create a git tag for the version, push git commits and the created tag, and push the .gem
file to rubygems.org.
Bug reports and pull requests are welcome on GitHub at https://github.com/tomasc/has_dom_attrs.