# 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 ```javascript // 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 ```html

Button

// mn-cols // mn-col // mn-search

// mn-section // mn-sectionnote // mn-card // mn-card-item // mn-card-prefix // mn-card-body // mn-card-suffix // mn-assistive-bar // mn-action-sheet // mn-carousel

// mn-check-item :data="option.value" v-model="models" // mn-check {{ option.label }} // mn-check-tag {{ option.label }} // mn-date-picker // mn-form // mn-helper // mn-helper-item tips // mn-icon // mn-modal // mn-image // mn-select // mn-tag // mn-turn ``` #### strawes/robotx ```html // mw-frame

// mw-table-tool // mw-crumb // mw-alert-bar //mw-table-group

// mwpageslot // mwviewslot // mwactionslot // mw-table-filter

``` **Enjoy!**