App API

An app defines a layout within its response method and uses the yield_page method to yield the content of a page in its layout.
Use core components
app/matestack/example_app/app.rb
class ExampleApp::App < Matestack::Ui::App
​
  def response
    heading size: 1, text: "My Example App Layout"
  end
​
end
Use registered custom components
Imagine having created and registered a custom component card. Go ahead and use it on your page:
app/matestack/example_app/pages/example_page.rb
class ExampleApp::Pages < Matestack::Ui::Page
​
  def response
    heading size: 1, text: "My Example App Layout"
    # calling your registered card component without using matestack_component helper!
    card title: "hello"
  end
​
end
Yielding Matestack pages
app/matestack/example_app/app.rb
class ExampleApp::App < Matestack::Ui::App
​
  def response
    heading size: 1, text: "My Example App Layout"
    main do
      #yield_page is a core method which yields the page and enables dynamic transitions
      #it can be placed anywhere in your layout
      yield_page
    end
  end
​
end
Transitions between pages without page reload
app/matestack/example_app/app.rb
class ExampleApp::App < Matestack::Ui::App
​
  def response
    heading size: 1, text: "My Example App Layout"
    nav do
      transition path: :app_specs_page1_path do
        button text: "Page 1"
      end
      transition path: :app_specs_page2_path do
        button text: "Page 2"
      end
    end
    main do
      yield_page
    end
  end
​
end
The transition components will trigger async HTTP requests and exchange the page content without a page reload.
Transitions between pages with loading element
app/matestack/example_app/app.rb
class ExampleApp::App < Matestack::Ui::App
​
  def response
    #...
    main do
      yield_page slots: { loading_state: my_loading_state_slot }
    end
    #...
  end
​
  def my_loading_state_slot
    slot do
      span class: "some-loading-spinner" do
        plain "loading..."
      end
    end
  end
​
end
which will render:
<main>
  <div class="matestack-page-container">
    <div class="loading-state-element-wrapper">
      <span class="some-loading-spinner">
        loading...
      </span>
    </div>
    <div class="matestack-page-wrapper">
      <div><!--this div is necessary for conditonal switch to async template via v-if -->
        <div class="matestack-page-root">
          your page markup
        </div>
      </div>
    </div>
  </div>
</end>
and during async page request triggered via transition:
<main>
  <div class="matestack-page-container loading">
    <div class="loading-state-element-wrapper loading">
      <span class="some-loading-spinner">
        loading...
      </span>
    </div>
    <div class="matestack-page-wrapper loading">
      <div><!--this div is necessary for conditonal switch to async template via v-if -->
        <div class="matestack-page-root">
          your page markup
        </div>
      </div>
    </div>
  </div>
</end>
You can use the loading class and your loading state element to implement CSS based loading state effects. It may look like this (scss):
.matestack-page-container{
​
  .matestack-page-wrapper {
    opacity: 1;
    transition: opacity 0.2s ease-in-out;
​
    &.loading {
      opacity: 0;
    }
  }
​
  .loading-state-element-wrapper{
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
​
    &.loading {
      opacity: 1;
    }
  }
​
}
For more informations on transitions, visit transitions​
SPA-like Apps - Previous
Rails Integration
Next - SPA-like Apps
Page API
Last updated 3 weeks ago