2 changed files with 167 additions and 7 deletions
|
After Width: | Height: | Size: 4.4 KiB |
@ -1,13 +1,172 @@ |
|||||
|
css |
||||
|
html, body m:0 p:0 |
||||
|
body ff:mono bgc:gray9 |
||||
|
a c:violet6 td:none td@hover:underline |
||||
|
.active, .activated filter:brightness(130%) |
||||
|
.button d:inline-block m:2px bgc:none c:violet7 td:none bxs:sm us:none |
||||
|
.button@hover, .button.active bxs:md filter:hue-rotate(5deg) ml:0px pl:12px td:none |
||||
|
.button, code, .bordered p:10px bd:2px solid violet5 rd:10px d:inline-block |
||||
|
.bordered p:2.5px bw:1.5px c:violet9 |
||||
|
.night filter:invert(100%) |
||||
|
.gradient |
||||
|
bg:linear-gradient(to right,violet7,blue6,violet7) |
||||
|
fw:normal |
||||
|
-webkit-background-clip:text |
||||
|
-webkit-text-fill-color:transparent |
||||
|
|
||||
tag App |
tag App |
||||
<self[d:bbox]> |
css |
||||
<pro-ref view=v> v for v in R.views |
d:bbox mx:auto my:50px bgc:white p:40px rd:5px maw:1024px of:auto |
||||
<pro-ref view="d"> 'd' |
@lt-xs m:0 px:0 rd:0 |
||||
<pro-toggle param="O"> |
|
||||
<label> "O" |
<self.night=R.param('night')> |
||||
<input type='checkbox' checked=R.param('O')> |
<param-preview> |
||||
|
<h2.gradient> "pro-router-imba2: Imba2 integration with pro-router" |
||||
|
<[d:flex flw:wrap w:100% jc:space-between]> |
||||
|
<Menu> |
||||
|
<pro-router[mx:40px maw:750px]> |
||||
|
### |
||||
<pro-ref view="b" params={ project: 2}> "b/project/2" |
<pro-ref view="b" params={ project: 2}> "b/project/2" |
||||
<pro-ref-f view="c" params={ book: 3}> "c/book/3" |
<pro-ref-f view="c" params={ book: 3}> "c/book/3" |
||||
<pro-router> |
|
||||
<input$v type='text' value=R.param('e') @keyup=R.write('e', $v.value)> |
<input$v type='text' value=R.param('e') @keyup=R.write('e', $v.value)> |
||||
|
### |
||||
|
|
||||
|
tag Menu |
||||
|
<self[d:flex fld:column mx:auto mb: 50px]> |
||||
|
<pro-ref.button view=v> v.toUpperCase! for v in R.views |
||||
|
### |
||||
|
<pro-ref.button view="foo"> 'WRONG WAY!' |
||||
|
<pro-toggle.button param="night"> |
||||
|
<label> "NIGHT" |
||||
|
<input type='checkbox' checked=R.param('night')> |
||||
|
### |
||||
|
|
||||
|
tag param-preview |
||||
|
<self> "{R.view}: {JSON.stringify(R.params).replace(/"/g, ' ')}" |
||||
|
|
||||
|
extend tag view-home |
||||
|
<self> |
||||
|
"What is " |
||||
|
<b> "pro-router" |
||||
|
" you can see here: " |
||||
|
<a href="http://router.maniak.pro"> "router.maniak.pro" |
||||
|
<br> |
||||
|
"What is " |
||||
|
<a href="https://imba.io"> "imba" |
||||
|
" you surely know." |
||||
|
<br> |
||||
|
"This package integrates both." |
||||
|
<br> |
||||
|
<br> |
||||
|
"Go to your project directory and run:" |
||||
|
<br> |
||||
|
<br> |
||||
|
<code> "npm install pro-router-imba2 --save" |
||||
|
|
||||
|
tag view-installation |
||||
|
<self> |
||||
|
"For your convenience package provides " |
||||
|
<b> "vite plugin" |
||||
|
" and installation command" |
||||
|
"." |
||||
|
<br> |
||||
|
"Vite plugin will automatically define views for the router. Thanks to pro-router paradigm you will not write route definitions at all." |
||||
|
<br> |
||||
|
<br> |
||||
|
"1. Create imba project (or go to directory of an existing one):" |
||||
|
<br> |
||||
|
<pre><code> |
||||
|
""" |
||||
|
npx imba create my-app |
||||
|
cd my-app |
||||
|
npm install |
||||
|
""" |
||||
|
<br> |
||||
|
"2. Install pro-router-imba2 and run development server:" |
||||
|
<pre><code> |
||||
|
""" |
||||
|
npm install pro-router-imba2 --save |
||||
|
npx pro-router init |
||||
|
npm run dev |
||||
|
""" |
||||
|
<br> |
||||
|
"3. Add " |
||||
|
<.bordered> "<pro-router>" |
||||
|
" component to your app (in " |
||||
|
<.bordered> "src/main.imba" |
||||
|
" file)." |
||||
|
<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> |
||||
|
""" |
||||
|
{<c-tag-def> 'my-app'} |
||||
|
{<c-tag> 'self'} |
||||
|
{<c-tag> "pro-ref{<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-home'} |
||||
|
{<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'} |
||||
|
""" |
||||
|
<br> |
||||
|
"4. Everything is already set." |
||||
|
|
||||
|
tag imba-code < pre |
||||
|
prop file |
||||
|
css bgc:gray8 d:block |
||||
|
code bd:0 rd:0 |
||||
|
&.file bgc:amber3 d:block |
||||
|
&.content c:gray3 |
||||
|
<self> |
||||
|
<code.file> file if file |
||||
|
<code.content><slot> |
||||
|
|
||||
|
tag c-el |
||||
|
css d:inline c:gray3 |
||||
|
tag c-op < c-el |
||||
|
css c:white fw:bold |
||||
|
tag c-c < c-el |
||||
|
css c:blue3 |
||||
|
tag c-com < c-el |
||||
|
css c:gray5 |
||||
|
<self> |
||||
|
"# " |
||||
|
<slot> |
||||
|
### |
||||
|
tag c-class < c-el |
||||
|
<self[c:amber4]> |
||||
|
<c-dot> |
||||
|
<slot> |
||||
|
### |
||||
|
tag c-tag < c-el |
||||
|
<self[c:white]> |
||||
|
"<" |
||||
|
<[c:blue4 d:inline]><slot> |
||||
|
">" |
||||
|
|
||||
|
tag c-tag-def < c-el |
||||
|
<self[c:blue4]> |
||||
|
"tag " |
||||
|
<[c:green5 d:inline]><slot> |
||||
|
|
||||
|
tag view-usage |
||||
|
<self> "List of components" |
||||
|
|
||||
|
tag view-examples |
||||
|
<self> "Examples:" |
||||
|
|
||||
|
tag view-why-to-use-it |
||||
|
<self> "Why?" |
||||
|
|
||||
imba.mount <App> if import.meta.env.MODE is 'development' |
imba.mount <App> if import.meta.env.MODE is 'development' |
||||
Loading…
Reference in new issue