Toggle Component API
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 defer
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
Examples
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 "{{vc.event.data.message}}"
end
end
end
end
As an example, we can fire the following event:
MatestackUiVueJs.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
Last updated