diff --git a/document/components/docs/en-US/button.md b/document/components/docs/en-US/button.md index e46ddb2940ddd2fa57d0a77b5eaf39717e61262f..5d6f939359e4f308ae2b57e742c23c231bcc9a8a 100644 --- a/document/components/docs/en-US/button.md +++ b/document/components/docs/en-US/button.md @@ -6,40 +6,40 @@ - Button type -The default type is `button`, and you can set that to `submit` in form. + The default type is `button`, and you can set that to `submit` in form. -```html -Button -Submit Button -``` + ```html + Button + Submit Button + ``` - Button state -Default is normal, can be set to active or disabled state. + Default is normal, can be set to active or disabled state. -```html -Active Button -Disabled Button -``` + ```html + Active Button + Disabled Button + ``` - Icon -You can set the class of `icon`. + You can set the class of `icon`. -```html -Button With Icon -``` + ```html + Button With Icon + ``` - Style -You can set attributes like `light`, `inline`, `outline`, and `primary` to change the button's style. + You can set attributes like `light`, `inline`, `outline`, and `primary` to change the button's style. -```html -Light Button -Inline Button -Outline Button -Primary Button -``` + ```html + Light Button + Inline Button + Outline Button + Primary Button + ``` ### Props configuration diff --git a/document/components/docs/en-US/checkbox-group.md b/document/components/docs/en-US/checkbox-group.md index 33cfdda5ae0d3b379f6725ce8837d8ca054fd557..16985c47a7b472264bdaec69421a779579c014df 100644 --- a/document/components/docs/en-US/checkbox-group.md +++ b/document/components/docs/en-US/checkbox-group.md @@ -6,40 +6,39 @@ - Vertical order -Default is vertical order style. - -```html - - - Checkbox 1 - - - Checkbox 2 - - - Disabled Checkbox - - - Disabled & Checked Checkbox - - -``` - - -The value of `checkList` is an array, which represents the set of the values of `label` in selected checkboxs. + Default is vertical order style. + + ```html + + + Checkbox 1 + + + Checkbox 2 + + + Disabled Checkbox + + + Disabled & Checked Checkbox + + + ``` + + The value of `checkList` is an array, which represents the set of the values of `label` in selected checkboxs. - Horizontal order -You can set `horizontal` to change the style to horizontal order. + You can set `horizontal` to change the style to horizontal order. -```html - - 1 - 2 - 3 - 4 - -``` + ```html + + 1 + 2 + 3 + 4 + + ``` ### Props configuration diff --git a/document/components/docs/en-US/checkbox.md b/document/components/docs/en-US/checkbox.md index 8ef5af36934b27fabe7115e2ab8251c448d85d7b..f95d5cc753463fed8770812a9acaa8de971a55b1 100644 --- a/document/components/docs/en-US/checkbox.md +++ b/document/components/docs/en-US/checkbox.md @@ -6,43 +6,43 @@ - Basic usage -```html - - Checkbox - -``` + ```html + + Checkbox + + ``` -If selected, the value of `checked` is `true`. + If selected, the value of `checked` is `true`. - Disabled state -```html - - Disabled Checkbox - -``` + ```html + + Disabled Checkbox + + ``` -Set `disabled` to `true` to turn into the disabled state. + Set `disabled` to `true` to turn into the disabled state. - Position of the checkbox icon -```html - - Position Checkbox - -``` + ```html + + Position Checkbox + + ``` -If setting `position` to `'right'`, the position of the checkbox's icon is on the right. + If setting `position` to `'right'`, the position of the checkbox's icon is on the right. - Change the value of model -```html - - Set label Checkbox - -``` + ```html + + Set label Checkbox + + ``` -If `label` is setted, and when the checkbox is selected, the value of `checked` is `'labelValue'`. When not selected, the value is `false`; Therefore, in circumstances of single checkbox, better not set `label`. + If `label` is setted, and when the checkbox is selected, the value of `checked` is `'labelValue'`. When not selected, the value is `false`; Therefore, in circumstances of single checkbox, better not set `label`. ### Props configuration diff --git a/document/components/docs/en-US/create-api.md b/document/components/docs/en-US/create-api.md index 58551ada117e7afa930736e330206cd90cd63e84..26067416b965a5a6e0355032acbc5c87ae18ac66 100644 --- a/document/components/docs/en-US/create-api.md +++ b/document/components/docs/en-US/create-api.md @@ -20,96 +20,96 @@ This module exports a function called `createAPI` with which you can invoke the - Example: -First we create Hello.vue component： - -```html - - - -``` - -Then we make Hello.vue to an API style component by calling the `createAPI` method. - -```js - import Vue from 'vue' - import Hello from './Hello.vue' - - // import Style to load the base style - import { - /* eslint-disable no-unused-vars */ - Style, - Dialog, - createAPI - } from 'cube-ui' - - Vue.use(Dialog) - - // create this.$createHello API - createAPI(Vue, Hello, ['click'], true) - - // init Vue - new Vue({ - el: '#app', - render: function (h) { - return h('button', { - on: { - click: this.showHello - } - }, ['Show Hello']) - }, - methods: { - showHello() { - /* The first parameter of `$createHello` will be passed to the component as its props except the events in `events`(It will transform by default, eg: If `events` has value `['click']`, then the prop `onClick` will be treated as component's event and not component's props) */ - const instance = this.$createHello({ - content: 'My Hello Content', - onClick(e) { - console.log('Hello component clicked.') + + ``` + + Then we make Hello.vue to an API style component by calling the `createAPI` method. + + ```js + import Vue from 'vue' + import Hello from './Hello.vue' + + // import Style to load the base style + import { + /* eslint-disable no-unused-vars */ + Style, + Dialog, + createAPI + } from 'cube-ui' + + Vue.use(Dialog) + + // create this.$createHello API + createAPI(Vue, Hello, ['click'], true) + + // init Vue + new Vue({ + el: '#app', + render: function (h) { + return h('button', { + on: { + click: this.showHello } - }, /* renderFn */ (createElement) => { - return [ - createElement('p', { - slot: 'other' - }, 'other content') - ] - }) - // Also, the event hanlder can be registered by instance's `$on` method - instance.$on('click', (e) => { - const $dialog = this.$createDialog({ - type: 'confirm', - content: 'click confirm to remove current instance', - icon: 'cubeic-alert' + }, ['Show Hello']) + }, + methods: { + showHello() { + /* The first parameter of `$createHello` will be passed to the component as its props except the events in `events`(It will transform by default, eg: If `events` has value `['click']`, then the prop `onClick` will be treated as component's event and not component's props) */ + const instance = this.$createHello({ + content: 'My Hello Content', + onClick(e) { + console.log('Hello component clicked.') + } + }, /* renderFn */ (createElement) => { + return [ + createElement('p', { + slot: 'other' + }, 'other content') + ] }) - $dialog.show() - - $dialog.$on('confirm', () => { - // remove instance - instance.remove() - }).$on('cancel', () => { - console.log('cancel') + // Also, the event hanlder can be registered by instance's `$on` method + instance.$on('click', (e) => { + const $dialog = this.$createDialog({ + type: 'confirm', + content: 'click confirm to remove current instance', + icon: 'cubeic-alert' + }) + $dialog.show() + + $dialog.$on('confirm', () => { + // remove instance + instance.remove() + }).$on('cancel', () => { + console.log('cancel') + }) }) - }) + } } - } - }) -``` -In this example, we create a component `Hello` which needs to be invoked in api form and we invoke it in another component.The focus is what `showHello()` does: invoking method `this.$createHello(config, renderFn)` to instantiate `Hello`. + }) + ``` + In this example, we create a component `Hello` which needs to be invoked in api form and we invoke it in another component.The focus is what `showHello()` does: invoking method `this.$createHello(config, renderFn)` to instantiate `Hello`. diff --git a/document/components/docs/en-US/index-list.md b/document/components/docs/en-US/index-list.md index 47670b49ccb446a82b9933ecdb9ea16f604d08dd..c744d3078021de0f0051353896eb41da38de6dcf 100644 --- a/document/components/docs/en-US/index-list.md +++ b/document/components/docs/en-US/index-list.md @@ -6,62 +6,62 @@ - Basic usage -Construct data like `cityData` in the example below and pass it into `data` in `cube-index-list` component. + Construct data like `cityData` in the example below and pass it into `data` in `cube-index-list` component. -```html - -``` -```javascript -const cityData = [ - { - "name": "★Hot City", - "items": [ - { - "name": "BEIJING", - "value": 1 - }, - { - "name": "SHANGHAI", - "value": 2 + ```html + + ``` + ```javascript + const cityData = [ + { + "name": "★Hot City", + "items": [ + { + "name": "BEIJING", + "value": 1 + }, + { + "name": "SHANGHAI", + "value": 2 + } + ] + }, + { + "name": "A", + "items": [ + { + "name": "ANSHAN", + "value": 3 + }, + { + "name": "ANQING", + "value": 4 + } + ] + } + ] + + export default { + data() { + return { + title: 'Current City: BEIJING', + cityData: cityData } - ] - }, - { - "name": "A", - "items": [ - { - "name": "ANSHAN", - "value": 3 + }, + methods: { + selectItem(item) { + console.log(item.name) }, - { - "name": "ANQING", - "value": 4 + clickTitle(title) { + console.log(title) } - ] - } -] - -export default { - data() { - return { - title: 'Current City: BEIJING', - cityData: cityData - } - }, - methods: { - selectItem(item) { - console.log(item.name) - }, - clickTitle(title) { - console.log(title) } } -} -``` + ``` ### Props configuration diff --git a/document/components/docs/en-US/introduction.md b/document/components/docs/en-US/introduction.md index fe1b62518fcfd64ef4a63f8e47e17a9ce292b22b..f3c925ab09d913b0d98afa4a40f36e90930f6592 100644 --- a/document/components/docs/en-US/introduction.md +++ b/document/components/docs/en-US/introduction.md @@ -6,11 +6,11 @@ cube-ui is an elegant mobile component library based on Vue.js. - **Quality** - Extracted from DiDi interior component library and has been put to business test for more than one year. Every component has full unit tests to provide assurance for continuous integration. + Extracted from DiDi interior component library and has been put to business test for more than one year. Every component has full unit tests to provide assurance for continuous integration. - **Experience** - Make quick response, fluent animation and close to native components as the goal, and pursue the perfection of the interactive experience. + Make quick response, fluent animation and close to native components as the goal, and pursue the perfection of the interactive experience. - **Standard** diff --git a/document/components/docs/en-US/loading.md b/document/components/docs/en-US/loading.md index d2ccf6b48ee2271ac2fd255306eb38b7d9ca04ed..10b57df31cb5b56ce74a57d8e96c0abf5f26c024 100644 --- a/document/components/docs/en-US/loading.md +++ b/document/components/docs/en-US/loading.md @@ -6,13 +6,13 @@ - The size of icon -Default is `24px` and can be configured by setting `size`. + Default is `24px` and can be configured by setting `size`. -```html - - - -``` + ```html + + + + ``` ### Props configuration diff --git a/document/components/docs/en-US/picker.md b/document/components/docs/en-US/picker.md index 70cce9cae29c0121c03030f98bd1d7c23e0f65a6..cba592f0de20295cc2f3b701122df2757d11b7ef 100644 --- a/document/components/docs/en-US/picker.md +++ b/document/components/docs/en-US/picker.md @@ -6,175 +6,175 @@ - Basic usage -```html -Picker -``` -```js -const col1Data = [{ text: '剧毒', value: '剧毒'}, { text: '蚂蚁', value: '蚂蚁' }, { text: '幽鬼', value: '幽鬼' }] -export default { - mounted () { - this.picker = this.$createPicker({ - title: 'Picker selectors - single column', - data: [col1Data], - onSelect: (selectedText, selectedIndex) => { - this.$createDialog({ - type: 'warn', - content: `selected content：${selectedText.join(',')}
selected index： ${selectedIndex.join(',')}`, - icon: 'cubeic-alert' - }).show() - }, - onCancel: () => { - this.$createToast({ - type: 'correct', - txt: 'Clicked cancel button', - time: 1000 - }).show() + ```html + Picker + ``` + ```js + const col1Data = [{ text: '剧毒', value: '剧毒'}, { text: '蚂蚁', value: '蚂蚁' }, { text: '幽鬼', value: '幽鬼' }] + export default { + mounted () { + this.picker = this.$createPicker({ + title: 'Picker selectors - single column', + data: [col1Data], + onSelect: (selectedText, selectedIndex) => { + this.$createDialog({ + type: 'warn', + content: `selected content：${selectedText.join(',')}
selected index： ${selectedIndex.join(',')}`, + icon: 'cubeic-alert' + }).show() + }, + onCancel: () => { + this.$createToast({ + type: 'correct', + txt: 'Clicked cancel button', + time: 1000 + }).show() + } + }) + }, + methods: { + showPicker () { + this.picker.show() } - }) - }, - methods: { - showPicker () { - this.picker.show() } } -} -``` + ``` - Multi-column selectors -```html -Picker - multiple Columns -``` -```js -const col1Data = [{ text: '剧毒', value: '剧毒'}, { text: '蚂蚁', value: '蚂蚁' }, { text: '幽鬼', value: '幽鬼' }] - const col2Data = [{ text: '输出', value: '输出' }, { text: '控制', value: '控制' }, { text: '核心', value: '核心' -}, { text: '爆发', value: '爆发' }, { text: '辅助', value: '辅助' }, { text: '打野', value: '打野' }, { text: '逃生', value: '逃生' }, { text: '先手', value: '先手' }] - const col3Data = [{ text: '梅肯', value: '梅肯'}, { text: '秘法鞋', value: '秘法鞋' }, { text: '假腿', value: '假腿' }, { text: '飞鞋', value: '飞鞋' }, { text: '辉耀', value: '辉耀' }, { text: '金箍棒', value: '金箍棒' }] -export default { - mounted () { - this.picker = this.$createPicker({ - title: 'Picker selectors - multiple columns', - data: [col1Data, col2Data, col3Data] - }) - }, - methods: { - showPicker () { - this.picker.show() + ```html + Picker - multiple Columns + ``` + ```js + const col1Data = [{ text: '剧毒', value: '剧毒'}, { text: '蚂蚁', value: '蚂蚁' }, { text: '幽鬼', value: '幽鬼' }] + const col2Data = [{ text: '输出', value: '输出' }, { text: '控制', value: '控制' }, { text: '核心', value: '核心' + }, { text: '爆发', value: '爆发' }, { text: '辅助', value: '辅助' }, { text: '打野', value: '打野' }, { text: '逃生', value: '逃生' }, { text: '先手', value: '先手' }] + const col3Data = [{ text: '梅肯', value: '梅肯'}, { text: '秘法鞋', value: '秘法鞋' }, { text: '假腿', value: '假腿' }, { text: '飞鞋', value: '飞鞋' }, { text: '辉耀', value: '辉耀' }, { text: '金箍棒', value: '金箍棒' }] + export default { + mounted () { + this.picker = this.$createPicker({ + title: 'Picker selectors - multiple columns', + data: [col1Data, col2Data, col3Data] + }) + }, + methods: { + showPicker () { + this.picker.show() + } } } -} -``` + ``` -`data` receives an array, whose length determines the columns of `picker`. + `data` receives an array, whose length determines the columns of `picker`. - Linkage selectors -```html -Picker - linkage -``` -```js -import { provinceList, cityList, areaList } from '../data/area' + ```html + Picker - linkage + ``` + ```js + import { provinceList, cityList, areaList } from '../data/area' -export default { - data () { - return { - tempIndex: [0, 0, 0] - } - }, - mounted () { - this.picker = this.$createPicker({ - title: 'Picker - linkage data', - data: this.linkageData, - onChange: (i, newIndex) => { - if (newIndex !== this.tempIndex[i]) { - for (let j = 2; j > i; j--) { - this.tempIndex.splice(j, 1, 0) - this.picker.scrollTo(j, 0) + export default { + data () { + return { + tempIndex: [0, 0, 0] + } + }, + mounted () { + this.picker = this.$createPicker({ + title: 'Picker - linkage data', + data: this.linkageData, + onChange: (i, newIndex) => { + if (newIndex !== this.tempIndex[i]) { + for (let j = 2; j > i; j--) { + this.tempIndex.splice(j, 1, 0) + this.picker.scrollTo(j, 0) + } + + this.tempIndex.splice(i, 1, newIndex) + this.picker.setData(this.linkageData, this.tempIndex) } - - this.tempIndex.splice(i, 1, newIndex) - this.picker.setData(this.linkageData, this.tempIndex) + }, + onSelect: (selectedText, selectedIndex) => { + this.$createDialog({ + type: 'warn', + content: `selected content：${selectedText.join(',')}
selected index： ${selectedIndex.join(',')}`, + icon: 'cubeic-alert' + }).show() + }, + onCancel: () => { + this.$createToast({ + type: 'correct', + txt: 'Clicked cancel button', + time: 1000 + }).show() } - }, - onSelect: (selectedText, selectedIndex) => { - this.$createDialog({ - type: 'warn', - content: `selected content：${selectedText.join(',')}
selected index： ${selectedIndex.join(',')}`, - icon: 'cubeic-alert' - }).show() - }, - onCancel: () => { - this.$createToast({ - type: 'correct', - txt: 'Clicked cancel button', - time: 1000 - }).show() + }) + }, + watch: { + linkageData() { + this.picker.refresh() + } + }, + computed: { + linkageData() { + const provinces = provinceList + const cities = cityList[provinces[this.tempIndex[0]].value] + const areas = areaList[cities[this.tempIndex[1]].value] + + return [provinces, cities, areas] } - }) - }, - watch: { - linkageData() { - this.picker.refresh() - } - }, - computed: { - linkageData() { - const provinces = provinceList - const cities = cityList[provinces[this.tempIndex[0]].value] - const areas = areaList[cities[this.tempIndex[1]].value] - - return [provinces, cities, areas] } - } - methods: { - showPicker () { - this.picker.show() + methods: { + showPicker () { + this.picker.show() + } } } -} -``` + ``` -By monitoring the `change` event triggered by each roller and invoke `setData` method to dynamicly set values of associated rollers to accomplish linkage selectors. + By monitoring the `change` event triggered by each roller and invoke `setData` method to dynamicly set values of associated rollers to accomplish linkage selectors. - Instance method `setData` -```html -Picker - setData -``` -```js -const col1Data = [{ text: '剧毒', value: '剧毒'}, { text: '蚂蚁', value: '蚂蚁' }, { text: '幽鬼', value: '幽鬼' }] -const col2Data = [{ text: '梅肯', value: '梅肯'}, { text: '秘法鞋', value: '秘法鞋' }, { text: '假腿', value: '假腿' }, { text: '飞鞋', value: '飞鞋' }, { text: '辉耀', value: '辉耀' }, { text: '金箍棒', value: '金箍棒' }] -const col3Data = [{ text: '输出', value: '输出'}, { text: '控制', value: '控制' }, { text: '核心', value: '核心' }, { text: '爆发', value: '爆发'}, { text: '辅助', value: '辅助' }] -export default { - mounted () { - this.picker = this.$createPicker({ - title: 'Picker-setData', - onSelect: (selectedText, selectedIndex) => { - this.$createDialog({ - type: 'warn', - content: `selected content：${selectedText.join(',')}
selectedIndex： ${selectedIndex.join(',')}`, - icon: 'cubeic-alert' - }).show() - }, - onCancel: () => { - this.$createToast({ - type: 'correct', - txt: 'Clicked cancel button', - time: 1000 - }).show() + ```html + Picker - setData + ``` + ```js + const col1Data = [{ text: '剧毒', value: '剧毒'}, { text: '蚂蚁', value: '蚂蚁' }, { text: '幽鬼', value: '幽鬼' }] + const col2Data = [{ text: '梅肯', value: '梅肯'}, { text: '秘法鞋', value: '秘法鞋' }, { text: '假腿', value: '假腿' }, { text: '飞鞋', value: '飞鞋' }, { text: '辉耀', value: '辉耀' }, { text: '金箍棒', value: '金箍棒' }] + const col3Data = [{ text: '输出', value: '输出'}, { text: '控制', value: '控制' }, { text: '核心', value: '核心' }, { text: '爆发', value: '爆发'}, { text: '辅助', value: '辅助' }] + export default { + mounted () { + this.picker = this.$createPicker({ + title: 'Picker-setData', + onSelect: (selectedText, selectedIndex) => { + this.$createDialog({ + type: 'warn', + content: `selected content：${selectedText.join(',')}
selectedIndex： ${selectedIndex.join(',')}`, + icon: 'cubeic-alert' + }).show() + }, + onCancel: () => { + this.$createToast({ + type: 'correct', + txt: 'Clicked cancel button', + time: 1000 + }).show() + } + }) + }, + methods: { + showPicker () { + this.picker.setData([col1Data, col2Data, col3Data], [1, 2, 3]) + this.picker.show() } - }) - }, - methods: { - showPicker () { - this.picker.setData([col1Data, col2Data, col3Data], [1, 2, 3]) - this.picker.show() } } -} -``` + ``` -Instance method `setData` accepts two parameters, both of whom are arrays. The first is data that the roller displays and the second is indexs of selected values. + Instance method `setData` accepts two parameters, both of whom are arrays. The first is data that the roller displays and the second is indexs of selected values. ### Props configuration diff --git a/document/components/docs/en-US/popup.md b/document/components/docs/en-US/popup.md index 6be3b1e2d20cc04cbbd46ef2266ac9c2901f93b2..2db303f5d9834579035b19ce370ae3795fca4823 100644 --- a/document/components/docs/en-US/popup.md +++ b/document/components/docs/en-US/popup.md @@ -8,118 +8,119 @@ All of the built-in popup type components are implemented based on this componen - Basic usage -```html - - My Popup Content 1 - - - Show Popup - -``` - -Specifying `type` will help control class according to the type. In the example above, `cube-my-popup` will be added to the classList of the root element. - -```js -export default { - methods: { - showPopup(refId) { - const component = this.$refs[refId] - component.show() - setTimeout(() => { - component.hide() - }, 1000) + ```html + + My Popup Content 1 + + + Show Popup + + ``` + + Specifying `type` will help control class according to the type. In the example above, `cube-my-popup` will be added to the classList of the root element. + + ```js + export default { + methods: { + showPopup(refId) { + const component = this.$refs[refId] + component.show() + setTimeout(() => { + component.hide() + }, 1000) + } } } -} -``` + ``` -The component is hidden by default and won't show up unless invoking the `show()` method of the instance of the component. And of course, invoking the `hide()` method of the instance of the component will hide itself. That's what `showPopup()` does in the example above (first show and hide in one second). + The component is hidden by default and won't show up unless invoking the `show()` method of the instance of the component. And of course, invoking the `hide()` method of the instance of the component will hide itself. That's what `showPopup()` does in the example above (first show and hide in one second). - Without background layer -```html - - My Popup Content 2 - - - Show Popup - no mask - -``` -Setting `mask` to `false` and the background layer is hidden. + ```html + + My Popup Content 2 + + + Show Popup - no mask + + ``` + + Setting `mask` to `false` and the background layer is hidden. - Show the HTML content -```html - - - Show Popup - with content - -``` + ```html + + + Show Popup - with content + + ``` -You only need to pass the HTML fragment on to `content`. + You only need to pass the HTML fragment on to `content`. - Setting to bottom -```html -My Popup Content 4 - - Show Popup - bottom - -``` + ```html + My Popup Content 4 + + Show Popup - bottom + + ``` -Considering that in mobile secnes, popup is in center or bottom most of the time (covered in horizontal direction when setted to bottom). So if setting `center` to `false`, you'll set the component to bottom. + Considering that in mobile secnes, popup is in center or bottom most of the time (covered in horizontal direction when setted to bottom). So if setting `center` to `false`, you'll set the component to bottom. - Upper layer encapsulation -```html - - - -``` - -An upper layer encapsulated CubeExtendPopup component with some styles is implemented. It supports passing the content on, has default slot and can be hidden if clicking the content. You can use it in this way (need to be registers globally or partially): - -```html - - - Show Extend Popup - -``` + + + ``` + + An upper layer encapsulated CubeExtendPopup component with some styles is implemented. It supports passing the content on, has default slot and can be hidden if clicking the content. You can use it in this way (need to be registers globally or partially): + + ```html + + + Show Extend Popup + + ``` ### Props configuration diff --git a/document/components/docs/en-US/scroll.md b/document/components/docs/en-US/scroll.md index 2642635475927bc29c4c5dff190ec060c2fcddc9..9b4038fd0a6079064a578fdbb4a5677773ffc385 100644 --- a/document/components/docs/en-US/scroll.md +++ b/document/components/docs/en-US/scroll.md @@ -6,227 +6,225 @@ - Basic usage -By setting `data` to an array, you can generate the list which can scrolls elegantly in the container. + By setting `data` to an array, you can generate the list which can scrolls elegantly in the container. -```html -
- -
-``` + ```html +
+ +
+ ``` - Scroll bar -Default is without scroll bar. You can set it to fade-in-fade-out or always-show style. - -```html - - - - -``` -```javascript -export default { - data() { - return { - items: [1, 2, 3, 4, 5], - scrollbar: { - fade: false + Default is without scroll bar. You can set it to fade-in-fade-out or always-show style. + + ```html + + + + + ``` + ```javascript + export default { + data() { + return { + items: [1, 2, 3, 4, 5], + scrollbar: { + fade: false + } } } } -} -``` + ``` - Pull down to refresh -There is no pull-down-to-refresh function by default. Configuring `pull-down-refresh` can turn on the dispatching of the event `pulling-down` and the animation of pulling down. You can listen to `pulling-down` event to update data. - -```html - - - - -``` -```javascript -export default { - data() { - return { - items: [1, 2, 3, 4, 5], - pullDownRefresh: { - threshold: 90, - stop: 40, - txt: 'Refresh success' - } - } - }, - methods: { - onPullingDown() { - // simulate updating data - setTimeout(() => { - if (Math.random() > 0.5) { - // if new data - this.items.unshift('I am new data: ' + +new Date()) - } else { - // if no new data - this.$refs.scroll.forceUpdate() + There is no pull-down-to-refresh function by default. Configuring `pull-down-refresh` can turn on the dispatching of the event `pulling-down` and the animation of pulling down. You can listen to `pulling-down` event to update data. + + ```html + + + + + ``` + ```javascript + export default { + data() { + return { + items: [1, 2, 3, 4, 5], + pullDownRefresh: { + threshold: 90, + stop: 40, + txt: 'Refresh success' } - }, 1000) + } + }, + methods: { + onPullingDown() { + // simulate updating data + setTimeout(() => { + if (Math.random() > 0.5) { + // if new data + this.items.unshift('I am new data: ' + +new Date()) + } else { + // if no new data + this.$refs.scroll.forceUpdate() + } + }, 1000) + } } } -} -``` + ``` - Pulling up to load -There is no pull-up-to-load function by default. Configuring `pull-up-load` can turn on the dispatching of the event `pulling-up` and the animation of pulling up. You can listen to `pulling-up` event to update data. - - -```html - - - - -``` -```javascript -export default { - data() { - return { - items: [1, 2, 3, 4, 5], - itemIndex: 5, - pullUpLoad: { - threshold: 0, - txt: { - more: 'Load more', - noMore: 'No more data' + There is no pull-up-to-load function by default. Configuring `pull-up-load` can turn on the dispatching of the event `pulling-up` and the animation of pulling up. You can listen to `pulling-up` event to update data. + + ```html + + + + + ``` + ```javascript + export default { + data() { + return { + items: [1, 2, 3, 4, 5], + itemIndex: 5, + pullUpLoad: { + threshold: 0, + txt: { + more: 'Load more', + noMore: 'No more data' + } } } - } - }, - methods: { - onPullingUp() { - // simulate updating data - setTimeout(() => { - if (Math.random() > 0.5) { - // if new data - let newPage = [ - 'I am line ' + ++this.itemIndex, - 'I am line ' + ++this.itemIndex, - 'I am line ' + ++this.itemIndex, - 'I am line ' + ++this.itemIndex, - 'I am line ' + ++this.itemIndex - ] - - this.items = this.items.concat(newPage) - } else { - // if no new data - this.$refs.scroll.forceUpdate() - } - }, 1000) + }, + methods: { + onPullingUp() { + // simulate updating data + setTimeout(() => { + if (Math.random() > 0.5) { + // if new data + let newPage = [ + 'I am line ' + ++this.itemIndex, + 'I am line ' + ++this.itemIndex, + 'I am line ' + ++this.itemIndex, + 'I am line ' + ++this.itemIndex, + 'I am line ' + ++this.itemIndex + ] + + this.items = this.items.concat(newPage) + } else { + // if no new data + this.$refs.scroll.forceUpdate() + } + }, 1000) + } } } -} -``` + ``` - Customize the animation of pulling down refreshing and pulling up loading -If you don't like the built-in slots of pulling down refreshing and pulling up loading, you can use [scoped slots](https://vuejs.org/v2/guide/components.html#Scoped-Slots) to customize animation. The example below uses scoped slots to customize animation of pulling down refreshing, while pulling up loading keeps default built-in animation. - -```html - - + + ``` + With the parameters that scoped slots provide, you can control the process of animation according to the change of the state. Detailed scope parameters and their meaning are shown below in 'Slots'. ### Props configuration -| Attribute | Description | Type | Accepted Values | Default | -| ------------------ | ---------------------------------------- | -------------- | ------------------------ | ---------- | -| data | data used for list rendering | Array | - | [] | -| direction | scrolling direction | String | 'vertical', 'horizontal' | 'vertical' | -| scrollbar | configuration for scroll bar | Boolean/Object | - | false | -| pullDownRefresh | configuration for pulling down refreshing | Boolean/Object | - | false | -| pullUpLoad | configuration for pulling up loading | Boolean/Object | - | false | -| listenScroll | whether to dispatch scroll event | Boolean | true/false | false | -| probeType | the dispatching time of scroll event
1. non-real-time dispatching;
2. real-time dispatching during the scrolling;
3. real-time dispatching during the entire scrolling including inertial stage | Number | 1, 2, 3 | 0 | -| listenBeforeScroll | whether to dispatch before-scroll-start event | Boolean | true/false | false | +| Attribute | Description | Type | Accepted Values | Default | +| - | - | - | - | - | +| data | data used for list rendering | Array | - | [] | +| direction | scrolling direction | String | 'vertical', 'horizontal' | 'vertical' | +| scrollbar | configuration for scroll bar | Boolean/Object | - | false | +| pullDownRefresh | configuration for pulling down refreshing | Boolean/Object | - | false | +| pullUpLoad | configuration for pulling up loading | Boolean/Object | - | false | +| listenScroll | whether to dispatch scroll event | Boolean | true/false | false | +| probeType | the dispatching time of scroll event
1. non-real-time dispatching;
2. real-time dispatching during the scrolling;
3. real-time dispatching during the entire scrolling including inertial stage | Number | 1, 2, 3 | 0 | +| listenBeforeScroll | whether to dispatch before-scroll-start event | Boolean | true/false | false | - `scrollbar` sub configuration -| Attribute | Description | Type | Accepted Values | Default | -| --------- | -------------------------------------- | ------- | --------------- | ------- | -| fade | whether to have fade-in-fade-out style | Boolean | true/false | false | +| Attribute | Description | Type | Accepted Values | Default | +| - | - | - | - | - | +| fade | whether to have fade-in-fade-out style | Boolean | true/false | false | - `pullDownRefresh` sub configuration -| Attribute | Description | Type | Accepted Values | Default | -| --------- | ---------------------------------------- | ------ | --------------- | ----------------- | -| threshold | the threshold of distance that pulling down for refreshing | Number | - | 90 | -| stop | the position where rebounding stays | Number | - | 40 | -| txt | the text shown when refreshing successfully | String | - | 'Refresh success' | +| Attribute | Description | Type | Accepted Values | Default | +| - | - | - | - | - | +| threshold | the threshold of distance that pulling down for refreshing | Number | - | 90 | +| stop | the position where rebounding stays | Number | - | 40 | +| txt | the text shown when refreshing successfully | String | - | 'Refresh success' | - `pullUpLoad` sub configuration -| Attribute | Description | Type | Accepted Values | Default | -| --------- | ---------------------------------------- | ------ | --------------- | ---------------------------------------- | -| threshold | the threshold of distance that pulling up for loading | Number | - | 0 | -| txt | the text shown when pulling up loading | Object | - | { more: 'Load more', noMore: 'No more data' } | +| Attribute | Description | Type | Accepted Values | Default | +| - | - | - | - | - | +| threshold | the threshold of distance that pulling up for loading | Number | - | 0 | +| txt | the text shown when pulling up loading | Object | - | { more: 'Load more', noMore: 'No more data' } | ### Slot -| Name | Description | Scope Parameters | -| -------- | ---------------------------------------- | ---------------------------------------- | +| Name | Description | Scope Parameters | +| - | - | - | | pulldown | located above the list and shown when pulling down refreshing | pullDownRefresh: whether to turn on pulling-down-refreshing function
pullDownStyle: the style of showing and fading
beforePullDown: whether in pulling down operation
isPullingDown: whether in the process of pulling in data
bubbleY: the distance of pulling down currently - 50 | -| pullup | located below the list and shown when pulling up loading | pullUpLoad: whether to turn on pulling-up-loading function
isPullUpLoad: whether the data is being loaded | +| pullup | located below the list and shown when pulling up loading | pullUpLoad: whether to turn on pulling-up-loading function
isPullUpLoad: whether the data is being loaded | ### Events -| Event Name | Description | Parameters | -| ------------------- | ---------------------------------------- | ---------------------------------------- | -| click | triggers when clicking the list item | item - the data of the list item | -| scroll | triggers according to the value of probeType, if listenScroll is true | Object {x, y} - real-time scrolling coordinates | -| before-scroll-start | triggers before scrolling start, if listenBeforeScroll | - | -| pulling-down | triggers when the distance of pulling down exceeds the threshold, if pullDownRefresh is true | - | -| pulling-up | triggers when the distance of pulling up exceeds the threshold, if pullUpLoad is true | - | +| Event Name | Description | Parameters | +| - | - | - | +| click | triggers when clicking the list item | item - the data of the list item | +| scroll | triggers according to the value of probeType, if listenScroll is true | Object {x, y} - real-time scrolling coordinates | +| before-scroll-start | triggers before scrolling start, if listenBeforeScroll | - | +| pulling-down | triggers when the distance of pulling down exceeds the threshold, if pullDownRefresh is true | - | +| pulling-up | triggers when the distance of pulling up exceeds the threshold, if pullUpLoad is true | - | diff --git a/document/components/docs/en-US/slide.md b/document/components/docs/en-US/slide.md index 379fa9c5bc6601e0c7bcaf79c0ac6f54c998929a..1fce170eeb7f759131c59798c5225f9d133be838 100644 --- a/document/components/docs/en-US/slide.md +++ b/document/components/docs/en-US/slide.md @@ -90,16 +90,16 @@ ### Props configuration -| Attribute | Description | Type | Accepted Values | Default | -| --------- | ------------------------------------ | ------- | --------------- | ------- | -| loop | whether to loop play | Boolean | true/false | true | -| autoPlay | whether to play automatically | Boolean | true/false | true | -| interval | interval of play | Number | - | 4000 | -| threshold | sliding threshold of switching pages | Number | (0, 1) | 0.3 | -| speed | speed of switching pages | Number | - | 400 | +| Attribute | Description | Type | Accepted Values | Default | +| - | - | - | - | - | +| loop | whether to loop play | Boolean | true/false | true | +| autoPlay | whether to play automatically | Boolean | true/false | true | +| interval | interval of play | Number | - | 4000 | +| threshold | sliding threshold of switching pages | Number | (0, 1) | 0.3 | +| speed | speed of switching pages | Number | - | 400 | ### 事件 -| Event Name | Description | Parameters | -| ---------- | ----------------------------------- | ---------------------- | -| change | triggers when current slide changes | index of current slide | +| Event Name | Description | Parameters | +| - | - | - | +| change | triggers when current slide changes | index of current slide | diff --git a/document/components/docs/en-US/time-picker.md b/document/components/docs/en-US/time-picker.md index 5b2b4bd75f88677f05c98a74c8f68ab8765ee9bd..30e56e023cb0198b61e525be37dd1e7b6e217b47 100644 --- a/document/components/docs/en-US/time-picker.md +++ b/document/components/docs/en-US/time-picker.md @@ -6,135 +6,135 @@ - Basic usage -```html -TimePicker -``` - -```js -export default { - methods: { - showTimePicker () { - this.$createTimePicker({ - showNow: true, - minuteStep: 5, - delay: 15, - onSelect: (selectedTime, selectedText) => { - this.$createDialog({ - type: 'warn', - title: `selected timestamp ${selectedTime}`, - content: `selected content ${selectedText}`, - icon: 'cubeic-alert' - }).show() - }, - onCancel: () => { - this.$createToast({ - type: 'correct', - txt: 'Clicked cancel button', - time: 1000 - }).show() - } - }).show() + ```html + TimePicker + ``` + + ```js + export default { + methods: { + showTimePicker () { + this.$createTimePicker({ + showNow: true, + minuteStep: 5, + delay: 15, + onSelect: (selectedTime, selectedText) => { + this.$createDialog({ + type: 'warn', + title: `selected timestamp ${selectedTime}`, + content: `selected content ${selectedText}`, + icon: 'cubeic-alert' + }).show() + }, + onCancel: () => { + this.$createToast({ + type: 'correct', + txt: 'Clicked cancel button', + time: 1000 + }).show() + } + }).show() + } } } -} -``` + ``` -`showNow` is uesed to control whether the time "now" is displayed. `minuteStep` is used to control the step of the minute. `delay` represents the time that postponed backwards from now, which determines the minimal optional time. + `showNow` is uesed to control whether the time "now" is displayed. `minuteStep` is used to control the step of the minute. `delay` represents the time that postponed backwards from now, which determines the minimal optional time. - Configuration of date options -```html -TimePicker - day options -``` - -```js -export default { - methods: { - showTimePicker () { - this.$createTimePicker({ - showNow: true, - minuteStep: 10, - delay: 10, - day: { - len: 5, - filter: ['Today', 'Tomorrow'], - format: 'M year d day' - }, - onSelect(selectedTime, selectedText) { - console.log(selectedTime, selectedText) - }, - onSelect: (selectedTime, selectedText) => { - this.$createDialog({ - type: 'warn', - title: `selected timestamp ${selectedTime}`, - content: `selected content ${selectedText}`, - icon: 'cubeic-alert' - }).show() - }, - onCancel: () => { - this.$createToast({ - type: 'correct', - txt: 'Clicked cancel button', - time: 1000 - }).show() - } - }).show() + ```html + TimePicker - day options + ``` + + ```js + export default { + methods: { + showTimePicker () { + this.$createTimePicker({ + showNow: true, + minuteStep: 10, + delay: 10, + day: { + len: 5, + filter: ['Today', 'Tomorrow'], + format: 'M year d day' + }, + onSelect(selectedTime, selectedText) { + console.log(selectedTime, selectedText) + }, + onSelect: (selectedTime, selectedText) => { + this.$createDialog({ + type: 'warn', + title: `selected timestamp ${selectedTime}`, + content: `selected content ${selectedText}`, + icon: 'cubeic-alert' + }).show() + }, + onCancel: () => { + this.$createToast({ + type: 'correct', + txt: 'Clicked cancel button', + time: 1000 + }).show() + } + }).show() + } } } -} -``` + ``` -`len` attribute in `day` can set the length of date displayed in the first column. + `len` attribute in `day` can set the length of date displayed in the first column. -`filter` attribute can set the text of the date displayed in the first column. + `filter` attribute can set the text of the date displayed in the first column. -`format` attribute can set the text in `M year d day` format when the `len` is greater than the length of `filter` array. + `format` attribute can set the text in `M year d day` format when the `len` is greater than the length of `filter` array. - Set time manually -```html -TimePicker - setTime(next hour) -``` - -```js -export default { - methods: { - const time = new Date().valueOf() + 1 * 60 * 60 * 1000 - showTimePicker () { - const timePicker = this.$createTimePicker({ - showNow: true, - minuteStep: 10, - delay: 15, - day: { - len: 5, - filter: ['Today', 'Tomorrow', 'The day after tomorrow'], - format: 'M year d day' - }, - onSelect: (selectedTime, selectedText) => { - this.$createDialog({ - type: 'warn', - title: `selected timestamp: ${selectedTime}`, - content: `selected content ${selectedText}`, - icon: 'cubeic-alert' - }).show() - }, - onCancel: () => { - this.$createToast({ - type: 'correct', - txt: 'Clicked cancel button', - time: 1000 - }).show() - } - }) - - timePicker.setTime(time) - timePicker.show() + ```html + TimePicker - setTime(next hour) + ``` + + ```js + export default { + methods: { + const time = new Date().valueOf() + 1 * 60 * 60 * 1000 + showTimePicker () { + const timePicker = this.$createTimePicker({ + showNow: true, + minuteStep: 10, + delay: 15, + day: { + len: 5, + filter: ['Today', 'Tomorrow', 'The day after tomorrow'], + format: 'M year d day' + }, + onSelect: (selectedTime, selectedText) => { + this.$createDialog({ + type: 'warn', + title: `selected timestamp: ${selectedTime}`, + content: `selected content ${selectedText}`, + icon: 'cubeic-alert' + }).show() + }, + onCancel: () => { + this.$createToast({ + type: 'correct', + txt: 'Clicked cancel button', + time: 1000 + }).show() + } + }) + + timePicker.setTime(time) + timePicker.show() + } } } -} -``` + ``` -`timePicker` instance exports `setTime` methos to set time manually with the time stamp as time format. When the time stamp is lower than current time stamp, `timePicker` displays current time by default. + `timePicker` instance exports `setTime` methos to set time manually with the time stamp as time format. When the time stamp is lower than current time stamp, `timePicker` displays current time by default. ### Props configuration diff --git a/document/components/docs/en-US/tip.md b/document/components/docs/en-US/tip.md index 94b788bf7cfbc1f385326bc9faf2f6a9ede51d9b..29dc60aa00805edd409ec7fead5b25aa57c314bf 100644 --- a/document/components/docs/en-US/tip.md +++ b/document/components/docs/en-US/tip.md @@ -6,82 +6,82 @@ - Basic usage -By adding `ref` to `Tip`, you can get the reference to the component and invoke `show` or `hide` methods which are exposed by `Tip` to control the show or hide state of the component. + By adding `ref` to `Tip`, you can get the reference to the component and invoke `show` or `hide` methods which are exposed by `Tip` to control the show or hide state of the component. -```html -
- -
-``` -```javascript -export default { - methods: { - showTip () { - this.$refs.tip.show() + ```html +
+ +
+ ``` + ```javascript + export default { + methods: { + showTip () { + this.$refs.tip.show() + } } } -} -``` + ``` - The position of the small triangle and the bubble box -You can configure the direction of the small triangle by `direction` and configure the position of the bubble box by `style`. Normally, the direction of the small triangle is opposite to the position of the bubble box. - -```html -

- CubeUI - -

Awesome!
- -

- -top -bottom -left -right -``` -```javascript -export default { - data() { - return { - direction: '', - tipStyle: '' - } - }, - methods: { - showTip(direction) { - this.direction = direction - this.$refs.tip.show() + You can configure the direction of the small triangle by `direction` and configure the position of the bubble box by `style`. Normally, the direction of the small triangle is opposite to the position of the bubble box. - switch (direction) { - case 'top': - this.tipStyle = 'left: 100px; top: 100px;' - break - case 'bottom': - this.tipStyle = 'left: 100px; top: 20px;' - break - case 'left': - this.tipStyle = 'left: 200px; top: 60px;' - break - case 'right': - this.tipStyle = 'left: 5px; top: 60px;' - break + ```html +

+ CubeUI + +

Awesome!
+ +

+ + top + bottom + left + right + ``` + ```javascript + export default { + data() { + return { + direction: '', + tipStyle: '' } }, - close() { - console.log('click close button') - }, - clickHandler() { - console.log('click tip area') + methods: { + showTip(direction) { + this.direction = direction + this.$refs.tip.show() + + switch (direction) { + case 'top': + this.tipStyle = 'left: 100px; top: 100px;' + break + case 'bottom': + this.tipStyle = 'left: 100px; top: 20px;' + break + case 'left': + this.tipStyle = 'left: 200px; top: 60px;' + break + case 'right': + this.tipStyle = 'left: 5px; top: 60px;' + break + } + }, + close() { + console.log('click close button') + }, + clickHandler() { + console.log('click tip area') + } } } -} -``` + ``` ### Props configuration