forked from didi/cube-ui
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Feat Sticky, ScrollNavBar and ScrollNav (didi#237)
* feat(mixins): add new parent minxin creator * feat(sticky): init sticky component * feat(scroll-nav-bar): init logic * feat(scroll-nav): init logic * feat(modules): add sticky, scroll-nav, scroll-nav-bar * test(sticky): init tests * test(scroll-bar-bar): init tests * test(scroll-nav): init tests * docs(scroll-nav-bar): init doc * docs(sticky): init doc * docs(scroll-nav): init docs * docs(entry): add sticky, scroll-nav-bar, scroll-nav entries * chore(package.json): better-scroll to 1.12.4 * chore(yarn): yarn update
- Loading branch information
Showing
37 changed files
with
3,281 additions
and
11 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,132 @@ | ||
| ## ScrollNavBar | ||
|
|
||
| > New in 1.10.0+ | ||
| Scroll navigation bar component, like DiDi business navigation. | ||
|
|
||
| ### Example | ||
|
|
||
| - Default horizontal | ||
|
|
||
| ```html | ||
| <cube-scroll-nav-bar :current="current" :labels="labels" @change="changeHandler" /> | ||
| ``` | ||
| ```js | ||
| export default { | ||
| data() { | ||
| return { | ||
| current: '快车', | ||
| labels: [ | ||
| '快车', | ||
| '小巴', | ||
| '专车', | ||
| '顺风车', | ||
| '代驾', | ||
| '公交', | ||
| '自驾租车', | ||
| '豪华车', | ||
| '二手车', | ||
| '出租车' | ||
| ] | ||
| } | ||
| }, | ||
| methods: { | ||
| changeHandler(cur) { | ||
| this.current = cur | ||
| } | ||
| } | ||
| } | ||
| ``` | ||
|
|
||
| You can set the active item by `current` Prop. `labels` is the collection if all the item's keys. The `change` events will be triggered when active item changed. | ||
|
|
||
| - Vertical | ||
|
|
||
| ```html | ||
| <div class="side-container"> | ||
| <cube-scroll-nav-bar | ||
| direction="vertical" | ||
| :current="current" | ||
| :labels="labels" | ||
| :txts="txts" | ||
| @change="changeHandler"> | ||
| <i slot-scope="props">{{props.txt}}</i> | ||
| </cube-scroll-nav-bar> | ||
| </div> | ||
| ``` | ||
| ```js | ||
| export default { | ||
| data() { | ||
| return { | ||
| current: '快车', | ||
| labels: [ | ||
| '快车', | ||
| '小巴', | ||
| '专车', | ||
| '顺风车', | ||
| '代驾', | ||
| '公交', | ||
| '自驾租车', | ||
| '豪华车', | ||
| '二手车', | ||
| '出租车' | ||
| ], | ||
| txts: [ | ||
| '1快车', | ||
| '2小巴', | ||
| '3专车', | ||
| '4顺风车', | ||
| '5代驾', | ||
| '6公交', | ||
| '7自驾租车', | ||
| '8豪华车', | ||
| '9二手车', | ||
| '10出租车' | ||
| ] | ||
| } | ||
| }, | ||
| methods: { | ||
| changeHandler(cur) { | ||
| this.current = cur | ||
| } | ||
| } | ||
| } | ||
| ``` | ||
| ```stylus | ||
| .side-container | ||
| height: 300px | ||
| margin-top: 20px | ||
| ``` | ||
|
|
||
| If the `direction` Prop is `vertical` then the ScrollNavBar will be vertical style. | ||
|
|
||
| You can use `txts` Prop to defined the text of showcases, it's order is correspondence with `labels` Prop. The default `txts` value is `labels`. | ||
|
|
||
| You can also use default scoped slot to defined your own item content. | ||
|
|
||
| ### Props | ||
|
|
||
| | Attribute | Description | Type | Accepted Values | Default | | ||
| | - | - | - | - | - | | ||
| | direction | direction, default horizontal | String | horizontal/vertical | horizontal | | ||
| | labels | the collection if all the item's keys | Array | - | [] | | ||
| | txts | the text of showcases, it's order is correspondence with `labels` | Array | - | default equals to `labels` Prop | | ||
| | current | the key of the active item | String/Number | - | '' | | ||
|
|
||
| ### Slot | ||
|
|
||
| | Name | Description | Scope Parameters | | ||
| | - | - | - | | ||
| | default | default content | txt: item's text<br>index: item's index<br>active: the key of active item<br>label: item's label | | ||
|
|
||
| ### Events | ||
|
|
||
| | Event Name | Description | Parameters | | ||
| | - | - | - | | ||
| | change | triggers when active item changed | active - the key of active item | | ||
|
|
||
| ### Instance methods | ||
|
|
||
| | Method name | Description | | ||
| | - | - | | ||
| | refresh | You can call this method when content updated | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,176 @@ | ||
| ## ScrollNav | ||
|
|
||
| > New in 1.10.0+ | ||
| ScrollNav component. You can use it to sticky your navigation bar and content. | ||
|
|
||
| ### Example | ||
|
|
||
| - Basic usage - Default | ||
|
|
||
| ```html | ||
| <cube-scroll-nav @change="changeHandler"> | ||
| <cube-scroll-nav-panel | ||
| v-for="item in data" | ||
| :key="item.name" | ||
| :label="item.name"> | ||
| <ul> | ||
| <li v-for="food in item.foods"> | ||
| <div> | ||
| <img :src="food.icon"> | ||
| <p>{{food.name}}</p> | ||
| </div> | ||
| </li> | ||
| </ul> | ||
| </cube-scroll-nav-panel> | ||
| </cube-scroll-nav> | ||
| ``` | ||
| ```js | ||
| import goodsData from 'example/data/goods-list.json' | ||
|
|
||
| const goods = goodsData.goods | ||
|
|
||
| export default { | ||
| data() { | ||
| return { | ||
| data: goods | ||
| } | ||
| }, | ||
| methods: { | ||
| changeHandler(label) { | ||
| console.log('changed to:', label) | ||
| } | ||
| } | ||
| } | ||
| ``` | ||
|
|
||
| `goods`: | ||
| ```js | ||
| "goods": [ | ||
| { | ||
| "name": "热销榜", | ||
| "type": -1, | ||
| "foods": [ | ||
| { | ||
| "name": "皮蛋瘦肉粥", | ||
| // ... | ||
| "icon": "http://fuss10.elemecdn.com/c/cd/c12745ed8a5171e13b427dbc39401jpeg.jpeg?imageView2/1/w/114/h/114", | ||
| "image": "http://fuss10.elemecdn.com/c/cd/c12745ed8a5171e13b427dbc39401jpeg.jpeg?imageView2/1/w/750/h/750" | ||
| }, | ||
| // ... | ||
| ] | ||
| }, | ||
| // ... | ||
| ] | ||
| ``` | ||
|
|
||
| `cube-scroll-nav` should contains `cube-scroll-nav-panel` which is the navigation target panel content. | ||
|
|
||
| `cube-scroll-nav-panel` required Prop: `label`(the key of panel). | ||
|
|
||
| The `change` event will be triggered when navigation active item changed. | ||
|
|
||
| - Side Style | ||
|
|
||
| ```html | ||
| <cube-scroll-nav | ||
| :side-style="true" | ||
| :data="data" | ||
| :current="current" | ||
| @change="changeHandler" | ||
| @sticky-change="stickyChangeHandler"> | ||
| <ul class="prepend-header" slot="prepend"> | ||
| <li>11</li> | ||
| <li>22</li> | ||
| <li>333</li> | ||
| </ul> | ||
| <cube-scroll-nav-panel | ||
| v-for="item in data" | ||
| :key="item.name" | ||
| :label="item.name" | ||
| :title="item.name"> | ||
| <ul> | ||
| <li v-for="food in item.foods"> | ||
| <div> | ||
| <img :src="food.icon"> | ||
| <p>{{food.name}}</p> | ||
| </div> | ||
| </li> | ||
| </ul> | ||
| </cube-scroll-nav-panel> | ||
| </cube-scroll-nav> | ||
| ``` | ||
| ```js | ||
| import goodsData from 'example/data/goods-list.json' | ||
|
|
||
| const goods = goodsData.goods | ||
|
|
||
| export default { | ||
| components: { | ||
| CubePage | ||
| }, | ||
| data() { | ||
| return { | ||
| data: goods, | ||
| current: goods[3].name | ||
| } | ||
| }, | ||
| methods: { | ||
| changeHandler(label) { | ||
| console.log('changed to:', label) | ||
| }, | ||
| stickyChangeHandler(current) { | ||
| console.log('sticky-change', current) | ||
| } | ||
| } | ||
| } | ||
| ``` | ||
|
|
||
| If set `side-style` to `true` then the navigation bar will be at the side position. | ||
|
|
||
| `data` is the data source, it will be passed to `cube-scroll` component, if the `data` updated then `cube-scroll` will be auto refreshed. | ||
|
|
||
| `current` is the default navigation value(label of panel), if set this value then the target panel will be auto scrolled to the top of container. | ||
|
|
||
| The `sticky-change` event will be triggered when the navigation bar's sticky state changed. The parameter is one of `''`, `'cube-scroll-nav-bar'`. | ||
|
|
||
| You can use `prepend` slot to insert your own content before the main content. | ||
|
|
||
| ### Props | ||
|
|
||
| #### CubeScrollNav | ||
|
|
||
| | Attribute | Description | Type | Accepted Values | Default | | ||
| | - | - | - | - | - | | ||
| | data | optional, data source | Array | - | - | | ||
| | sideStyle | If set to `true` then the navigation bar will be at the side position | Boolean | true/false | false | | ||
| | current | the default navigation value(label of panel) | String/Number | - | '' | | ||
| | speed | speed of navigating to target panel | Number | - | 300 | | ||
|
|
||
| #### CubeScrollNavPanel | ||
|
|
||
| | Attribute | Description | Type | Accepted Values | Default | | ||
| | - | - | - | - | - | | ||
| | label | required, the key of panel | String/Number | - | - | | ||
| | title | the title of panel | String/Number | - | default equal to `label` Prop | | ||
|
|
||
| ### Slot | ||
|
|
||
| | Name | Description | Scope Parameters | | ||
| | - | - | - | | ||
| | default | default panel content | - | | ||
| | prepend | prepend content | - | | ||
| | bar | navigation bar content, you should use `cube-scroll-nav-bar` component to define your own navigation bar content | labels: the collection of all panel labels<br>txts: the collection of all panel titles<br>current: current active navigation value(label of panel) | | ||
|
|
||
| ### Events | ||
|
|
||
| | Event Name | Description | Parameters | | ||
| | - | - | - | | ||
| | change | triggers when navigation active item changed | active - active navigation value(label of panel) | | ||
| | sticky-change | triggers when the navigation bar's sticky state changed | current - if navigation bar is fixed then this value will be 'cube-scroll-nav-bar', otherwise this value will be '' | | ||
|
|
||
| ### Instance methods | ||
|
|
||
| | Method name | Description | | ||
| | - | - | | ||
| | refresh | You can call this method when content updated | |
Oops, something went wrong.