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
  • Parameters
  • emit - required
  • &block - required
  • Examples
  • Emitting an event which triggers an asynchronous rerendering via async

Was this helpful?

Edit on GitHub
  1. Built-in Reactivity composed in pure Ruby
  2. Emit Client Side Events

Onclick Component API

The onclick component renders an a tag that emits a client side event when the user clicks on it. The onclick component takes a block in order to define its appearance.

Parameters

emit - required

Takes a string or symbol. An event with this name will be emitted using the Matestack event hub.

You currently cannot pass in an event payload.

&block - required

The passed in block defines the appearance of the onclick component. The while UI structure defined in this block will be wrapped with an a tag

Examples

Emitting an event which triggers an asynchronous rerendering via async

class ExamplePage < Matestack::Ui::Page

  def response
    onclick emit: "abc" do
      button "rerender something"
    end
    async rerender_on: "abc", id: "some-unique-id" do
      plain "Render this text when the 'abc' event is emitted"
    end
  end

end
PreviousEmit Client Side EventsNextToggle UI States

Last updated 3 years ago

Was this helpful?