@yunzhicloud/components-lib
Version:
A Component Library for Vue.js.
629 lines (459 loc) • 15.6 kB
Markdown
> An example-less button.
| Prop name | Type | Default | Description |
| --------- | ------ | -------- | ---------------------- |
| color | string | '#333' | |
| size | string | 'normal' | `small, normal, large` |
> Button that counts how many times it was pressed and exposes a `@public` method to reset itself.
> Sets the counter to a particular value.
| Param name | Type | Description |
| ---------- | ------ | ------------------------- |
| newValue | Number | New value for the counter |
| Type | Description |
| ------ | ----------- |
| string | Test |
| Event name | Type | Description |
| ---------- | ------ | --------------------- |
| after | number | After increment event |
---
```jsx
<div>
<CounterButton ref="count"/>
<Button size="small" :onClick="() => {this.$refs.count.set(0)}">
Reset
</Button>
</div>
```
> **Deprecated** Use the [only true button component](
> A button that requires json
| Prop name | Type | Default | Description |
| --------- | ----- | ------- | ------------------------ |
| variants | array | | List of possible labels. |
---
You can `require` external files in your examples:
const names = require('./dog-names.json');
<RandomButton :variants="names" />
Another example initializing Vue
const names = require('./dog-names.json');
new Vue({
data(){
return {
list: names
}
},
template: `
<div>
<RandomButton :variants="list" />
</div>
`
})
> Button that counts how many times it was pressed and exposes a `@public` method to reset itself.
| Prop name | Type | Default | Description |
| --------- | ------ | -------- | ------------------------------------------------------- |
| type | string | 'animal' | `animal, bacon, beard, cat, city, food, nature, people` |
| width | number | 150 | |
| height | number | 150 | |
---
Another example with custom blocks inside `*.vue` files.
<Placeholder type="animal"/>
---
<Placeholder type="beard"/>
| Prop name | Type | Default | Description |
| ----------- | -------------- | ------- | -------------------------------------------------------- |
| v-model | number\|string | | |
| regExp | RegExp | null | Using for: String.prototype.replace(regexp, replacement) |
| replacement | string | '' | Using for: String.prototype.replace(regexp, replacement) |
| Event name | Type | Description |
| ---------- | --------- | ------------ |
| input | union | Input event |
| change | undefined | Change event |
| fire | string | Fire event |
---
Basic Input
```js
const setting = {
regExp: /^[0\D]*|\D*/g, // Match any character that doesn't belong to the positive integer
replacement: '',
val: '223'
}
const executeFire = function(event){
alert(event)
}
<Input
v-model="setting.val"
class="your-class-name"
:regExp="setting.regExp"
:replacement="setting.replacement"
@fire="executeFire"
></Input>
```
> The only true button.
| Prop name | Type | Default | Description |
| --------- | ------ | --------------------------------------------------------------------- | ------------------------------------------------ |
| propA | string | '#333' | |
| color | string | '#333' | The color for the button. |
| size | string | 'normal' | The size of the button<br>`small, normal, large` |
| onClick | func | event => {<br> console.log('You have clicked me!', event.target)<br>} | Gets called when the user clicks on the button |
---
You can add a custom classes to an example wrapper (` ```js { "className": "checks" } `):
```js { "className": "checks" }
<Button>I’m transparent!</Button>
```
Or disable an editor by passing a `noeditor` modifier (` ```js noeditor `):
```jsx noeditor
<Button>Push Me</Button>
```
To render an example as highlighted source code add a `static` modifier: (` ```js static `):
```js static
import Vue from "vue";
```
Fenced blocks with other languages are rendered as highlighted code:
```html
<h1>Hello world</h1>
```
---
Basic button:
```jsx
<Button>Push Me</Button>
```
Big pink button:
```jsx
<Button size="large" color="deeppink">
Click Me
</Button>
```
And you _can_ **use** `any` [Markdown](http://daringfireball.net/projects/markdown/) here.
Fenced code blocks with `vue`, `js`, `jsx` or `javascript` languages are rendered as a interactive playgrounds:
```jsx
<Button>Push Me</Button>
```
You can also use the Single File Component Format
```vue
<template>
<div>
<Button @click.native="pushButton">Push Me</Button>
<hr />
<p>Next Dog Name: {{ dogName }}</p>
</div>
</template>
<script>
const dogNames = require("dog-names").all;
// You can also use 'exports.default = {}' style module exports.
export default {
name: "ButtonExample",
data() {
return { numClicks: 0, dogName: dogNames[0] };
},
methods: {
pushButton() {
this.numClicks += 1;
this.dogName = dogNames[this.numClicks];
}
}
};
</script>
```
> Modal example [modal-component](https://vuejs.org/v2/examples/modal.html).
Author: [Vue](https://vuejs.org/v2/examples/modal.html)
| Prop name | Type | Default | Description |
| --------- | ------- | ------- | ----------- |
| showModal | boolean | false | Show modal |
| Name | Description | Bindings |
| ---- | -------------------- | -------- |
| head | Use this slot header | |
| body | Use this slot body | |
---
You can modify the code through the playground
let isOpen = false;
<div>
<button @click.prevent="isOpen = true">Open</button>
<Modal :showModal="isOpen">
<h1 slot="head">Hallo!</h1>
<div slot="body">
<button @click.prevent="isOpen = false">Close</button>
</div>
</Modal>
</div>
The variables are reactive:
let count = 1;
<button @click.prevent="count++">{{ count }}</button>
You can also develop more complex examples, instantiating Vue
const timeCountdown = 5;
new Vue({
data(){
return {
showModal: false,
countdown: timeCountdown
}
},
watch:{
showModal(value) {
if (value) {
var cycle = setInterval(()=>{
this.countdown--;
if (this.countdown === 0) {
this.showModal = false;
this.countdown = timeCountdown;
clearInterval(cycle);
}
},1000);
}
},
},
template: `
<div>
<button @click.prevent="showModal = true">Open Modal</button>
<Modal :showModal="showModal">
<h1 slot="head">Title</h1>
<div slot="body">
Countdown to close mode {{ countdown }}
</div>
</Modal>
</div>
`
})
| Prop name | Type | Default | Description |
| ----------- | -------------- | ------- | -------------------------------------------------------- |
| v-model | number\|string | | |
| regExp | RegExp | null | Using for: String.prototype.replace(regexp, replacement) |
| replacement | string | '' | Using for: String.prototype.replace(regexp, replacement) |
| Event name | Type | Description |
| ---------- | --------- | ------------ |
| input | union | Input event |
| change | undefined | Change event |
| fire | string | Fire event |
---
Basic Input
```js
const setting = {
regExp: /^[0\D]*|\D*/g, // Match any character that doesn't belong to the positive integer
replacement: '',
val: '223'
}
const executeFire = function(event){
alert(event)
}
<Input
v-model="setting.val"
class="your-class-name"
:regExp="setting.regExp"
:replacement="setting.replacement"
@fire="executeFire"
></Input>
```
> Modal example [modal-component](https://vuejs.org/v2/examples/modal.html).
Author: [Vue](https://vuejs.org/v2/examples/modal.html)
| Prop name | Type | Default | Description |
| --------- | ------- | ------- | ----------- |
| showModal | boolean | false | Show modal |
| Name | Description | Bindings |
| ---- | -------------------- | -------- |
| head | Use this slot header | |
| body | Use this slot body | |
---
You can modify the code through the playground
let isOpen = false;
<div>
<button @click.prevent="isOpen = true">Open</button>
<Modal :showModal="isOpen">
<h1 slot="head">Hallo!</h1>
<div slot="body">
<button @click.prevent="isOpen = false">Close</button>
</div>
</Modal>
</div>
The variables are reactive:
let count = 1;
<button @click.prevent="count++">{{ count }}</button>
You can also develop more complex examples, instantiating Vue
const timeCountdown = 5;
new Vue({
data(){
return {
showModal: false,
countdown: timeCountdown
}
},
watch:{
showModal(value) {
if (value) {
var cycle = setInterval(()=>{
this.countdown--;
if (this.countdown === 0) {
this.showModal = false;
this.countdown = timeCountdown;
clearInterval(cycle);
}
},1000);
}
},
},
template: `
<div>
<button @click.prevent="showModal = true">Open Modal</button>
<Modal :showModal="showModal">
<h1 slot="head">Title</h1>
<div slot="body">
Countdown to close mode {{ countdown }}
</div>
</Modal>
</div>
`
})
> Button that counts how many times it was pressed and exposes a `@public` method to reset itself.
> Sets the counter to a particular value.
| Param name | Type | Description |
| ---------- | ------ | ------------------------- |
| newValue | Number | New value for the counter |
| Type | Description |
| ------ | ----------- |
| string | Test |
| Event name | Type | Description |
| ---------- | ------ | --------------------- |
| after | number | After increment event |
---
```jsx
<div>
<CounterButton ref="count"/>
<Button size="small" :onClick="() => {this.$refs.count.set(0)}">
Reset
</Button>
</div>
```
> The only true button.
| Prop name | Type | Default | Description |
| --------- | ------ | --------------------------------------------------------------------- | ------------------------------------------------ |
| propA | string | '#333' | |
| color | string | '#333' | The color for the button. |
| size | string | 'normal' | The size of the button<br>`small, normal, large` |
| onClick | func | event => {<br> console.log('You have clicked me!', event.target)<br>} | Gets called when the user clicks on the button |
---
You can add a custom classes to an example wrapper (` ```js { "className": "checks" } `):
```js { "className": "checks" }
<Button>I’m transparent!</Button>
```
Or disable an editor by passing a `noeditor` modifier (` ```js noeditor `):
```jsx noeditor
<Button>Push Me</Button>
```
To render an example as highlighted source code add a `static` modifier: (` ```js static `):
```js static
import Vue from "vue";
```
Fenced blocks with other languages are rendered as highlighted code:
```html
<h1>Hello world</h1>
```
---
Basic button:
```jsx
<Button>Push Me</Button>
```
Big pink button:
```jsx
<Button size="large" color="deeppink">
Click Me
</Button>
```
And you _can_ **use** `any` [Markdown](http://daringfireball.net/projects/markdown/) here.
Fenced code blocks with `vue`, `js`, `jsx` or `javascript` languages are rendered as a interactive playgrounds:
```jsx
<Button>Push Me</Button>
```
You can also use the Single File Component Format
```vue
<template>
<div>
<Button @click.native="pushButton">Push Me</Button>
<hr />
<p>Next Dog Name: {{ dogName }}</p>
</div>
</template>
<script>
const dogNames = require("dog-names").all;
// You can also use 'exports.default = {}' style module exports.
export default {
name: "ButtonExample",
data() {
return { numClicks: 0, dogName: dogNames[0] };
},
methods: {
pushButton() {
this.numClicks += 1;
this.dogName = dogNames[this.numClicks];
}
}
};
</script>
```
> **Deprecated** Use the [only true button component](
> A button that requires json
| Prop name | Type | Default | Description |
| --------- | ----- | ------- | ------------------------ |
| variants | array | | List of possible labels. |
---
You can `require` external files in your examples:
const names = require('./dog-names.json');
<RandomButton :variants="names" />
Another example initializing Vue
const names = require('./dog-names.json');
new Vue({
data(){
return {
list: names
}
},
template: `
<div>
<RandomButton :variants="list" />
</div>
`
})
> Button that counts how many times it was pressed and exposes a `@public` method to reset itself.
| Prop name | Type | Default | Description |
| --------- | ------ | -------- | ------------------------------------------------------- |
| type | string | 'animal' | `animal, bacon, beard, cat, city, food, nature, people` |
| width | number | 150 | |
| height | number | 150 | |
---
Another example with custom blocks inside `*.vue` files.
<Placeholder type="animal"/>
---
<Placeholder type="beard"/>