Unverified Commit 911a7c9c authored by Gicquel's avatar Gicquel Committed by gitbook-bot
Browse files

GitBook: [master] 2 pages modified

parent d451b60a
......@@ -9,7 +9,7 @@
* [Recommendations](contributors-guide/untitled.md)
* [Getting started](contributors-guide/getting-started.md)
* [Front-end structure](contributors-guide/front-end-structure.md)
* [Top level : Navigation components](contributors-guide/front-end-structure.md)
## Administrators guide
......
# Front-end structure
# Top level : Navigation components
### Navigation patterns
......@@ -72,13 +72,46 @@ computed: {
```
The v-ons-tabbar component has a **tabs** property. In vueJS, a property starting with a column is **bound** to the local context.
The v-ons-tabbar component has a **tabs property,** set to **val** below.
```javascript
<v-ons-tabbar
position="auto"
:tabs="val"
></v-ons-tabbar>
```
Here the binding occurs with the variable tabs \(declared tabs\(\)\).
In VueJS, a property starting with a **colon** is **bound reactively** to the local context. Here the **tabs property** take the **tabs** value. This value is the return of the tabs\(\) function.
{% hint style="info" %}
Try to change labels or icon in tabs\(\) declaration.
Change labels or icon in tabs\(\) declaration.
Remove an element of the tabs array, what happens?
{% endhint %}
#### The navigator component
The navigator component is in charge of the stack of sub-pages. Whenever the user enter a subpage \(ex. consult a record\), or a sub-sub-page \(ex. modify a record\) ; the navigator updates the stack pages accordingly.
```javascript
AppNavigator.vue
<template>
<v-ons-navigator swipeable swipe-target-width="50px"
:page-stack="$store.state.navigator.stack"
:pop-page="storePop"
:options="{animation:'slide-ios'}"
:class="{ 'border-radius': borderRadius }"
></v-ons-navigator>
</template>
```
Let's consider this piece of code. We notice 2 main property associated to v-ons-navigator :
* page-stack : **preceded by a comma,** its value is **bound** to the current state of the stack \(an array\)
* pop-page : **preceded by a comma,** its value is **bound** to a function \(storePop\), this function simply remove the last element of the stack
*
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment