|
|
|
@ -12,15 +12,52 @@ tag view-usage |
|
|
|
<h2$components.gradient> "Components" |
|
|
|
"This integration provides " |
|
|
|
<b> 3 |
|
|
|
" components:" |
|
|
|
<b> "ref" |
|
|
|
" components: " |
|
|
|
<b> "router" |
|
|
|
", " |
|
|
|
<b> "toggle" |
|
|
|
<b> "ref" |
|
|
|
" and " |
|
|
|
<b> "router" |
|
|
|
<b> "toggle" |
|
|
|
"." |
|
|
|
<br> |
|
|
|
<br> |
|
|
|
<$router.bordered> "<pro-router>" |
|
|
|
" displays current view." |
|
|
|
<br> |
|
|
|
<br> |
|
|
|
"The simplest application would look like this:" |
|
|
|
<imba-code file='src/main.imba'> |
|
|
|
""" |
|
|
|
imba{<c-op> '.'}mount {<c-tag> 'pro-router'} |
|
|
|
""" |
|
|
|
<br> |
|
|
|
"A bit more complex example:" |
|
|
|
<imba-code url="/{R.params.subview || ''}"> |
|
|
|
""" |
|
|
|
{<c-tag-def> 'my-app'} |
|
|
|
{<c-tag> 'self'} |
|
|
|
{<c-tag> "pro-ref-f{<c-el> ' view'}{<c-op> '='}{<c-el> 'v'}"} {<c-op> 'for'} v {<c-op> 'in'} {<c-c> 'R'}{<c-op> '.'}views {<c-com> 'render menu'} |
|
|
|
{<c-tag> "pro-router"} {<c-com> 'slot for current view'} |
|
|
|
|
|
|
|
{<c-tag-def> 'view-hello'} |
|
|
|
{<c-tag> 'self'} 'Hello World!' |
|
|
|
|
|
|
|
{<c-tag-def> 'view-another-view'} |
|
|
|
{<c-tag> 'self'} 'This is another view.' |
|
|
|
|
|
|
|
imba{<c-op> '.'}mount {<c-tag> 'my-app'} |
|
|
|
""" |
|
|
|
<div[d:vcc h:140px] slot="live"> |
|
|
|
<example-menu[mb:30px]> |
|
|
|
<{ "example-{R.param('subview')}" }> |
|
|
|
<br> |
|
|
|
"Notice that definition of a component with prefix {<.bordered> 'view-'} implies that there's a route." |
|
|
|
<pro-tip> |
|
|
|
"You can override current view and display another. For example defined by param from url:" |
|
|
|
<imba-code> |
|
|
|
<c-tag> "pro-router{<c-el> ' view'}{<c-op> '='}{<c-c> 'R'}{<c-op> '.'}param{<.c-br> '('}{<c-str> 'subview'}{<.c-br> ')'}" |
|
|
|
<br> |
|
|
|
<br> |
|
|
|
<$ref.bordered> "<pro-ref>" |
|
|
|
" generates a link with a proper address hooked to the router." |
|
|
|
<br> |
|
|
|
@ -102,43 +139,6 @@ tag view-usage |
|
|
|
<pro-toggle.button param='night'> 'Good night' |
|
|
|
<pro-toggle.button param='night' disabled=true> 'Switch disabled' |
|
|
|
<br> |
|
|
|
<br> |
|
|
|
<$router.bordered> "<pro-router>" |
|
|
|
" displays current view." |
|
|
|
<br> |
|
|
|
<br> |
|
|
|
"The simplest application would look like this:" |
|
|
|
<imba-code file='src/main.imba'> |
|
|
|
""" |
|
|
|
imba{<c-op> '.'}mount {<c-tag> 'pro-router'} |
|
|
|
""" |
|
|
|
<br> |
|
|
|
"A bit more complex example:" |
|
|
|
<imba-code url="/{R.params.subview || ''}"> |
|
|
|
""" |
|
|
|
{<c-tag-def> 'my-app'} |
|
|
|
{<c-tag> 'self'} |
|
|
|
{<c-tag> "pro-ref-f{<c-el> ' view'}{<c-op> '='}{<c-el> 'v'}"} {<c-op> 'for'} v {<c-op> 'in'} {<c-c> 'R'}{<c-op> '.'}views {<c-com> 'render menu'} |
|
|
|
{<c-tag> "pro-router"} {<c-com> 'slot for current view'} |
|
|
|
|
|
|
|
{<c-tag-def> 'view-hello'} |
|
|
|
{<c-tag> 'self'} 'Hello World!' |
|
|
|
|
|
|
|
{<c-tag-def> 'view-another-view'} |
|
|
|
{<c-tag> 'self'} 'This is another view.' |
|
|
|
|
|
|
|
imba{<c-op> '.'}mount {<c-tag> 'my-app'} |
|
|
|
""" |
|
|
|
<div[d:vcc h:140px] slot="live"> |
|
|
|
<example-menu[mb:30px]> |
|
|
|
<{ "example-{R.param('subview')}" }> |
|
|
|
<br> |
|
|
|
<pro-tip> |
|
|
|
"You can override current view and display another. For example defined by param from url:" |
|
|
|
<imba-code> |
|
|
|
<c-tag> "pro-router{<c-el> ' view'}{<c-op> '='}{<c-c> 'R'}{<c-op> '.'}param{<.c-br> '('}{<c-str> 'subview'}{<.c-br> ')'}" |
|
|
|
|
|
|
|
<br> |
|
|
|
<h2$tips.gradient> "Pro-router tips" |
|
|
|
"Further reading is not about functionalities provided by this package itself but the ones you will be using straight from pro-router." |
|
|
|
<br> |
|
|
|
|
