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