humanui-snippets
Requirements
vetur, vue-human or strawes
There are Snippets from vue-human
Vue
| Snippet |
Purpose |
vhbase |
Single file component base for human |
JavaScript
| Snippet |
Generate code |
impst |
import suites from 'vue-human/suites/suite |
imputl |
import fn from 'vue-human/utils/fn |
impicon |
import icon from 'vue-human-icons/js/ios/icon |
impinput |
import input from 'vue-human/suites/input' |
impsearch |
import searchBar from 'vue-human/suites/searchBar' |
impbtn |
import button from 'vue-human/suites/button' |
impassistivebar |
import assistiveBar from 'vue-human/suites/assistiveBar'' |
impactionsheet |
import actionSheet from 'vue-human/suites/actionSheet' |
impalert |
import Alert from 'vue-human/utils/Alert' |
impcarousel |
import carousel from 'vue-human/suites/carousel' |
impcheck |
import check from 'vue-human/suites/check' |
imptextarea |
import textarea from 'vue-human/suites/textarea' |
| ... |
... |
utils
// mnalertshow + tab
Alert.create({
title: '警告'
}).show()
// mnmsgshow + tab
Message.create({
message: 'message',
theme: 'primary',
duration: 3000
}).show()
// mnconfirmshow + tab
Confirm.create({}).show()
// mndateshow + tab
Datetime.create({
default: this.models.time,
showDate: false
}).show().on('confirm', time => {
this.models.time = time
})
// mnloadmaskshow + tab
LoadingMask.create().show()
template
tips: the same as emmet
<!-- mn-input + tab-->
<mn-input v-model="data" placeholder=""></mn-input>
<!-- mn-btn -->
<mn-btn theme="primary" size="sm" @click="">Button</mn-btn>
<!-- mn-textarea -->
<mn-textarea rows="3"
v-model="data"
placeholder=""
></mn-textarea>
// mn-cols
<mn-columns>
</mn-columns>
// mn-col
<mn-column desktop="6">
</mn-column>
// mn-search
<mn-search-bar>
<mn-input v-model="data" placeholder=""></mn-input>
</mn-search-bar>
// mn-section
<mn-section>
</mn-section>
// mn-sectionnote
<mn-section-note>
</mn-section-note>
// mn-card
// mn-card-item
// mn-card-prefix
// mn-card-body
// mn-card-suffix
// mn-assistive-bar
<mn-assistive-bar slot="footer" :show.sync="showSidebar"></mn-assistive-bar>
// mn-action-sheet
<mn-action-sheet :visible.sync="showActionSheet">
</mn-action-sheet>
// mn-carousel
<mn-carousel ref="carousel">
<mn-carousel-item v-for="item in pictures" :key="item">
<img :src="item.src" style="width: 100%; display: block;">
</mn-carousel-item>
</mn-carousel>
// mn-check-item
<mn-check-item
v-for="(option, index) in likeOptions" :key="index">
:data="option.value"
v-model="models"
<mn-check-item>
// mn-check
<mn-check
v-for="(option, index) in likeOptions"
:data="option.value"
v-model="models"
:key="index">{{ option.label }}
</mn-check>
// mn-check-tag
<mn-check-tag
v-for="(option, index) in likeOptions"
:data="option.value"
v-model="models"
:key="index">{{ option.label }}
</mn-check-tag>
// mn-date-picker
<mn-datetime-picker :display="models" @openPicker="onOpenPicker"></mn-datetime-picker>
// mn-form
<mn-form :validate="$v" @success="success" >
</mn-form>
// mn-helper
<mn-helper :validate="$v">
</mn-helper>
// mn-helper-item
<mn-helper-item :name="required">
tips
</mn-helper-item>
// mn-icon
<mn-icon :name="icons.contact" :loading="false"></mn-icon>
// mn-modal
<mn-modal :visible.sync="showModal">
</mn-modal>
// mn-image
<mn-image
:ratio="1"
source="source"
thumb="thumb">
</mn-image>
// mn-select
<mn-select :options="Options" v-model="models.data"></mn-select>
// mn-tag
<mn-tag name="green"></mn-tag>
// mn-turn
<mn-turn data="data" v-model="models"></mn-turn>
strawes/robotx
// mw-frame
<mw-frame :showMobileSide.sync="showMobileSide">
<mw-brand slot="brand">
</mw-brand>
<mw-navigation slot="navigation">
<mw-menu :list="localMenu"></mw-menu>
</mw-navigation>
<div slot="information">
<mw-profile label="displayname"></mw-profile>
</div>
<router-view slot="contents"></router-view>
<mn-assistive-bar slot="footer" :show.sync="showMobileSide"></mn-assistive-bar>
</mw-frame>
// mw-table-tool
<mw-table-tool>
</mw-table-tool>
// mw-crumb
<mw-crumb></mw-crumb>
// mw-alert-bar
<mw-alert-bar></mw-alert-bar>
//mw-table-group
<mw-table-group>
<template slot="action"></template>
<mw-table
:items=""
:columns="cols"
>
</mw-table>
</mw-table-group>
// mwpageslot
<template slot="paginate">
<mw-paginate :totalPages="totalPages" :currentPage="models.page"></mw-paginate>
</template>
// mwviewslot
<template slot="view">
<mw-limit :limit="models.size" limitName="size" :limitOptions="[10, 20, 50]"></mw-limit>
</template>
// mwactionslot
<template slot="action">
</template>
// mw-table-filter
<mw-table-filter>
<mw-table-filter>
Enjoy!
| |
