Matestack Ui Core
AboutMatestack Ui CoreMatestack Ui VueJsMatestack Ui Bootstrap
2.1
2.1
  • Welcome
  • Migrating from 1.x to 2.0
  • Getting started
    • Installation & Update
    • Concepts & Rails Integration
    • Tutorial
    • Support & Feedback [WIP]
    • Common Issues [WIP]
  • HTML implemented in pure Ruby
    • Overview
    • HTML Rendering
    • Components
      • Component API
      • Component Registry
      • Components on Rails views
    • Pages
      • Page API
      • Rails Controller Integration
    • Apps
      • App API
    • Reusing Rails Views or Partials
  • Built-in Reactivity composed in pure Ruby
    • Overview
    • Emit Client Side Events
      • Onclick Component API
    • Toggle UI States
      • Toggle Component API
    • Call Server Side Actions
      • Overview
      • Action Component API
    • Reactive Forms
      • Overview
      • Form Component API
      • Input Component API
      • Textarea Component API
      • Checkbox Component API
      • Select Component API
      • Radio Component API
      • Nested Forms
    • Partial UI Updates
      • Overview
      • Async Component API
      • Cable Component API
      • Isolated Component API
    • Page Transitions
      • Overview
      • Transition Component API
    • Reactive Collections
      • Overview
      • Collection Component API [WIP]
  • Custom Reactivity implemented in Vue.js
    • Custom Vue.js Components
    • Third party Vue.js components [WIP]
    • Matestack's Vue.js APIs [WIP]
    • Matestack's Vuex API [WIP]
  • Integrations
    • Action Cable
    • Devise
    • Authorization [WIP]
    • CSS Frameworks [WIP]
    • Third Party JavaScript [WIP]
    • Third Party Ruby Gems [WIP]
  • Matestack Addons
    • Create your own Addon [WIP]
  • Testing
    • Capybara & Rspec
  • Community
    • Discord
    • Contribute [WIP]
  • About
    • Core Team
    • Sponsoring [WIP]
    • Legal Details [WIP]
Powered by GitBook
On this page

Was this helpful?

Edit on GitHub
  1. HTML implemented in pure Ruby
  2. Components

Components on Rails views

If you already have plenty of Rails views (ERB, Haml or Slim) and want to start creating small UI components in pure Ruby, you are able to use components on these existing views.

app/matestack/components/products/teaser.rb
class Components::Products::Teaser < Matestack::Ui::Component

  requires :product

  def response
    a path: product_path(context.product), class: 'product-teaser' do
      div do
        h2 context.product.name
        paragraph conext.product.description
        b context.product.price
      end
    end
  end

end

The class is then called on your Rails view, in this case an ERB view:

<%= @products.each do |product| %>
  <%= Components::Products::Teaser.(product: product) %>
<% end %>

This approach is suitable for existing apps and a good idea to migrate to Matestack step by step. If you start with a blank Rails app, we recommend to go full Matestack right away**!**

PreviousComponent RegistryNextPages

Last updated 3 years ago

Was this helpful?