noumena-ui
v4.0.16
Published
Noumena ui vue component
Downloads
57
Keywords
Readme
noumena-ui
Noumena ui vue component
黑夜模式临时方案
使用css变量,需要外部提供
解决css单独打包,外部可选引入index.scss/var.scss
usage
npm i -S noumena-ui
fully import:
import NoumenaUi from 'noumena-ui';
import { zhLang } from 'noumena-ui/lib/locale-zh';
import { enLang } from 'noumena-ui/lib/locale-en';
import 'noumena-ui/lib/theme/index.css';
Vue.use(NoumenaUi, { // en as default
getLang: () => i18n.locale === 'en' ? enLang : zhLang;
});
import on demand:
import { button } from 'noumena-ui';
import LangEn from 'noumena-ui/lib/locale-en';
Vue.use(button[, 'component-name']);
Vue.use(LangEn);
// babel.config.js / .babelrc.json
plugins: [
[
'component',
{
libraryName: 'noumena-ui',
styleLibrary: {
base: false,
name: 'theme'
}
}
]
]
components
nou-button
import { button } from 'noumena-ui';
Vue.use(button);
<nou-button>
<i class="iconfont icon-name"></i>
<span>a button</span>
</nou-button>
custom-input(incomplete)
import { CustomInput } from 'noumena-ui';
Vue.use(CustomInput)
<nou-custom-input v-model="value" />
nou-date-range
<nou-date-range v-model="date" />
props:
placeholder
limitDays-Number-select duration limit
maxUseEndTime-Boolean-use last second of end date
nou-dialog
<nou-dialog v-if="dialogShowing" title="TITLE" @close="dialogShowing=false">
<div>Contain</div>
</nou-dialog>
props:
closeOnClickModal-Boolean(false)
dialogClass-Object-contain box dom class obj
showClose-Boolean(true)-show close icon
long-Boolean(false)-scroll view container
nou-form
<nou-form ref="formDom" :rules="formRules">
<nou-form-item check="name">
<nou-input v-model="form.name"></nou-input>
</nou-form-item>
<nou-form-item check="password">
<nou-input v-model="form.password" type="password"></nou-input>
</nou-form-item>
<nou-form-item check="password_sec">
<nou-input v-model="form.password_sec" type="password"></nou-input>
</nou-form-item>
</nou-form>
formRules: {
name: 'please enter name', // pass a string as require and error msg
password: {
require: 'please enter password',
limit: [6, 32, 'please enter 6-32 characters'], // length limit
},
password_sec: {
require: 'please enter again',
validate: () => { // custom check,return error msg
if (this.form.password !== this.form.password_sec) {
return 'please enter same password';
}
return '';
},
},
},
nou-input
<nou-input v-model="name" placeholder="please enter name" />
nou-label-button
<nou-label-button>text button</nou-label-button>
props:
disable-Boolean(false)
type-String('normal')-normal|danger
nou-layout
<nou-layout :active-menu="selected" :menus="items" logo-class="iconLOGO">
<Header slot="header" />
<AppMain />
</nou-layout>
nou-loading
<nou-loading color="green" :stroke="10"></nou-loading>
props:
color-String('#000')
stroke-Number(6)
nou-menu
nou-nav
nou-next
<nou-next></nou-next>
<nou-next disable></nou-next>
<nou-next success></nou-next>
nou-pager
<nou-pager v-model="currentPage" :size="10" :total="100" @change="getList"/>
nou-select
<nou-select v-model="selected" placeholder="please select" :options="options"/>
nou-tab
<nou-tab v-model="selectedTab" :tabs="tabs"></nou-tab>
nou-table
<nou-table :data="tableData">
<nou-table-col prop="a" label="a"></nou-table-col>
<nou-table-col prop="b" label="b"></nou-table-col>
<nou-table-col prop="c" label="c"></nou-table-col>
<nou-table-col prop="d" label="d"></nou-table-col>
</nou-table>
props:
loading-Boolean
sideDecorateWidth-Number-left/right empty col width
minWidth-String-table min-width
nou-toast
showToast() {
this.$toast('toast contain');
}
showUniqueToast() {
this.$toast('only one toast same time', 'toast id');
}
todo
- [] complete demo and components of readme
- [] fix eslint: import/resolver, log in console
- [] handle border-box;split padding and width;
- [] remove style scoped
- [] 主题方案
- [] css后编译
- [] iconfont、字体 内置?
tips
only form item use border-box no font file provide