mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-20 12:29:55 +08:00
routing ideas
This commit is contained in:
68
mockup/router/readme.md
Normal file
68
mockup/router/readme.md
Normal file
@ -0,0 +1,68 @@
|
||||
# Router
|
||||
|
||||
|
||||
### App Views extend View
|
||||
|
||||
```
|
||||
class MyView1 extends View {
|
||||
constructor(navView) {}
|
||||
}
|
||||
|
||||
@Template({
|
||||
inline: '<div>blah blah</div>'
|
||||
})
|
||||
class MyView2 extends View {
|
||||
constructor(navView) {}
|
||||
}
|
||||
|
||||
@Route({
|
||||
url: '/myview4'
|
||||
})
|
||||
class MyView4 extends View {
|
||||
constructor(navView) {}
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
|
||||
### JS Nav
|
||||
|
||||
```
|
||||
navView.push(MyView2)
|
||||
|
||||
navView.push({
|
||||
controller: MyView3,
|
||||
template: 'view3.html'
|
||||
})
|
||||
|
||||
navView.push({
|
||||
animation: 'horizontal',
|
||||
controller: MyView3,
|
||||
template: 'view3.html'
|
||||
})
|
||||
|
||||
navView.push({
|
||||
url: '/whateves',
|
||||
inline: '<div>crazy dynamic template</div>'
|
||||
})
|
||||
```
|
||||
|
||||
|
||||
### Markup Nav
|
||||
|
||||
```
|
||||
<a nav-link="MyView2"></a>
|
||||
|
||||
<a [nav-link]="{ controller: MyView3, template: 'view3.html', animation: horizontal }"></a>
|
||||
```
|
||||
|
||||
### Animations
|
||||
|
||||
platform: Whatever the platform would have naturally done (Default)
|
||||
horizontal: Right to center when going forward. Center to right when going back
|
||||
vertial: Bottom to center when going forward. Bottom to center when going back
|
||||
right-to-center: Always right to center
|
||||
left-to-center: Always left to center
|
||||
top-to-center: Always top to center
|
||||
bottom-to-center: Always bottom to center
|
||||
|
Reference in New Issue
Block a user