Matestack Ui Core
AboutMatestack Ui CoreMatestack Ui VueJsMatestack Ui Bootstrap
1.5
1.5
  • Welcome
  • Getting started
    • Installation & Update
    • Concepts & Rails Integration
    • Quick Start
    • Support & Feedback [WIP]
    • Common Issues [WIP]
  • UI Components
    • Component Overview
    • Rails Integration
    • Component Registry
    • General Component API
    • Haml Components
    • Reusing Views or Partials
    • Testing [WIP]
  • Reactivity
    • Reactivity Overview
    • Rails Integration
    • Actions
    • Forms
    • Async
    • Cable
    • Isolated
    • Collection
    • Custom Vue.js Components
    • Vue.js Event Hub
    • Vuex [WIP]
  • SPA-like Apps
    • SPA Overview
    • Rails Integration
    • App API
    • Page API
    • Transitions
    • Authorization
    • Tutorial
      • Creating a SPA-like App with Matestack
      • Essential Guide 1: Setup
      • Essential Guide 2: ActiveRecord & Database
      • Essential Guide 3: Person Index, Show, Transition
      • Essential Guide 4: Forms & Actions (Create, Update, Delete)
      • Essential Guide 5: Toggle Component
      • Essential Guide 6: Async Component
      • Essential Guide 7: Partials and custom components
      • Essential Guide 8: Collection and async component
      • Essential Guide 9: Custom Vue.js components
      • Essential Guide 10: Styling and Notifications
      • Essential Guide 11: Authentication
      • Essential Guide 12: Heroku Deployment with Postgres
      • Essential Guide 13: Wrap Up & Outlook
  • Components API
    • Core Components
      • Abbr
      • Address
      • Area
      • Article
      • Aside
      • B
      • Bdi
      • Bdo
      • Blockquote
      • Button
      • Br
      • Caption
      • Cite
      • Code
      • Data
      • Datalist
      • Dd
      • Del
      • Details
      • Dfn
      • Dialog
      • Div
      • Dl
      • Dt
      • Em
      • Fieldset
      • Figure
      • Footer
      • Hr
      • Icon
      • Iframe
      • Img
      • Ins
      • Input
      • Header
      • Heading
      • Kbd
      • Label
      • Legend
      • Link
      • Lists
      • Main
      • Mark
      • Map
      • Meter
      • Nav
      • Noscript
      • Object
      • Option
      • Optgroup
      • Output
      • Paragraph
      • Param
      • Picture
      • Pg
      • Plain
      • Pre
      • Progress
      • S
      • Samp
      • Section
      • Select
      • Small
      • Span
      • Sup
      • Sub
      • Strong
      • Table
      • Template
      • Textarea
      • U
      • Unescaped
      • Q
      • Rails View
      • Rp
      • Rt
      • Ruby
      • Var
      • Video
      • Wbr
      • Youtube
    • Reactive Core Components
      • Action
      • Async
      • Cable
      • Collection
      • Form
      • Form Input
      • Form Checkbox
      • Form Radio
      • Form Select
      • Form Submit
      • Form Textarea
      • Onclick
      • Transition
      • Toggle
  • Integrations
    • Action Cable
    • Devise
    • CSS Frameworks [WIP]
    • Third Party JavaScript [WIP]
    • Third Party Ruby Gems [WIP]
  • Matestack Addons
    • Create your own Addon [WIP]
  • Community
    • Discord
    • Contribute
  • About
    • Core Team [WIP]
    • Sponsoring [WIP]
    • Legal Details [WIP]
Powered by GitBook
On this page
  • Parameters
  • path - required
  • text - optional
  • delay - optional
  • Active class
  • Events
  • Examples
  • Example 1: Perform transition from one page to another without full page reload

Was this helpful?

Edit on GitHub
  1. Components API
  2. Reactive Core Components

Transition

Performing dynamic page transitions without full page reload.

Parameters

Except for id and class, the transition component can handle additional parameters:

path - required

As the name suggests, the path expects a path within our application. If you want to route to a link outside our application, use the link component

transition path: :page1_path do
  button text: 'Page 1'
end

If the path input is a string it just uses this string for the transition target.

If the path input is a symbol (e.g. :root_path) it calls the Rails url helper method in order to generate the transition target

You can also just use the Rails url helper methods directly. They will return a string which is then used as the transition target without any further processing.

text - optional

If the transition component receives a text via its options, it gets rendered as shown here:

transition path: :page1_path, text: 'Click me for a transition'
<a href='my_example_app/page1'>Click me for a transition</a>

If no text is present, the transition component expects a block that it then yields the usual way.

delay - optional

You can use this attribute if you want to delay the actual transition. It will not delay the page_loading_triggered event

delay: 1000 # means 1000 ms

Active class

The transition component automatically gets the active class on the clientside when the current path equals the target path.

When a sub page of a parent transition component is currently active, the parent transition component gets the active-child class. A sub page is recognized if the current path is included in the target path of the parent transition component:

Parent target: /some_page

Currently active: /some_page/child_page --> Parent gets child-active

Query params do not interfere with this behavior.

Events

The transition component automatically emits events on:

  • transition triggered by user action -> "page_loading_triggered"

  • optional client side delay via delay attribute

  • start to get new page from server -> "page_loading"

  • server side/network delay

  • successfully received new page from server -> "page_loaded"

  • failed to receive new page from server -> "page_loading_error"

Examples

The transition core component renders the HTML <a> tag and performs a page transition

Example 1: Perform transition from one page to another without full page reload

First, we define our routes (config/routes.rb) and the corresponding endpoints in our example controller:

get 'my_example_app/page1', to: 'example_app_pages#page1', as: 'page1'
get 'my_example_app/page2', to: 'example_app_pages#page2', as: 'page2'
class ExampleAppPagesController < ExampleController
  include Matestack::Ui::Core::ApplicationHelper
  matestack_app ExampleApp

  def page1
    render ExampleApp::Pages::ExamplePage
  end

  def page2
    render ExampleApp::Pages::SecondExamplePage
  end

end

Then, we define our example app layout with a navigation that consists of two transition components!

class ExampleApp::Apps < Matestack::Ui::App

  def response
    heading size: 1, text: 'My Example App Layout'
    nav do
      transition path: :page1_path do
        button text: 'Page 1'
      end
      transition path: :page2_path do
        button text: 'Page 2'
      end
    end
    main do
      yield_page
    end
  end

end

Lastly, we define two example pages for our example application:

class ExampleApp::Pages::ExamplePage < Matestack::Ui::Page

  def response
    div id: 'my-div-on-page-1' do
      heading size: 2, text: 'This is Page 1'
      plain "#{DateTime.now.strftime('%Q')}"
    end
  end

end

and

class ExampleApp::Pages::SecondExamplePage < Matestack::Ui::Page

  def response
    div id: 'my-div-on-page-2' do
      heading size: 2, text: 'This is Page 2'
      plain "#{DateTime.now.strftime('%Q')}"
    end
    transition path: :page1_path do
      button text: 'Back to Page 1'
    end
  end

end

Now, we can visit our first example page via localhost:3000/my_example_app/page1 and see our two buttons (Page 1 and Page 2) and the content of page 1 (My Example App Layout and This is Page 1).

After clicking on the Page 2-button, we get transferred to our second page (This is Page 2) without re-loading the whole page.

If we then click the other button available (Back to Page 1), we get transferred back to the first page, again without re-loading the whole page. This behavior can save quite some request payload (and therefore loading time) as only the relevant content on a page gets replaced!

PreviousOnclickNextToggle

Last updated 3 years ago

Was this helpful?