├── .eslintignore ├── .eslintrc ├── .github ├── CONTRIBUTING.md ├── ISSUE_TEMPLATE.md └── PULL_REQUEST_TEMPLATE.md ├── .gitignore ├── .npmrc ├── .stylelintrc ├── CHANGELOG.md ├── LICENSE ├── README.md ├── babel.config.js ├── components ├── _util │ └── fmtEvent.ts ├── am-checkbox │ ├── index.axml │ ├── index.json │ ├── index.less │ ├── index.md │ └── index.ts ├── am-icon │ ├── index.axml │ ├── index.json │ ├── index.less │ ├── index.md │ └── index.ts ├── amount-input │ ├── index.axml │ ├── index.json │ ├── index.less │ ├── index.md │ └── index.ts ├── badge │ ├── index.axml │ ├── index.json │ ├── index.less │ ├── index.md │ └── index.ts ├── calendar │ ├── index.axml │ ├── index.json │ ├── index.less │ ├── index.md │ └── index.ts ├── card │ ├── index.axml │ ├── index.json │ ├── index.less │ ├── index.md │ └── index.ts ├── collapse │ ├── collapse-item │ │ ├── index.axml │ │ ├── index.json │ │ ├── index.less │ │ └── index.ts │ ├── index.axml │ ├── index.json │ ├── index.md │ └── index.ts ├── face-detection │ ├── index.axml │ ├── index.json │ ├── index.md │ └── index.ts ├── filter │ ├── filter-item │ │ ├── index.axml │ │ ├── index.json │ │ ├── index.less │ │ └── index.ts │ ├── index.axml │ ├── index.json │ ├── index.less │ ├── index.md │ ├── index.ts │ └── mixins │ │ └── lifecycle.ts ├── flex │ ├── flex-item │ │ ├── index.axml │ │ ├── index.json │ │ ├── index.less │ │ └── index.ts │ ├── index.axml │ ├── index.json │ ├── index.less │ ├── index.md │ ├── index.sjs │ └── index.ts ├── footer │ ├── index.axml │ ├── index.json │ ├── index.less │ ├── index.md │ └── index.ts ├── grid │ ├── index.axml │ ├── index.json │ ├── index.less │ ├── index.md │ └── index.ts ├── input-item │ ├── index.axml │ ├── index.json │ ├── index.less │ ├── index.md │ └── index.ts ├── list │ ├── index.axml │ ├── index.json │ ├── index.less │ ├── index.md │ ├── index.ts │ └── list-item │ │ ├── index.axml │ │ ├── index.json │ │ ├── index.less │ │ └── index.ts ├── message │ ├── index.axml │ ├── index.json │ ├── index.less │ ├── index.md │ └── index.ts ├── modal │ ├── index.axml │ ├── index.json │ ├── index.less │ ├── index.md │ └── index.ts ├── notice │ ├── index.axml │ ├── index.json │ ├── index.less │ ├── index.md │ └── index.ts ├── page-result │ ├── index.axml │ ├── index.json │ ├── index.less │ ├── index.md │ └── index.ts ├── pagination │ ├── index.axml │ ├── index.json │ ├── index.less │ ├── index.md │ ├── index.sjs │ └── index.ts ├── picker-item │ ├── index.axml │ ├── index.json │ ├── index.less │ ├── index.md │ └── index.ts ├── popover │ ├── index.axml │ ├── index.json │ ├── index.less │ ├── index.md │ ├── index.ts │ └── popover-item │ │ ├── index.axml │ │ ├── index.json │ │ ├── index.less │ │ └── index.ts ├── popup │ ├── index.axml │ ├── index.json │ ├── index.less │ ├── index.md │ └── index.ts ├── search-bar │ ├── index.axml │ ├── index.json │ ├── index.less │ ├── index.md │ └── index.ts ├── stepper │ ├── index.axml │ ├── index.json │ ├── index.less │ ├── index.md │ └── index.ts ├── steps │ ├── index.axml │ ├── index.json │ ├── index.less │ ├── index.md │ └── index.ts ├── style │ ├── mixins │ │ └── hairline.less │ └── themes │ │ └── default.less ├── swipe-action │ ├── index.axml │ ├── index.json │ ├── index.less │ ├── index.md │ └── index.ts ├── tabs │ ├── index.axml │ ├── index.json │ ├── index.less │ ├── index.md │ ├── index.ts │ ├── tab-content │ │ ├── index.axml │ │ ├── index.json │ │ ├── index.less │ │ └── index.ts │ └── util.sjs ├── tips │ ├── index.md │ ├── tips-dialog │ │ ├── index.axml │ │ ├── index.json │ │ ├── index.less │ │ └── index.ts │ └── tips-plain │ │ ├── index.axml │ │ ├── index.json │ │ ├── index.less │ │ └── index.ts └── vtabs │ ├── index.axml │ ├── index.json │ ├── index.less │ ├── index.md │ ├── index.ts │ └── vtab-content │ ├── index.axml │ ├── index.json │ └── index.ts ├── examples ├── app.acss ├── app.js ├── app.json └── pages │ ├── am-checkbox │ ├── index.acss │ ├── index.axml │ ├── index.js │ └── index.json │ ├── am-icon │ ├── index.acss │ ├── index.axml │ ├── index.js │ └── index.json │ ├── amount-input │ ├── index.acss │ ├── index.axml │ ├── index.js │ └── index.json │ ├── badge │ ├── index.acss │ ├── index.axml │ ├── index.js │ └── index.json │ ├── calendar │ ├── index.acss │ ├── index.axml │ ├── index.js │ └── index.json │ ├── card │ ├── index.acss │ ├── index.axml │ ├── index.js │ └── index.json │ ├── collapse │ ├── index.acss │ ├── index.axml │ ├── index.js │ └── index.json │ ├── face-detection │ ├── index.acss │ ├── index.axml │ ├── index.js │ └── index.json │ ├── filter │ ├── alternative │ │ ├── index.acss │ │ ├── index.axml │ │ ├── index.js │ │ └── index.json │ ├── index.acss │ ├── index.axml │ ├── index.js │ ├── index.json │ └── single │ │ ├── index.acss │ │ ├── index.axml │ │ ├── index.js │ │ └── index.json │ ├── flex │ ├── index.acss │ ├── index.axml │ ├── index.js │ └── index.json │ ├── footer │ ├── index.acss │ ├── index.axml │ ├── index.js │ └── index.json │ ├── grid │ ├── 2 │ │ ├── index.acss │ │ ├── index.axml │ │ ├── index.js │ │ └── index.json │ ├── 3 │ │ ├── index.acss │ │ ├── index.axml │ │ ├── index.js │ │ └── index.json │ ├── 4 │ │ ├── index.acss │ │ ├── index.axml │ │ ├── index.js │ │ └── index.json │ ├── 5 │ │ ├── index.acss │ │ ├── index.axml │ │ ├── index.js │ │ └── index.json │ ├── index.acss │ ├── index.axml │ ├── index.js │ └── index.json │ ├── input-item │ ├── index.acss │ ├── index.axml │ ├── index.js │ └── index.json │ ├── list │ ├── app.acss │ ├── app.axml │ ├── app.js │ ├── app.json │ ├── index.acss │ ├── index.axml │ ├── index.js │ └── index.json │ ├── message │ ├── fail │ │ ├── index.acss │ │ ├── index.axml │ │ ├── index.js │ │ └── index.json │ ├── index.acss │ ├── index.axml │ ├── index.js │ ├── index.json │ ├── info │ │ ├── index.acss │ │ ├── index.axml │ │ ├── index.js │ │ └── index.json │ ├── success │ │ ├── index.acss │ │ ├── index.axml │ │ ├── index.js │ │ └── index.json │ ├── waiting │ │ ├── index.acss │ │ ├── index.axml │ │ ├── index.js │ │ └── index.json │ └── warn │ │ ├── index.acss │ │ ├── index.axml │ │ ├── index.js │ │ └── index.json │ ├── modal │ ├── index.acss │ ├── index.axml │ ├── index.js │ └── index.json │ ├── notice │ ├── index.acss │ ├── index.axml │ ├── index.js │ └── index.json │ ├── page-result │ ├── busy │ │ ├── index.acss │ │ ├── index.axml │ │ ├── index.js │ │ └── index.json │ ├── empty │ │ ├── index.acss │ │ ├── index.axml │ │ ├── index.js │ │ └── index.json │ ├── error │ │ ├── index.acss │ │ ├── index.axml │ │ ├── index.js │ │ └── index.json │ ├── index.acss │ ├── index.axml │ ├── index.js │ ├── index.json │ ├── local-busy │ │ ├── index.acss │ │ ├── index.axml │ │ ├── index.js │ │ └── index.json │ ├── local-empty │ │ ├── index.acss │ │ ├── index.axml │ │ ├── index.js │ │ └── index.json │ ├── local-error │ │ ├── index.acss │ │ ├── index.axml │ │ ├── index.js │ │ └── index.json │ ├── local-logoff │ │ ├── index.acss │ │ ├── index.axml │ │ ├── index.js │ │ └── index.json │ ├── local-network │ │ ├── index.acss │ │ ├── index.axml │ │ ├── index.js │ │ └── index.json │ ├── log-off │ │ ├── index.acss │ │ ├── index.axml │ │ ├── index.js │ │ └── index.json │ └── network │ │ ├── index.acss │ │ ├── index.axml │ │ ├── index.js │ │ └── index.json │ ├── pagination │ ├── index.acss │ ├── index.axml │ ├── index.js │ └── index.json │ ├── picker-item │ ├── index.acss │ ├── index.axml │ ├── index.js │ └── index.json │ ├── popover │ ├── index.acss │ ├── index.axml │ ├── index.js │ └── index.json │ ├── popup │ ├── index.acss │ ├── index.axml │ ├── index.js │ └── index.json │ ├── search-bar │ ├── index.acss │ ├── index.axml │ ├── index.js │ └── index.json │ ├── stepper │ ├── index.acss │ ├── index.axml │ ├── index.js │ └── index.json │ ├── steps │ ├── index.acss │ ├── index.axml │ ├── index.js │ └── index.json │ ├── swipe-action │ ├── index.acss │ ├── index.axml │ ├── index.js │ └── index.json │ ├── tabs │ ├── index.acss │ ├── index.axml │ ├── index.js │ └── index.json │ ├── tips │ ├── 1 │ │ ├── index.acss │ │ ├── index.axml │ │ ├── index.js │ │ └── index.json │ ├── 2 │ │ ├── index.acss │ │ ├── index.axml │ │ ├── index.js │ │ └── index.json │ ├── index.acss │ ├── index.axml │ ├── index.js │ └── index.json │ └── vtabs │ ├── index.acss │ ├── index.axml │ ├── index.js │ └── index.json ├── package.json ├── scripts ├── compiler.js └── pub.js ├── tsconfig.json └── yarn.lock /.eslintignore: -------------------------------------------------------------------------------- 1 | types/**/*.ts 2 | es/**/*.js 3 | examples/es/**/*.js -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "eslint-config-ali", 3 | "globals": { 4 | "my": true, 5 | "App": true, 6 | "Component": true, 7 | "Page": true 8 | }, 9 | "parser": "typescript-eslint-parser", 10 | "plugins": [ 11 | "typescript" 12 | ], 13 | "rules": { 14 | "typescript/class-name-casing": "error", 15 | "typescript/type-annotation-spacing": "error" 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | Do you want to request a feature or report a bug? 2 | 3 | What is the current behavior? 4 | 5 | If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. Your bug will get fixed much faster if we can run your code. 6 | 7 | What is the expected behavior? 8 | 9 | Which versions of ``mini-antui``, and which version of ``Alipay`` are affected by this issue? Did this work in previous versions of ``mini-antui``? -------------------------------------------------------------------------------- /.github/PULL_REQUEST_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | First of all, thank you for your contribution! :-) 2 | 3 | Please makes sure that these checkboxes are checked before submitting your PR, thank you! 4 | 5 | * [ ] Rebase before creating a PR to keep commit history clear. 6 | * [ ] Add some descriptions and refer relative issues for you PR. 7 | 8 | Extra checklist: 9 | 10 | **if** *isNewFeature* **:** 11 | 12 | * [ ] Update API docs for the component. 13 | * [ ] Update/Add demo to demonstrate new feature. 14 | * [ ] Update TypeScript definition for the component. 15 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | *.iml 2 | *.log 3 | .idea 4 | .entry 5 | .ipr 6 | .iws 7 | *~ 8 | ~* 9 | *.diff 10 | *.patch 11 | *.bak 12 | .DS_Store 13 | package-lock.json 14 | Thumbs.db 15 | .project 16 | .*proj 17 | .svn 18 | *.swp 19 | *.swo 20 | *.pyc 21 | *.pyo 22 | node_modules 23 | .cache 24 | .vscode 25 | *.xcworkspace 26 | .tea 27 | .entry 28 | /build/ 29 | /lib/ 30 | /es/ 31 | /examples/es/ 32 | -------------------------------------------------------------------------------- /.npmrc: -------------------------------------------------------------------------------- 1 | package-lock=false -------------------------------------------------------------------------------- /.stylelintrc: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "stylelint-config-standard", 3 | "rules": { 4 | at-rule-empty-line-before: null, 5 | at-rule-name-space-after: null, 6 | at-rule-no-unknown: null, 7 | comment-empty-line-before: null, 8 | declaration-bang-space-before: null, 9 | declaration-empty-line-before: null, 10 | function-comma-newline-after: null, 11 | function-name-case: null, 12 | function-parentheses-newline-inside: null, 13 | function-max-empty-lines: null, 14 | function-whitespace-after: null, 15 | indentation: null, 16 | number-leading-zero: null, 17 | number-no-trailing-zeros: null, 18 | rule-empty-line-before: null, 19 | selector-combinator-space-after: null, 20 | selector-list-comma-newline-after: null, 21 | selector-pseudo-element-colon-notation: null, 22 | unit-no-unknown: null, 23 | value-list-max-empty-lines: null, 24 | unit-case: null, 25 | color-hex-case: null, 26 | } 27 | } -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT LICENSE 2 | 3 | Copyright (c) 2018-present Alipay.com, https://www.alipay.com/ 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining 6 | a copy of this software and associated documentation files (the 7 | "Software"), to deal in the Software without restriction, including 8 | without limitation the rights to use, copy, modify, merge, publish, 9 | distribute, sublicense, and/or sell copies of the Software, and to 10 | permit persons to whom the Software is furnished to do so, subject to 11 | the following conditions: 12 | 13 | The above copyright notice and this permission notice shall be 14 | included in all copies or substantial portions of the Software. 15 | 16 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 17 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF 18 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND 19 | NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE 20 | LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION 21 | OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION 22 | WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 23 | -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | [ 4 | '@babel/preset-env', 5 | { 6 | loose: true, 7 | modules: false, 8 | }, 9 | ], 10 | '@babel/preset-typescript', 11 | ], 12 | plugins: ['@babel/plugin-syntax-dynamic-import'], 13 | }; 14 | -------------------------------------------------------------------------------- /components/_util/fmtEvent.ts: -------------------------------------------------------------------------------- 1 | export default function fmtEvent(props, e) { 2 | const dataset = {}; 3 | for (const key in props) { 4 | if ((/data-/gi).test(key)) { 5 | dataset[key.replace(/data-/gi, '')] = props[key]; 6 | } 7 | } 8 | return Object.assign({}, e, { 9 | currentTarget: { dataset }, 10 | target: { dataset, targetDataset: dataset }, 11 | }); 12 | } 13 | -------------------------------------------------------------------------------- /components/am-checkbox/index.axml: -------------------------------------------------------------------------------- 1 | 2 | 10 | 11 | -------------------------------------------------------------------------------- /components/am-checkbox/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "component": true 3 | } -------------------------------------------------------------------------------- /components/am-checkbox/index.less: -------------------------------------------------------------------------------- 1 | @import "../style/themes/default.less"; 2 | 3 | .am-checkbox { 4 | position: relative; 5 | height: 22px; 6 | width: 22px; 7 | display: inline-block; 8 | 9 | &-value { 10 | position: absolute; 11 | z-index: 1; 12 | border-radius: 50%; 13 | opacity: 0; 14 | } 15 | } 16 | 17 | .am-checkbox-synthetic { 18 | position: absolute; 19 | z-index: 2; 20 | pointer-events: none; 21 | top: 0; 22 | left: 0; 23 | border-radius: 50%; 24 | height: 100%; 25 | width: 100%; 26 | } 27 | 28 | .am-checkbox-synthetic::before { 29 | position: absolute; 30 | left: 0; 31 | top: 0; 32 | height: 200%; 33 | width: 200%; 34 | display: block; 35 | box-sizing: border-box; 36 | border-radius: 50%; 37 | content: ''; 38 | transform-origin: 0 0; 39 | transform: scale(0.5); 40 | border: 1px solid #c9c9c9; 41 | } 42 | 43 | .am-checkbox-value.a-checkbox-checked + .am-checkbox-synthetic::before { 44 | background-color: #108ee9; 45 | border-color: #108ee9; 46 | border-width: 0; 47 | } 48 | 49 | .am-checkbox-value.a-checkbox-checked + .am-checkbox-synthetic::after { 50 | position: absolute; 51 | display: block; 52 | z-index: 999; 53 | content: ''; 54 | top: 4px; 55 | right: 8px; 56 | width: 5px; 57 | height: 10px; 58 | border: 2px solid #fff; 59 | border-width: 0 1px 1px 0; 60 | transform: rotate(45deg); 61 | } 62 | 63 | .am-checkbox-value.a-checkbox-disabled + .am-checkbox-synthetic::before { 64 | border: 1px solid #ccc; 65 | background-color: #e1e1e1; 66 | } 67 | 68 | .am-checkbox-value.a-checkbox-disabled + .am-checkbox-synthetic::after { 69 | border-color: #adadad; 70 | } -------------------------------------------------------------------------------- /components/am-checkbox/index.ts: -------------------------------------------------------------------------------- 1 | import fmtEvent from '../_util/fmtEvent'; 2 | 3 | Component({ 4 | props: { 5 | value: '', 6 | checked: false, 7 | disabled: false, 8 | onChange: () => {}, 9 | id: '', 10 | }, 11 | methods: { 12 | onChange(e) { 13 | const event = fmtEvent(this.props, e); 14 | this.props.onChange(event); 15 | }, 16 | }, 17 | }); 18 | -------------------------------------------------------------------------------- /components/am-icon/index.axml: -------------------------------------------------------------------------------- 1 | 5 | -------------------------------------------------------------------------------- /components/am-icon/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "component": true 3 | } -------------------------------------------------------------------------------- /components/am-icon/index.md: -------------------------------------------------------------------------------- 1 | # AMIcon 2 | 3 | 图标。 4 | 5 | 扫码体验： 6 | 7 | 8 | 9 | | 属性名 | 描述 | 类型 | 默认值 | 必选 | 10 | | ---- | ---- | ---- | ---- | ---- | 11 | | type | icon类型 | String | | true | 12 | | size | icon 大小，单位px | String | | false | 13 | | color | icon 颜色，同css的color | String | | false | 14 | 15 | 16 | | 图标风格 | type有效值 | 17 | | ---- | ---- | 18 | | 基础类型 | `arrow-left`、 `arrow-up`、 `arrow-right`、 `arrow-down`、`cross`、`plus` | 19 | | 描边风格 | `close-o`、`dislike-o`、`heart-o`、`help-o`、`like-o`、`location-o`、`info-o`、`success-o`、`wait-o`、`warning-o`、`star-o`、`download`、`friends`、`circle`、`delete`、`charge`、`card`、`notice`、`qrcode`、`reload`、`scan`、`money`、`search`、`setting`、`share`、`zoom-in`、`zoom-out` | 20 | | 实心风格 | `close`、`dislike`、`heart`、`help`、`like`、`location`、`info`、`success`、`wait`、`warning`、`star` | 21 | 22 | ## 示例 23 | 24 | ```json 25 | { 26 | "defaultTitle": "小程序AntUI组件库", 27 | "usingComponents": { 28 | "am-icon": "mini-antui/es/am-icon/index", 29 | } 30 | } 31 | ``` 32 | 33 | ```html 34 | 35 | 36 | 37 | ``` -------------------------------------------------------------------------------- /components/am-icon/index.ts: -------------------------------------------------------------------------------- 1 | Component({ 2 | props: { 3 | type: '', 4 | size: 23, 5 | color: '#333', 6 | className: '', 7 | ariaHidden: undefined, 8 | }, 9 | }); 10 | -------------------------------------------------------------------------------- /components/amount-input/index.axml: -------------------------------------------------------------------------------- 1 | 2 | {{title}} 3 | 4 | 5 | ¥ 6 | {{placeholder}} 7 | 8 | 19 | 20 | 21 | 22 | 23 | 24 | {{extra}} 25 | {{btnText}} 26 | 27 | -------------------------------------------------------------------------------- /components/amount-input/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "component": true 3 | } -------------------------------------------------------------------------------- /components/amount-input/index.ts: -------------------------------------------------------------------------------- 1 | import fmtEvent from '../_util/fmtEvent'; 2 | 3 | Component({ 4 | props: { 5 | type: 'number', 6 | className: '', 7 | focus: false, 8 | placeholder: '', 9 | value: '', 10 | controlled: false, 11 | }, 12 | data: { 13 | _focus: false, 14 | }, 15 | methods: { 16 | onInput(e) { 17 | const event = fmtEvent(this.props, e); 18 | if (this.props.onInput) { 19 | this.props.onInput(event); 20 | } 21 | }, 22 | onConfirm(e) { 23 | const event = fmtEvent(this.props, e); 24 | if (this.props.onConfirm) { 25 | this.props.onConfirm(event); 26 | } 27 | }, 28 | onButtonClick() { 29 | if (this.onButtonClick) { 30 | this.props.onButtonClick(); 31 | } 32 | }, 33 | onFocus(e) { 34 | this.setData({ 35 | _focus: true, 36 | }); 37 | const event = fmtEvent(this.props, e); 38 | if (this.props.onFocus) { 39 | this.props.onFocus(event); 40 | } 41 | }, 42 | onBlur(e) { 43 | this.setData({ 44 | _focus: false, 45 | }); 46 | const event = fmtEvent(this.props, e); 47 | if (this.props.onBlur) { 48 | this.props.onBlur(event); 49 | } 50 | }, 51 | onClearTap() { 52 | if (this.props.onClear) { 53 | this.props.onClear(''); 54 | } 55 | }, 56 | }, 57 | }); 58 | -------------------------------------------------------------------------------- /components/badge/index.axml: -------------------------------------------------------------------------------- 1 | 2 | 6 | {{typeof text === 'number' && text > overflowCount ? overflowCount + '+' : text }} 7 | {{typeof text === 'number' && text > overflowCount ? overflowCount + '+' : text }} 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /components/badge/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "component": true 3 | } -------------------------------------------------------------------------------- /components/badge/index.less: -------------------------------------------------------------------------------- 1 | @import '../style/themes/default.less'; 2 | 3 | .am-badge { 4 | display: inline-block; 5 | position: relative; 6 | vertical-align: middle; 7 | line-height: 1; 8 | 9 | &-text { 10 | display: inline-block; 11 | position: absolute; 12 | right: 0; 13 | transform: translate(50%, -50%); 14 | top: 0; 15 | min-width: 16px; 16 | padding: 0; 17 | height: 16px; 18 | text-align: center; 19 | background-color: @brand-error; 20 | border-radius: 16px; 21 | color: #fff; 22 | 23 | &-padding { 24 | font-size: 10px; 25 | opacity: 0; 26 | } 27 | 28 | &-inner { 29 | position: absolute; 30 | top: 50%; 31 | left: 50%; 32 | font-size: 20px; 33 | transform: translate(-50%, -50%) scale(0.5); 34 | white-space: nowrap; 35 | } 36 | 37 | &.am-badge-double { 38 | padding: 0 4px; 39 | } 40 | } 41 | 42 | &-not-a-wrapper .am-badge-text { 43 | position: relative; 44 | top: auto; 45 | right: auto; 46 | transform: translateX(0); 47 | } 48 | 49 | &-text.is-dot { 50 | padding: 0; 51 | width: 10px; 52 | min-width: 10px; 53 | height: 10px; 54 | } 55 | } 56 | -------------------------------------------------------------------------------- /components/badge/index.ts: -------------------------------------------------------------------------------- 1 | Component({ 2 | props: { 3 | className: '', 4 | overflowCount: 99, 5 | text: '', 6 | dot: false, 7 | }, 8 | }); 9 | -------------------------------------------------------------------------------- /components/calendar/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "component": true 3 | } 4 | -------------------------------------------------------------------------------- /components/calendar/index.md: -------------------------------------------------------------------------------- 1 | # Calendar 日历 2 | 3 | 日历。 4 | 5 | 扫码体验： 6 | 7 | 8 | 9 | 10 | | 属性名 | 描述 | 类型 | 默认值 | 必选 | 11 | | ---- | ---- | ---- | ---- | ---- | 12 | | type | 选择类型 `single`: 单日 `range`: 日期区间 | String | single | false 13 | | haveYear | 是否展示年份控制箭头 | Boolean | false | false 14 | | tagData | 标记数据，其中包括日期`date`，标记`tag`，是否禁用`disable`，标记颜色`tagColor`，tagColor有4个可选值，1.#f5a911，2.#e8541e 3.#07a89b 4.#108ee9，5.#b5b5b5 | Array | | false 15 | | onSelect | 选择区间回调 | ([startDate, endDate]) => void | | false 16 | | onMonthChange | 点击切换月份时回调，带两个参数currentMonth切换后月份和prevMonth切换前月份 | (currentMonth, prevMonth) => void | | false | 17 | | onSelectHasDisableDate | 选择区间包含不可用日期 | (currentMonth, prevMonth) => void | | false | 18 | 19 | ## 示例 20 | 21 | ```json 22 | { 23 | "defaultTitle": "小程序AntUI组件库", 24 | "usingComponents":{ 25 | "calendar": "mini-antui/es/calendar/index" 26 | } 27 | } 28 | ``` 29 | 30 | ```html 31 | 32 | 40 | 41 | ``` 42 | 43 | ```javascript 44 | Page({ 45 | data: { 46 | tagData: [ 47 | { date: '2019-09-14', tag: '还房贷', tagColor: 5 }, 48 | { date: '2019-09-28', tag: '公积金', tagColor: 2 }, 49 | { date: '2019-09-18', tag: 'xx', disable: true }, 50 | ], 51 | }, 52 | handleSelect() {}, 53 | onMonthChange() {}, 54 | onYearChange() {}, 55 | onSelectHasDisableDate() { 56 | my.alert({ 57 | content: 'SelectHasDisableDate', 58 | }); 59 | }, 60 | }); 61 | ``` -------------------------------------------------------------------------------- /components/card/index.axml: -------------------------------------------------------------------------------- 1 | 6 | 7 | 8 | 9 | {{title}} 10 | {{subTitle}} 11 | {{title}} 12 | 13 | 15 | 16 | 17 | {{footer}} 18 | 19 | 20 | -------------------------------------------------------------------------------- /components/card/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "component": true 3 | } 4 | -------------------------------------------------------------------------------- /components/card/index.less: -------------------------------------------------------------------------------- 1 | @import '../style/themes/default.less'; 2 | 3 | .am-card { 4 | display: flex; 5 | background-color: @fill-base; 6 | border-radius: 4px; 7 | margin: 6px 10px; 8 | align-items: center; 9 | min-height: 81px; 10 | flex-direction: column; 11 | padding: 0 16px; 12 | &.am-card-active { 13 | background: #D9D9D9; 14 | } 15 | &-body { 16 | display: flex; 17 | align-items: center; 18 | width: 100%; 19 | padding: 16px 0; 20 | } 21 | &-content { 22 | flex: 1; 23 | min-width: 100px; 24 | } 25 | &-title { 26 | font-size: 18px; 27 | line-height: 25px; 28 | color: @color-text-title; 29 | margin-bottom: 4px; 30 | } 31 | &-subtitle { 32 | font-size: 14px; 33 | line-height: 20px; 34 | color: @color-text-caption; 35 | margin-bottom: 2px; 36 | } 37 | &-thumb { 38 | margin-right: 10px; 39 | width: 48px; 40 | height: 48px; 41 | border-radius: 2px; 42 | } 43 | &-arrow { 44 | width: 13px; 45 | height: 13px; 46 | background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAaCAYAAAC+aNwHAAAAkElEQVR4AWJwL/BhAJRWByYAgkAUhmdpkDZxlJZqD9UpXCPyBUTEga9+4IkI94F1XaWUTdH+a67inPOhjP2OgD+IFoTcm1GY3khrbfGAGFG6kBmAkPCw1rq6iBYb0VkEzJD+hHQWAz6iJBtQdP8YiQEbUQNiAF0BP0T+Gnkj8VbmHxMq5gOFjzQ+VPlYxz+WEyrVzhdMcxADAAAAAElFTkSuQmCC") center center no-repeat; 47 | background-size: 8px 13px; 48 | } 49 | &-footer { 50 | display: flex; 51 | width: 100%; 52 | align-items: center; 53 | border-top: 1rpx solid @border-color-base; 54 | padding: 10px 0; 55 | margin: -4px 0 0; 56 | font-size: 14px; 57 | line-height: 20px; 58 | color: @color-text-caption; 59 | image { 60 | width: 14px; 61 | height: 14px; 62 | margin-right: 4px; 63 | } 64 | } 65 | } 66 | -------------------------------------------------------------------------------- /components/card/index.md: -------------------------------------------------------------------------------- 1 | # Card 卡片 2 | 3 | 卡片。 4 | 5 | 扫码体验： 6 | 7 | 8 | 9 | | 属性名 | 描述 | 类型 | 默认值 | 必选 | 10 | | ---- | ---- | ---- | ---- | ---- | 11 | | thumb | Card缩略图地址 | String | | false | 12 | | title | Card标题 | String | | true | 13 | | subTitle | Card副标题 | String | | false | 14 | | footer | footer文字 | String | | false | 15 | | footerImg | footer图片地址 | String | | false | 16 | | onCardClick | Card点击的回调 | (info: Object) => void | | false | 17 | | info | 用于点击卡片时往外传递数据 | String | | false | 18 | 19 | ## 示例 20 | 21 | ```json 22 | { 23 | "defaultTitle": "小程序AntUI组件库", 24 | "usingComponents": { 25 | "card": "mini-antui/es/card/index" 26 | } 27 | } 28 | ``` 29 | 30 | ```html 31 | 40 | ``` 41 | 42 | ```javascript 43 | Page({ 44 | data: { 45 | tagData: [ 46 | { date: '2018-05-14', tag: '还房贷', tagColor: 5 }, 47 | { date: '2018-05-28', tag: '公积金', tagColor: 2 }, 48 | ], 49 | }, 50 | handleSelect() {}, 51 | onMonthChange() {}, 52 | }); 53 | ``` -------------------------------------------------------------------------------- /components/card/index.ts: -------------------------------------------------------------------------------- 1 | Component({ 2 | props: { 3 | title: '', 4 | onClick: () => {}, 5 | info: '', 6 | }, 7 | methods:{ 8 | onCardClick() { 9 | const { info, onClick } = this.props; 10 | onClick({info}); 11 | }, 12 | }, 13 | }) 14 | -------------------------------------------------------------------------------- /components/collapse/collapse-item/index.axml: -------------------------------------------------------------------------------- 1 | 5 | 12 | 13 | 14 | 15 | {{header}} 16 | 17 | 18 | 25 | 26 | 27 | 31 | 32 | 33 | 34 | 35 | -------------------------------------------------------------------------------- /components/collapse/collapse-item/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "component": true, 3 | "usingComponents": { 4 | "am-icon": "../../am-icon/index" 5 | } 6 | } -------------------------------------------------------------------------------- /components/collapse/collapse-item/index.less: -------------------------------------------------------------------------------- 1 | @import '../../style/mixins/hairline.less'; 2 | 3 | .am-collapse-item { 4 | border-radius: 4px; 5 | background-color: #fff; 6 | &-title-container { 7 | width: 100%; 8 | display: flex; 9 | color: #333; 10 | font-size: 17px; 11 | line-height: 24px; 12 | position: relative; 13 | text-align: justify; 14 | align-items: center; 15 | padding: 0 16px 14px 0; 16 | justify-content: space-between; 17 | transition: all 0.3s ease-in-out; 18 | .hairline('bottom', #fff); 19 | } 20 | 21 | &--disabled .am-collapse-title { 22 | opacity: 0.5; 23 | } 24 | 25 | &-title { 26 | background-color: #fff; 27 | padding: 14px 16px 0 16px; 28 | border-top: 1px solid #eee; 29 | &.title--active .am-collapse-item-title-container { 30 | .hairline('bottom'); 31 | } 32 | } 33 | 34 | &-title-text-wrapper { 35 | padding-right: 16px; 36 | } 37 | &-content-wrapper { 38 | overflow-y: hidden; 39 | box-sizing: border-box; 40 | will-change: max-height; 41 | transition: max-height 0.3s ease-in-out; 42 | } 43 | &-title-arrow { 44 | transform: rotate(0deg); 45 | transition: all 0.2s ease-out; 46 | } 47 | .arrow--down { 48 | transform: rotate(180deg); 49 | } 50 | } 51 | -------------------------------------------------------------------------------- /components/collapse/index.axml: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /components/collapse/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "component": true 3 | } 4 | -------------------------------------------------------------------------------- /components/face-detection/index.axml: -------------------------------------------------------------------------------- 1 | 8 | appName and serviceName is required -------------------------------------------------------------------------------- /components/face-detection/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "component": true 3 | } -------------------------------------------------------------------------------- /components/filter/filter-item/index.axml: -------------------------------------------------------------------------------- 1 | 2 | {{value}} 3 | 4 | -------------------------------------------------------------------------------- /components/filter/filter-item/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "component": true 3 | } -------------------------------------------------------------------------------- /components/filter/filter-item/index.ts: -------------------------------------------------------------------------------- 1 | import lifecycle from '../mixins/lifecycle'; 2 | 3 | Component({ 4 | mixins: [lifecycle], 5 | data: { 6 | confirmStyle: '', 7 | }, 8 | 9 | props: { 10 | className: '', 11 | item: '', 12 | id: '', 13 | value: '', 14 | selected: false, 15 | onChange: () => {}, 16 | }, 17 | 18 | didMount() { 19 | const { results, items } = this.data; 20 | const { selected, id, value } = this.props; 21 | if (selected) { 22 | results.push({ id, value }); 23 | items.push({ id, value, setData: this.setData }); 24 | this.setData({ 25 | confirmStyle: true, 26 | }); 27 | } 28 | }, 29 | 30 | methods: { 31 | handleClick() { 32 | const { id, value, onChange } = this.props; 33 | let { confirmStyle } = this.data; 34 | const { results, items, commonProps } = this.data; 35 | if (commonProps.max === 1) { 36 | if (confirmStyle === '') { 37 | items.forEach((element) => { 38 | element.setData({ 39 | confirmStyle: '', 40 | }); 41 | }); 42 | results.splice(0, results.length); 43 | confirmStyle = true; 44 | results.push({ id, value }); 45 | items.push({ id, value, setData: this.setData }); 46 | onChange(results); 47 | } 48 | this.setData({ 49 | confirmStyle, 50 | }); 51 | return; 52 | } 53 | if (confirmStyle === '' && results.length < commonProps.max) { 54 | confirmStyle = true; 55 | results.push({ id, value }); 56 | items.push({ id, value, setData: this.setData }); 57 | } else { 58 | confirmStyle = ''; 59 | results.some((key, index) => { 60 | if (JSON.stringify(key) === JSON.stringify({ id, value })) { 61 | results.splice(index, 1); 62 | return true; 63 | } else { 64 | return false; 65 | } 66 | }); 67 | } 68 | this.setData({ 69 | confirmStyle, 70 | }); 71 | }, 72 | }, 73 | }); 74 | -------------------------------------------------------------------------------- /components/filter/index.axml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /components/filter/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "component": true 3 | } 4 | -------------------------------------------------------------------------------- /components/filter/index.less: -------------------------------------------------------------------------------- 1 | .am-filter { 2 | &-show { 3 | height: 100vh; 4 | display: block; 5 | position: relative; 6 | } 7 | 8 | &-hide { 9 | display: none; 10 | } 11 | 12 | &-mask, &-document { 13 | position: absolute; 14 | top: 0; 15 | left: 0; 16 | right: 0; 17 | } 18 | 19 | &-mask { 20 | bottom: 0; 21 | background: rgba(0, 0, 0, 0.65); 22 | } 23 | 24 | &-content { 25 | background: #fff; 26 | display: flex; 27 | flex-direction: column; 28 | overflow-x: hidden; 29 | overflow-y: scroll; 30 | } 31 | 32 | &-list { 33 | flex: 1; 34 | padding: 10px 5px 23px; 35 | overflow-x: hidden; 36 | min-height: 200px; 37 | overflow-y: scroll; 38 | max-height: 415px; 39 | box-sizing: border-box; 40 | } 41 | 42 | &-btn { 43 | width: 100%; 44 | display: flex; 45 | } 46 | 47 | &-default, &-primary { 48 | flex: 1; 49 | height: 48px; 50 | font-size: 18px; 51 | box-sizing: border-box; 52 | width: 50%; 53 | border: 0; 54 | border-radius: 0; 55 | } 56 | 57 | &-default { 58 | border-top: 1px solid #eee; 59 | border-right: none; 60 | } 61 | } 62 | -------------------------------------------------------------------------------- /components/filter/index.md: -------------------------------------------------------------------------------- 1 | # Filter 筛选 2 | 3 | 用作标签卡筛选。 4 | 5 | 扫码体验： 6 | 7 | 8 | 9 | ## filter 10 | 11 | | 属性名 | 描述 | 类型 | 默认值 | 必选 | 12 | | ---- | ---- | ---- | ---- | ---- | 13 | | show | 是否显示 可选值 `show` `hide` | String | hide | false | 14 | | max | 可选数量最大值，1为单选 | Number | 10000 | false | 15 | | onChange | 多选时提交选中回调 | (e: Object) => void | | false | 16 | | onMaskTap | 点击遮罩层时触发，可用于关闭 filter | () => void | | false | 17 | 18 | ## filter-item 19 | 20 | | 属性名 | 描述 | 类型 | 默认值 | 必选 | 21 | | ---- | ---- | ---- | ---- | ---- | 22 | | className | 自定义样式 | String | | false | 23 | | value | 值 | String | | true | 24 | | id | 自定义标识符 | String | | false | 25 | | selected | 默认选中 | Boolean | false | false | 26 | | onChange | 单选时提交选中回调 | (e: Object) => void | | false | 27 | 28 | ## 示例 29 | 30 | ```json 31 | { 32 | "defaultTitle": "小程序AntUI组件库", 33 | "usingComponents": { 34 | "filter": "mini-antui/es/filter/index", 35 | "filter-item": "mini-antui/es/filter/filter-item/index" 36 | } 37 | } 38 | ``` 39 | 40 | ```html 41 | 42 | 43 | 44 | 45 | 46 | ``` 47 | 48 | ```javascript 49 | Page({ 50 | data: { 51 | show: true, 52 | items: [ 53 | { id: 1, value: '衣服', selected: true }, 54 | { id: 1, value: '橱柜' }, 55 | { id: 1, value: '衣架' }, 56 | { id: 3, value: '数码产品' }, 57 | { id: 4, value: '防盗门' }, 58 | { id: 5, value: '椅子' }, 59 | { id: 7, value: '显示器' }, 60 | { id: 6, value: '某最新款电子产品' }, 61 | { id: 8, value: '某某某某某牌电视游戏底座' }, 62 | ] 63 | }, 64 | handleCallBack(data) { 65 | my.alert({ 66 | content: data 67 | }); 68 | }, 69 | toggleFilter() { 70 | this.setData({ 71 | show: !this.data.show, 72 | }); 73 | } 74 | }); 75 | ``` 76 | -------------------------------------------------------------------------------- /components/filter/index.ts: -------------------------------------------------------------------------------- 1 | import lifecycle from './mixins/lifecycle'; 2 | 3 | Component({ 4 | mixins: [lifecycle], 5 | data: { 6 | maxHeight: 0, 7 | }, 8 | props: { 9 | className: '', 10 | onChange: () => {}, 11 | max: 10000, 12 | }, 13 | didMount() { 14 | const { commonProps } = this.data; 15 | const { max } = this.props; 16 | commonProps.max = max; 17 | }, 18 | methods: { 19 | resetFn() { 20 | const { items, results } = this.data; 21 | items.forEach((element) => { 22 | element.setData({ 23 | confirmStyle: '', 24 | }); 25 | }); 26 | results.splice(0, results.length); 27 | }, 28 | confirmFn() { 29 | const { onChange } = this.props; 30 | const { results } = this.data; 31 | onChange(results); 32 | }, 33 | maskTap() { 34 | if (this.props.onMaskTap) { 35 | this.props.onMaskTap(); 36 | } 37 | }, 38 | }, 39 | }); 40 | -------------------------------------------------------------------------------- /components/filter/mixins/lifecycle.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | data: { 3 | results: [], 4 | items: [], 5 | commonProps: { 6 | max: 10000, 7 | } 8 | }, 9 | 10 | didUnmount() { 11 | let { items, results } = this.data; 12 | results.splice(0, results.length); 13 | items.splice(0, items.length); 14 | }, 15 | }; -------------------------------------------------------------------------------- /components/flex/flex-item/index.axml: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /components/flex/flex-item/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "component": true 3 | } -------------------------------------------------------------------------------- /components/flex/flex-item/index.less: -------------------------------------------------------------------------------- 1 | .am-flexbox-item { 2 | box-sizing: border-box; 3 | flex: 1; 4 | min-width: 10px; 5 | margin-left: 8px; 6 | 7 | &:first-child { 8 | margin-left: 0; 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /components/flex/flex-item/index.ts: -------------------------------------------------------------------------------- 1 | Component({ 2 | 3 | }); 4 | -------------------------------------------------------------------------------- /components/flex/index.axml: -------------------------------------------------------------------------------- 1 | 2 | 4 | 5 | -------------------------------------------------------------------------------- /components/flex/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "component": true 3 | } -------------------------------------------------------------------------------- /components/flex/index.less: -------------------------------------------------------------------------------- 1 | .am-flexbox { 2 | display: flex; 3 | 4 | &-dir-row { 5 | flex-direction: row; 6 | } 7 | 8 | &-dir-row-reverse { 9 | flex-direction: row-reverse; 10 | } 11 | 12 | &-dir-column { 13 | flex-direction: column; 14 | } 15 | 16 | &-dir-column-reverse { 17 | flex-direction: column-reverse; 18 | } 19 | 20 | &-nowrap { 21 | flex-wrap: nowrap; 22 | } 23 | 24 | &-wrap { 25 | flex-wrap: wrap; 26 | } 27 | 28 | &-wrap-reverse { 29 | flex-wrap: wrap-reverse; 30 | } 31 | 32 | &-justify-start { 33 | justify-content: flex-start; 34 | } 35 | 36 | &-justify-center { 37 | justify-content: center; 38 | } 39 | 40 | &-justify-end { 41 | justify-content: flex-end; 42 | } 43 | 44 | &-justify-between { 45 | justify-content: space-between; 46 | } 47 | 48 | &-justify-around { 49 | justify-content: space-around; 50 | } 51 | &-align-start { 52 | align-items: flex-start; 53 | } 54 | 55 | &-align-end { 56 | align-items: flex-end; 57 | } 58 | 59 | &-align-center { 60 | align-items: center; 61 | } 62 | 63 | &-align-stretch { 64 | align-items: stretch; 65 | } 66 | 67 | &-align-baseline { 68 | align-items: baseline; 69 | } 70 | 71 | &-align-content-start { 72 | align-content: flex-start; 73 | } 74 | 75 | &-align-content-end { 76 | align-content: flex-end; 77 | } 78 | 79 | &-align-content-center { 80 | align-content: center; 81 | } 82 | 83 | &-align-content-between { 84 | align-content: space-between; 85 | } 86 | 87 | &-align-content-around { 88 | align-content: space-around; 89 | } 90 | 91 | &-align-content-stretch { 92 | align-content: stretch; 93 | } 94 | } 95 | -------------------------------------------------------------------------------- /components/flex/index.sjs: -------------------------------------------------------------------------------- 1 | export default function classnames(dir, wrap, justify, align, alignContent) { 2 | const prefixCls = 'am-flexbox'; 3 | const classes = []; 4 | 5 | const dirMaps = { 6 | row: `${prefixCls}-dir-row`, 7 | 'row-reverse': `${prefixCls}-dir-row-reverse`, 8 | column: `${prefixCls}-dir-column`, 9 | 'column-reverse': `${prefixCls}-dir-column-reverse`, 10 | }; 11 | 12 | const wrapMaps = { 13 | nowrap: `${prefixCls}-nowrap`, 14 | wrap: `${prefixCls}-wrap`, 15 | 'wrap-reverse': `${prefixCls}-wrap-reverse`, 16 | }; 17 | 18 | const justifyMaps = { 19 | start: `${prefixCls}-justify-start`, 20 | end: `${prefixCls}-justify-end`, 21 | center: `${prefixCls}-justify-center`, 22 | between: `${prefixCls}-justify-between`, 23 | around: `${prefixCls}-justify-around`, 24 | }; 25 | 26 | const alignMaps = { 27 | start: `${prefixCls}-align-start`, 28 | center: `${prefixCls}-align-center`, 29 | end: `${prefixCls}-align-end`, 30 | baseline: `${prefixCls}-align-baseline`, 31 | stretch: `${prefixCls}-align-stretch`, 32 | }; 33 | 34 | const alignContentMaps = { 35 | start: `${prefixCls}-align-content-start`, 36 | end: `${prefixCls}-align-content-end`, 37 | center: `${prefixCls}-align-content-center`, 38 | between: `${prefixCls}-align-content-between`, 39 | around: `${prefixCls}-align-content-around`, 40 | stretch: `${prefixCls}-align-content-stretch`, 41 | }; 42 | 43 | if (dirMaps[dir]) { 44 | classes.push(dirMaps[dir]); 45 | } 46 | 47 | if (wrapMaps[wrap]) { 48 | classes.push(wrapMaps[wrap]); 49 | } 50 | 51 | if (justifyMaps[justify]) { 52 | classes.push(justifyMaps[justify]); 53 | } 54 | 55 | if (alignMaps[align]) { 56 | classes.push(alignMaps[align]); 57 | } 58 | 59 | if (alignContentMaps[alignContent]) { 60 | classes.push(alignContentMaps[alignContent]); 61 | } 62 | 63 | return classes.join(' '); 64 | } 65 | -------------------------------------------------------------------------------- /components/flex/index.ts: -------------------------------------------------------------------------------- 1 | Component({ 2 | props: { 3 | className: '', 4 | direction: 'row', 5 | wrap: 'nowrap', 6 | justify: 'start', 7 | align: 'center', 8 | alignContent: 'stretch', 9 | }, 10 | }); 11 | -------------------------------------------------------------------------------- /components/footer/index.axml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | {{item.text}} 5 | 6 | 7 | {{copyright}} 8 | -------------------------------------------------------------------------------- /components/footer/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "component": true 3 | } -------------------------------------------------------------------------------- /components/footer/index.less: -------------------------------------------------------------------------------- 1 | @import '../style/themes/default.less'; 2 | 3 | .am-footer { 4 | &-links { 5 | display: flex; 6 | justify-content: center; 7 | } 8 | &-link { 9 | height: 17px; 10 | line-height: 17px; 11 | color: @color-link; 12 | font-size: 12px; 13 | &::after { 14 | content: '｜'; 15 | padding: 0 5px; 16 | height: 17px; 17 | color: @color-text-dark; 18 | } 19 | &:last-child { 20 | &::after { 21 | display: none; 22 | } 23 | } 24 | } 25 | &-copyright { 26 | margin-top: 3px; 27 | height: 17px; 28 | line-height: 17px; 29 | color: @color-text-dark; 30 | font-size: 14px; 31 | text-align: center; 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /components/footer/index.md: -------------------------------------------------------------------------------- 1 | # Footer 页脚 2 | 3 | 显示页面页脚。 4 | 5 | 扫码体验： 6 | 7 | 8 | 9 | 10 | | 属性名 | 描述 | 类型 | 默认值 | 必选 | 11 | | ---- | ---- | ---- | ---- | ---- | 12 | | copyright | 版权信息 | String | | false | 13 | | links | 页脚链接 | Array | | false | 14 | 15 | ## 示例 16 | 17 | ```json 18 | { 19 | "defaultTitle": "小程序AntUI组件库", 20 | "usingComponents":{ 21 | "footer": "mini-antui/es/footer/index" 22 | } 23 | } 24 | ``` 25 | 26 | ```html 27 | 28 |