No release in over a year
Material Design with ViewComponent
2005
2006
2007
2008
2009
2010
2011
2012
2013
2014
2015
2016
2017
2018
2019
2020
2021
2022
2023
2024
 Dependencies
 Project Readme

MaterialViewComponents

Material Design with ViewComponents and TailwindCSS.

⚠️ This project is still in prototypal stage so don't use it in production!

Usage

Currently, only Material buttons components are available.

Buttons

Button components are wrapper around the button_to helper.

Regular buttons

<%= render Material::ButtonComponent.new do |button| %>
  <%= button.icon "add" %>
  <%= button.text "Button" %>
<% end %>

<%= render Material::ButtonComponent.new(disabled: true) do |button| %>
  <%= button.icon "add" %>
  <%= button.text "Button" %>    
<% end %>    
	
<%= render Material::ButtonComponent.new(button_type: :tonal) do |button| %>    
  <%= button.icon "add" %>    
  <%= button.text "Button" %>    
<% end %>    
	
<%= render Material::ButtonComponent.new(button_type: :tonal, disabled: true) do |button| %>    
  <%= button.icon "add" %>    
  <%= button.text "Button" %>    
<% end %>    
	 
<%= render Material::ButtonComponent.new(button_type: :outlined) do |button| %>    
  <%= button.icon "add" %>    
  <%= button.text "Button" %>    
<% end %>        
	 
<%= render Material::ButtonComponent.new(button_type: :outlined, disabled: true) do |button| %>    
  <%= button.icon "add" %>    
  <%= button.text "Button" %>    
<% end %>    
	 
<%= render Material::ButtonComponent.new(button_type: :elevated) do |button| %>    
  <%= button.icon "add" %>    
  <%= button.text "Button" %>    
<% end %>    

<%= render Material::ButtonComponent.new(button_type: :elevated, disabled: true) do |button| %>
  <%= button.icon "add" %>
  <%= button.text "Button" %>
<% end %>

FABs

<%= render Material::FABComponent.new do |fab| %>
  <%= fab.icon "add" %>
<% end %>

Installation

Add this line to your application's Gemfile:

gem "material_view_components"

And then execute:

$ bundle

Or install it yourself as:

$ gem install material_view_components

Link the assets in your manifest:

//= link material_view_components_manifest.js

Contributing

Contribution directions go here.

License

The gem is available as open source under the terms of the MIT License.