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
  • show_on - optional
  • hide_on - optional
  • hide_after - optional
  • init_show - optional
  • Example
  • Show on event
  • Hide on event
  • Hide after show on event
  • Show on event with event payload
  • Combine show_on/hide_on

Was this helpful?

Edit on GitHub
  1. Built-in Reactivity composed in pure Ruby
  2. Toggle UI States

Toggle Component API

PreviousToggle UI StatesNextCall Server Side Actions

Last updated 3 years ago

Was this helpful?

The toggle component allows us to react to events and toggle the UI state.

Parameters

The toggle component accepts the following parameters:

show_on - optional

The show_on option lets us define an event on which the component gets shown. The content is still rendered on init pageload, but simply hidden in the browser until the event is emitted. If you want to have proper deferred loading, please refer to

toggle show_on: 'my_event' do
  div id: 'my-div' do
    plain 'I was not here before the event'
  end
end

You can pass in multiple, comma-separated events on which the component should be shown.

toggle show_on: 'my_event, some_other_event'

hide_on - optional

The hide_on option lets us define an event on which the component gets hidden.

toggle hide_on: 'my_event' do
  div id: 'my-div' do
    plain 'You will not see me after the event'
  end
end

You can pass in multiple, comma-separated events on which the component should be hidden.

toggle hide_on: 'my_event, some_other_event'

hide_after - optional

The hide_after option lets us define a timespan in milliseconds after which the component gets hidden.

toggle hide_after: 1000 do
  div id: 'my-div' do
    plain 'I will be hidden after 1000ms'
  end
end

init_show - optional

The init_show option lets us define if the content should be shown initially.

By default the content is shown initially unless show_on is defined.

init_show is therefore only used in a context like this:

toggle show_on: "my_show_event", hide_on: 'my_hide_event', init_show: true do
  div id: 'my-div' do
    plain "I'm initially shown and then can be toggled based on events"
  end
end

Example

Show on event

On our example page, we wrap a simple timestamp in an toggle component and tell it to show up when the event my_event gets triggered.

class ExamplePage < Matestack::Ui::Page

  def response
    toggle show_on: 'my_event' do
      div id: 'my-div' do
        plain "#{DateTime.now.strftime('%Q')}"
      end
    end
  end

end

After our event was fired, the timestamp only is visible on our page!

Hide on event

On our example page, we wrap a simple timestamp in an toggle component and tell it to hide it when the event my_event gets triggered.

class ExamplePage < Matestack::Ui::Page

  def response
    toggle hide_on: 'my_event' do
      div id: 'my-div' do
        plain "#{DateTime.now.strftime('%Q')}"
      end
    end
  end

end

As expected, the timestamp is only visible before our event was fired and is hidden/invisible after the event!

Hide after show on event

On our example page, we wrap a simple timestamp in an toggle component and tell it to show up when the event my_event gets triggered and be hidden after 1000 milliseconds.

class ExamplePage < Matestack::Ui::Page

  def response
    toggle show_on: 'my_event', hide_after: 1000 do
      div id: 'my-div' do
        plain "#{DateTime.now.strftime('%Q')}"
      end
    end
  end

end

In this case, the timestamp only is visible after our event was fired, but only for a certain amount of time. After the time is up, it gets hidden!

Show on event with event payload

On our example page, we wrap our toggle event around a placeholder for the event message.

class ExamplePage < Matestack::Ui::Page

  def response
    toggle show_on: 'my_event' do
      div id: 'my-div' do
        plain "{{event.data.message}}"
      end
    end
  end

end

As an example, we can fire the following event:

MatestackUiCore.eventHub.$emit("my_event", { message: "test!" })

As a result, the event message gets shown after our event was fired!

Combine show_on/hide_on

If you combine show_on and hide_on, you can toggle the view state of the toggle component explicitly.

By default, the content is initially hidden until the show event is emitted when show_on is applied.

toggle show_on: "my_show_event", hide_on: 'my_hide_event' do
  div id: 'my-div' do
    plain 'You will not see me after the event'
  end
end

If you want to display the content initially, simply add init_show: true

toggle show_on: "my_show_event", hide_on: 'my_hide_event', init_show: true do
  div id: 'my-div' do
    plain 'You will not see me after the event'
  end
end
defer