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 |
|||
<self[d:bbox]> |
|||
<pro-ref view=v> v for v in R.views |
|||
<pro-ref view="d"> 'd' |
|||
<pro-toggle param="O"> |
|||
<label> "O" |
|||
<input type='checkbox' checked=R.param('O')> |
|||
css |
|||
d:bbox mx:auto my:50px bgc:white p:40px rd:5px maw:1024px of:auto |
|||
@lt-xs m:0 px:0 rd:0 |
|||
|
|||
<self.night=R.param('night')> |
|||
<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-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)> |
|||
### |
|||
|
|||
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' |
|||
Loading…
Reference in new issue