diff --git a/gh-pages/audio.html b/gh-pages/audio.html index d5fc0780..edaaa9dd 100644 --- a/gh-pages/audio.html +++ b/gh-pages/audio.html @@ -25,7 +25,7 @@
- + diff --git a/gh-pages/carousel.html b/gh-pages/carousel.html index d5fc0780..edaaa9dd 100644 --- a/gh-pages/carousel.html +++ b/gh-pages/carousel.html @@ -25,7 +25,7 @@ - + diff --git a/gh-pages/chart.html b/gh-pages/chart.html index d5fc0780..edaaa9dd 100644 --- a/gh-pages/chart.html +++ b/gh-pages/chart.html @@ -25,7 +25,7 @@ - + diff --git a/gh-pages/crud/aside.html b/gh-pages/crud/aside.html index d5fc0780..edaaa9dd 100644 --- a/gh-pages/crud/aside.html +++ b/gh-pages/crud/aside.html @@ -25,7 +25,7 @@ - + diff --git a/gh-pages/crud/columns.html b/gh-pages/crud/columns.html index d5fc0780..edaaa9dd 100644 --- a/gh-pages/crud/columns.html +++ b/gh-pages/crud/columns.html @@ -25,7 +25,7 @@ - + diff --git a/gh-pages/crud/fixed.html b/gh-pages/crud/fixed.html index d5fc0780..edaaa9dd 100644 --- a/gh-pages/crud/fixed.html +++ b/gh-pages/crud/fixed.html @@ -25,7 +25,7 @@ - + diff --git a/gh-pages/crud/footable.html b/gh-pages/crud/footable.html index d5fc0780..edaaa9dd 100644 --- a/gh-pages/crud/footable.html +++ b/gh-pages/crud/footable.html @@ -25,7 +25,7 @@ - + diff --git a/gh-pages/crud/grid.html b/gh-pages/crud/grid.html index d5fc0780..edaaa9dd 100644 --- a/gh-pages/crud/grid.html +++ b/gh-pages/crud/grid.html @@ -25,7 +25,7 @@ - + diff --git a/gh-pages/crud/header-group.html b/gh-pages/crud/header-group.html index d5fc0780..edaaa9dd 100644 --- a/gh-pages/crud/header-group.html +++ b/gh-pages/crud/header-group.html @@ -25,7 +25,7 @@ - + diff --git a/gh-pages/crud/item-actions.html b/gh-pages/crud/item-actions.html index d5fc0780..edaaa9dd 100644 --- a/gh-pages/crud/item-actions.html +++ b/gh-pages/crud/item-actions.html @@ -25,7 +25,7 @@ - + diff --git a/gh-pages/crud/jump-next.html b/gh-pages/crud/jump-next.html index d5fc0780..edaaa9dd 100644 --- a/gh-pages/crud/jump-next.html +++ b/gh-pages/crud/jump-next.html @@ -25,7 +25,7 @@ - + diff --git a/gh-pages/crud/keyboards.html b/gh-pages/crud/keyboards.html index d5fc0780..edaaa9dd 100644 --- a/gh-pages/crud/keyboards.html +++ b/gh-pages/crud/keyboards.html @@ -25,7 +25,7 @@ - + diff --git a/gh-pages/crud/list.html b/gh-pages/crud/list.html index d5fc0780..edaaa9dd 100644 --- a/gh-pages/crud/list.html +++ b/gh-pages/crud/list.html @@ -25,7 +25,7 @@ - + diff --git a/gh-pages/crud/load-more.html b/gh-pages/crud/load-more.html index d5fc0780..edaaa9dd 100644 --- a/gh-pages/crud/load-more.html +++ b/gh-pages/crud/load-more.html @@ -25,7 +25,7 @@ - + diff --git a/gh-pages/crud/load-once.html b/gh-pages/crud/load-once.html index d5fc0780..edaaa9dd 100644 --- a/gh-pages/crud/load-once.html +++ b/gh-pages/crud/load-once.html @@ -25,7 +25,7 @@ - + diff --git a/gh-pages/crud/merge-cell.html b/gh-pages/crud/merge-cell.html index d5fc0780..edaaa9dd 100644 --- a/gh-pages/crud/merge-cell.html +++ b/gh-pages/crud/merge-cell.html @@ -25,7 +25,7 @@ - + diff --git a/gh-pages/crud/nested.html b/gh-pages/crud/nested.html index d5fc0780..edaaa9dd 100644 --- a/gh-pages/crud/nested.html +++ b/gh-pages/crud/nested.html @@ -25,7 +25,7 @@ - + diff --git a/gh-pages/crud/table.html b/gh-pages/crud/table.html index d5fc0780..edaaa9dd 100644 --- a/gh-pages/crud/table.html +++ b/gh-pages/crud/table.html @@ -25,7 +25,7 @@ - + diff --git a/gh-pages/dialog/drawer.html b/gh-pages/dialog/drawer.html index d5fc0780..edaaa9dd 100644 --- a/gh-pages/dialog/drawer.html +++ b/gh-pages/dialog/drawer.html @@ -25,7 +25,7 @@ - + diff --git a/gh-pages/dialog/simple.html b/gh-pages/dialog/simple.html index d5fc0780..edaaa9dd 100644 --- a/gh-pages/dialog/simple.html +++ b/gh-pages/dialog/simple.html @@ -25,7 +25,7 @@ - + diff --git a/gh-pages/docs/advanced.html b/gh-pages/docs/advanced.html index d5fc0780..edaaa9dd 100644 --- a/gh-pages/docs/advanced.html +++ b/gh-pages/docs/advanced.html @@ -25,7 +25,7 @@ - + diff --git a/gh-pages/docs/basic.html b/gh-pages/docs/basic.html index d5fc0780..edaaa9dd 100644 --- a/gh-pages/docs/basic.html +++ b/gh-pages/docs/basic.html @@ -25,7 +25,7 @@ - + diff --git a/gh-pages/docs/dev.html b/gh-pages/docs/dev.html index d5fc0780..edaaa9dd 100644 --- a/gh-pages/docs/dev.html +++ b/gh-pages/docs/dev.html @@ -25,7 +25,7 @@ - + diff --git a/gh-pages/docs/getting-started.html b/gh-pages/docs/getting-started.html index d5fc0780..edaaa9dd 100644 --- a/gh-pages/docs/getting-started.html +++ b/gh-pages/docs/getting-started.html @@ -25,7 +25,7 @@ - + diff --git a/gh-pages/docs/getting_started_e3cb529.js b/gh-pages/docs/getting_started_b4287a5.js similarity index 73% rename from gh-pages/docs/getting_started_e3cb529.js rename to gh-pages/docs/getting_started_b4287a5.js index 5f4a58f7..4c32a530 100644 --- a/gh-pages/docs/getting_started_e3cb529.js +++ b/gh-pages/docs/getting_started_b4287a5.js @@ -2,7 +2,7 @@ define('docs/getting_started.md', function(require, exports, module) { module.exports = { "title": "快速开始", - "html": "这是一个基于 React 框架的页面渲染器,有配置就能生成页面,配置是什么样的?请前往基本用法阅读。知道怎么配置后,就可以用以下方式用于自己的项目了。
\n如果你不会 React 也没关系可以看看 JSSDK 用法。
\n直接通过 npm 安装即可。
\nnpm i amis\n
可以在 React Component 这么使用。
\nimport * as React from 'react';\nimport {\n render as renderAmis\n} from 'amis';\n\nclass MyComponent extends React.Component<any, any> {\n render() {\n return (\n <div>\n <p>通过 amis 渲染页面</p>\n {renderAmis({\n // schema\n // 这里是 amis 的 Json 配置。\n type: 'page',\n title: '简单页面',\n body: '内容'\n }, {\n // props\n }, {\n // env\n // 这些是 amis 需要的一些接口实现\n // 可以参考本项目里面的 Demo 部分代码。\n\n updateLocation: (location:string/*目标地址*/, replace:boolean/*是replace,还是push?*/) => {\n // 用来更新地址栏\n },\n\n jumpTo: (location:string/*目标地址*/) => {\n // 页面跳转, actionType: link、url 都会进来。\n },\n\n fetcher: ({\n url,\n method,\n data,\n config\n }:{\n url:string/*目标地址*/,\n method:'get' | 'post' | 'put' | 'delete'/*发送方式*/,\n data: object | void/*数据*/,\n config: object/*其他配置*/\n }) => {\n // 用来发送 Ajax 请求,建议使用 axios\n },\n notify: (type:'error'|'success'/**/, msg:string/*提示内容*/) => {\n // 用来提示用户\n },\n alert: (content:string/*提示信息*/) => {\n // 另外一种提示,可以直接用系统框\n },\n confirm: (content:string/*提示信息*/) => {\n // 确认框。\n }\n });}\n </div>\n );\n }\n}\n
\n(schema:Schema, props?:any, env?: any) => JSX.Element
参数说明:
\nschema
即页面配置,请前往基本用法了解.props
一般都用不上,如果你想传递一些数据给渲染器内部使用,可以传递 data 数据进去。如:
() => renderAmis(schema, {\n data: {\n username: 'amis'\n }\n})\n
\n这样,内部所有组件都能拿到 username
这个变量的值。
env
环境变量,可以理解为这个渲染器工具的配置项,需要调用者实现部分接口。
session: string
默认为 'global',决定 store 是否为全局共用的,如果想单占一个 store,请设置不同的值。fetcher: (config: fetcherConfig) => Promise<fetcherResult>
用来实现 ajax 发送。
示例
\nfetcher: ({\n url,\n method,\n data,\n responseType,\n config,\n headers\n}: any) => {\n config = config || {};\n config.withCredentials = true;\n responseType && (config.responseType = responseType);\n\n if (config.cancelExecutor) {\n config.cancelToken = new (axios as any).CancelToken(config.cancelExecutor);\n }\n\n config.headers = headers || {};\n\n if (method !== 'post' && method !== 'put' && method !== 'patch') {\n if (data) {\n config.params = data;\n }\n\n return (axios as any)[method](url, config);\n } else if (data && data instanceof FormData) {\n // config.headers = config.headers || {};\n // config.headers['Content-Type'] = 'multipart/form-data';\n } else if (data\n && typeof data !== 'string'\n && !(data instanceof Blob)\n && !(data instanceof ArrayBuffer)\n ) {\n data = JSON.stringify(data);\n // config.headers = config.headers || {};\n config.headers['Content-Type'] = 'application/json';\n }\n\n return (axios as any)[method](url, data, config);\n}\n
\nisCancel: (e:error) => boolean
判断 ajax 异常是否为一个 cancel 请求。
示例
\nisCancel: (value: any) => (axios as any).isCancel(value)\n
\nnotify: (type:string, msg: string) => void
用来实现消息提示。alert: (msg:string) => void
用来实现警告提示。confirm: (msg:string) => boolean | Promise<boolean>
用来实现确认框。jumpTo: (to:string, action?: Action, ctx?: object) => void
用来实现页面跳转,因为不清楚所在环境中是否使用了 spa 模式,所以用户自己实现吧。updateLocation: (location:any, replace?:boolean) => void
地址替换,跟 jumpTo 类似。isCurrentUrl: (link:string) => boolean
判断目标地址是否为当前页面。theme: 'default' | 'cxd'
目前支持两种主题。 copy: (contents:string, options?: {shutup: boolean}) => void
用来实现,内容复制。getModalContainer: () => HTMLElement
用来决定弹框容器。loadRenderer: (chema:any, path:string) => Promise<Function>
可以通过它懒加载自定义组件,比如: https://github.com/baidu/amis/blob/master/__tests__/factory.test.tsx#L64-L91。affixOffsetTop: number
固顶间距,当你的有其他固顶元素时,需要设置一定的偏移量,否则会重叠。affixOffsetBottom: number
固底间距,当你的有其他固底元素时,需要设置一定的偏移量,否则会重叠。richTextToken: string
内置 rich-text 为 frolaEditor,想要使用,请自行购买,或者自己实现 rich-text 渲染器。如果你没有组件定制需求直接使用,而且不想折腾 React 相关的,我建议你直接用这种方式。
\n首先请引用一下 CSS 和 JS。
\n然后执行以下代码就能渲染了。
\n(function() {\n var amis = amisRequire('amis/embed');\n amis.embed('#container', {\n type: 'page',\n title: 'AMIS Demo',\n body: 'This is a simple amis page.'\n }, {\n // props 一般不用传。\n }, {\n // env\n fetcher: () => {\n // 可以不传,用来实现 ajax 请求\n },\n\n jumpTo: () => {\n // 可以不传,用来实现页面跳转\n },\n\n updateLocation: () => {\n // 可以不传,用来实现地址栏更新\n },\n\n isCurrentUrl: () => {\n // 可以不传,用来判断是否目标地址当前地址。\n },\n\n copy: () => {\n // 可以不传,用来实现复制到剪切板\n },\n\n notify: () => {\n // 可以不传,用来实现通知\n },\n\n alert: () => {\n // 可以不传,用来实现提示\n },\n\n confirm: () => {\n // 可以不传,用来实现确认框。\n }\n });\n})();\n
\n注意:以上的 SDK 地址是一个页面跳转,会跳转到一个 CDN 地址,而且每次跳转都是最新的版本,随着 amis 的升级这个地址会一直变动,如果你的页面已经完成功能回归,请直接使用某个固定地址,这样才不会因为 amis 升级而导致你的页面不可用。
\n示例:
\n这是一个基于 React 框架的页面渲染器,有配置就能生成页面,配置是什么样的?请前往基本用法阅读。知道怎么配置后,就可以用以下方式用于自己的项目了。
\n如果你不会 React 也没关系可以看看 JSSDK 用法。
\n直接通过 npm 安装即可。
\nnpm i amis\n
可以在 React Component 这么使用。
\nimport * as React from 'react';\nimport {\n render as renderAmis\n} from 'amis';\n\nclass MyComponent extends React.Component<any, any> {\n render() {\n return (\n <div>\n <p>通过 amis 渲染页面</p>\n {renderAmis({\n // schema\n // 这里是 amis 的 Json 配置。\n type: 'page',\n title: '简单页面',\n body: '内容'\n }, {\n // props\n }, {\n // env\n // 这些是 amis 需要的一些接口实现\n // 可以参考本项目里面的 Demo 部分代码。\n\n updateLocation: (location:string/*目标地址*/, replace:boolean/*是replace,还是push?*/) => {\n // 用来更新地址栏\n },\n\n jumpTo: (location:string/*目标地址*/) => {\n // 页面跳转, actionType: link、url 都会进来。\n },\n\n fetcher: ({\n url,\n method,\n data,\n config\n }:{\n url:string/*目标地址*/,\n method:'get' | 'post' | 'put' | 'delete'/*发送方式*/,\n data: object | void/*数据*/,\n config: object/*其他配置*/\n }) => {\n // 用来发送 Ajax 请求,建议使用 axios\n },\n notify: (type:'error'|'success'/**/, msg:string/*提示内容*/) => {\n // 用来提示用户\n },\n alert: (content:string/*提示信息*/) => {\n // 另外一种提示,可以直接用系统框\n },\n confirm: (content:string/*提示信息*/) => {\n // 确认框。\n }\n });}\n </div>\n );\n }\n}\n
\n(schema:Schema, props?:any, env?: any) => JSX.Element
参数说明:
\nschema
即页面配置,请前往基本用法了解.props
一般都用不上,如果你想传递一些数据给渲染器内部使用,可以传递 data 数据进去。如:
() => renderAmis(schema, {\n data: {\n username: 'amis'\n }\n})\n
\n这样,内部所有组件都能拿到 username
这个变量的值。
env
环境变量,可以理解为这个渲染器工具的配置项,需要调用者实现部分接口。
session: string
默认为 'global',决定 store 是否为全局共用的,如果想单占一个 store,请设置不同的值。fetcher: (config: fetcherConfig) => Promise<fetcherResult>
用来实现 ajax 发送。
示例
\nfetcher: ({\n url,\n method,\n data,\n responseType,\n config,\n headers\n}: any) => {\n config = config || {};\n config.withCredentials = true;\n responseType && (config.responseType = responseType);\n\n if (config.cancelExecutor) {\n config.cancelToken = new (axios as any).CancelToken(config.cancelExecutor);\n }\n\n config.headers = headers || {};\n\n if (method !== 'post' && method !== 'put' && method !== 'patch') {\n if (data) {\n config.params = data;\n }\n\n return (axios as any)[method](url, config);\n } else if (data && data instanceof FormData) {\n // config.headers = config.headers || {};\n // config.headers['Content-Type'] = 'multipart/form-data';\n } else if (data\n && typeof data !== 'string'\n && !(data instanceof Blob)\n && !(data instanceof ArrayBuffer)\n ) {\n data = JSON.stringify(data);\n // config.headers = config.headers || {};\n config.headers['Content-Type'] = 'application/json';\n }\n\n return (axios as any)[method](url, data, config);\n}\n
\nisCancel: (e:error) => boolean
判断 ajax 异常是否为一个 cancel 请求。
示例
\nisCancel: (value: any) => (axios as any).isCancel(value)\n
\nnotify: (type:string, msg: string) => void
用来实现消息提示。alert: (msg:string) => void
用来实现警告提示。confirm: (msg:string) => boolean | Promise<boolean>
用来实现确认框。jumpTo: (to:string, action?: Action, ctx?: object) => void
用来实现页面跳转,因为不清楚所在环境中是否使用了 spa 模式,所以用户自己实现吧。updateLocation: (location:any, replace?:boolean) => void
地址替换,跟 jumpTo 类似。isCurrentUrl: (link:string) => boolean
判断目标地址是否为当前页面。theme: 'default' | 'cxd'
目前支持两种主题。 copy: (contents:string, options?: {shutup: boolean}) => void
用来实现,内容复制。getModalContainer: () => HTMLElement
用来决定弹框容器。loadRenderer: (chema:any, path:string) => Promise<Function>
可以通过它懒加载自定义组件,比如: https://github.com/baidu/amis/blob/master/__tests__/factory.test.tsx#L64-L91。affixOffsetTop: number
固顶间距,当你的有其他固顶元素时,需要设置一定的偏移量,否则会重叠。affixOffsetBottom: number
固底间距,当你的有其他固底元素时,需要设置一定的偏移量,否则会重叠。richTextToken: string
内置 rich-text 为 frolaEditor,想要使用,请自行购买,或者自己实现 rich-text 渲染器。如果你没有组件定制需求直接使用,而且不想折腾 React 相关的,我建议你直接用这种方式。
\n首先请引用一下 CSS 和 JS。
\n然后执行以下代码就能渲染了。
\n(function() {\n var amis = amisRequire('amis/embed');\n amis.embed('#container', {\n type: 'page',\n title: 'AMIS Demo',\n body: 'This is a simple amis page.'\n }, {\n // props 一般不用传。\n }, {\n // env\n fetcher: () => {\n // 可以不传,用来实现 ajax 请求\n },\n\n jumpTo: () => {\n // 可以不传,用来实现页面跳转\n },\n\n updateLocation: () => {\n // 可以不传,用来实现地址栏更新\n },\n\n isCurrentUrl: () => {\n // 可以不传,用来判断是否目标地址当前地址。\n },\n\n copy: () => {\n // 可以不传,用来实现复制到剪切板\n },\n\n notify: () => {\n // 可以不传,用来实现通知\n },\n\n alert: () => {\n // 可以不传,用来实现提示\n },\n\n confirm: () => {\n // 可以不传,用来实现确认框。\n }\n });\n})();\n
\n注意:以上的 SDK 地址是一个页面跳转,会跳转到一个 CDN 地址,而且每次跳转都是最新的版本,随着 amis 的升级这个地址会一直变动,如果你的页面已经完成功能回归,请直接使用某个固定地址,这样才不会因为 amis 升级而导致你的页面不可用。
\n示例:
\n<html lang=\"zh\">\n<head>\n <meta charset=\"UTF-8\">\n <title>AMIS Demo</title>\n <meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\">\n <meta name=\"viewport\"\n content=\"width=device-width, initial-scale=1, maximum-scale=1\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=Edge\">\n <link rel=\"stylesheet\" \n href=\"https://houtai.baidu.com/v2/csssdk\">\n <style>\n html, body, .app-wrapper {\n position: relative;\n width: 100%;\n height: 100%;\n margin: 0;\n padding: 0;\n }\n </style>\n</head>\n<body>\n <div id=\"root\" class=\"app-wrapper\"></div>\n <script src=\"https://houtai.baidu.com/v2/jssdk\"></script>\n <script type=\"text/javascript\">\n (function() {\n var amis = amisRequire('amis/embed');\n amis.embed('#root', {\n type: 'page',\n title: 'AMIS Demo',\n body: 'hello world'\n });\n })();\n </script>\n</body>\n</html>\n
\n
amis 中有大量的功能类 class 可以使用,即可以用在 schema 中,也可以用在自定义组件开发中,掌握这些 class, 几乎可以不用写样式。
\namis 中的样式基于 BootStrap V3, 这里主要讲 Bootstrap 中没有涉及到的。
\namis 集成了 fontawesome,所以关于图标部分,请前往 fontawesome 查看。
\n水平布局可以考虑用 Bootstrap 的 Grids 或者用 hobx
加 col
<div class=\"hbox b-a\">\n <div class=\"col wrapper-sm bg-success\">Col A</div>\n <div class=\"col wrapper-sm bg-info\">Col B</div>\n <div class=\"col wrapper-sm bg-danger\">Col C</div>\n</div>\n
\n.w-1x { width: 1em; }\n.w-2x { width: 2em; }\n.w-3x { width: 3em; }\n.w-xxs { width: 60px; }\n.w-xs { width: 90px; }\n.w-sm { width: 150px; }\n.w { width: 200px; }\n.w-md { width: 240px; }\n.w-lg { width: 280px; }\n.w-xl { width: 320px; }\n.w-xxl { width: 360px; }\n.w-full { width: 100%; }\n.w-auto { width: auto; }\n.h-auto { height: auto; }\n.h-full { height: 100% ; max-height: none ; }\n
\n<div class=\"hbox b-a bg-primary\">\n <div class=\"col wrapper-sm b-r w-1x\">w-1x</div>\n <div class=\"col wrapper-sm b-r w-2x\">w-2x</div>\n <div class=\"col wrapper-sm b-r w-3x\">w-3x</div>\n <div class=\"col wrapper-sm b-r w-xxs\">w-xxs</div>\n <div class=\"col wrapper-sm b-r w-xs\">w-xs</div>\n <div class=\"col wrapper-sm b-r w-sm\">w-sm</div>\n <div class=\"col wrapper-sm b-r w\">w</div>\n <div class=\"col wrapper-sm lter\">...</div>\n</div>\n<div class=\"hbox b-a bg-primary m-t\">\n <div class=\"col wrapper-sm b-r w-md\">w-md</div>\n <div class=\"col wrapper-sm b-r w-lg\">w-lg</div>\n <div class=\"col wrapper-sm b-r w-xl\">w-xl</div>\n <div class=\"col wrapper-sm lter\">...</div>\n</div>\n<div class=\"hbox b-a bg-primary m-t\">\n <div class=\"col wrapper-sm b-r w-xxl\">w-xxl</div>\n <div class=\"col wrapper-sm lter\">...</div>\n</div>\n
\n.m-xxs { margin: 2px 4px }\n.m-xs { margin: 5px; }\n.m-sm { margin: 10px; }\n.m { margin: 15px; }\n.m-md { margin: 20px; }\n.m-lg { margin: 30px; }\n.m-xl { margin: 50px; }\n.m-n { margin: 0 }\n.m-l-none { margin-left: 0 }\n.m-l-xs { margin-left: 5px; }\n.m-l-sm { margin-left: 10px; }\n.m-l { margin-left: 15px }\n.m-l-md { margin-left: 20px; }\n.m-l-lg { margin-left: 30px; }\n.m-l-xl { margin-left: 40px; }\n.m-l-xxl { margin-left: 50px; }\n.m-l-n-xxs { margin-left: -1px }\n.m-l-n-xs { margin-left: -5px }\n.m-l-n-sm { margin-left: -10px }\n.m-l-n { margin-left: -15px }\n.m-l-n-md { margin-left: -20px }\n.m-l-n-lg { margin-left: -30px }\n.m-l-n-xl { margin-left: -40px }\n.m-l-n-xxl { margin-left: -50px }\n.m-t-none { margin-top: 0 }\n.m-t-xxs { margin-top: 1px; }\n.m-t-xs { margin-top: 5px; }\n.m-t-sm { margin-top: 10px; }\n.m-t { margin-top: 15px }\n.m-t-md { margin-top: 20px; }\n.m-t-lg { margin-top: 30px; }\n.m-t-xl { margin-top: 40px; }\n.m-t-xxl { margin-top: 50px; }\n.m-t-n-xxs { margin-top: -1px }\n.m-t-n-xs { margin-top: -5px }\n.m-t-n-sm { margin-top: -10px }\n.m-t-n { margin-top: -15px }\n.m-t-n-md { margin-top: -20px }\n.m-t-n-lg { margin-top: -30px }\n.m-t-n-xl { margin-top: -40px }\n.m-t-n-xxl { margin-top: -50px }\n.m-r-none { margin-right: 0 }\n.m-r-xxs { margin-right: 1px }\n.m-r-xs { margin-right: 5px }\n.m-r-sm { margin-right: 10px }\n.m-r { margin-right: 15px }\n.m-r-md { margin-right: 20px }\n.m-r-lg { margin-right: 30px }\n.m-r-xl { margin-right: 40px }\n.m-r-xxl { margin-right: 50px }\n.m-r-n-xxs { margin-right: -1px }\n.m-r-n-xs { margin-right: -5px }\n.m-r-n-sm { margin-right: -10px }\n.m-r-n { margin-right: -15px }\n.m-r-n-md { margin-right: -20px }\n.m-r-n-lg { margin-right: -30px }\n.m-r-n-xl { margin-right: -40px }\n.m-r-n-xxl { margin-right: -50px }\n.m-b-none { margin-bottom: 0 }\n.m-b-xxs { margin-bottom: 1px; }\n.m-b-xs { margin-bottom: 5px; }\n.m-b-sm { margin-bottom: 10px; }\n.m-b { margin-bottom: 15px; }\n.m-b-md { margin-bottom: 20px; }\n.m-b-lg { margin-bottom: 30px; }\n.m-b-xl { margin-bottom: 40px; }\n.m-b-xxl { margin-bottom: 50px; }\n.m-b-n-xxs { margin-bottom: -1px }\n.m-b-n-xs { margin-bottom: -5px }\n.m-b-n-sm { margin-bottom: -10px }\n.m-b-n { margin-bottom: -15px }\n.m-b-n-md { margin-bottom: -20px }\n.m-b-n-lg { margin-bottom: -30px }\n.m-b-n-xl { margin-bottom: -40px }\n.m-b-n-xxl { margin-bottom: -50px }\n
\n.wrapper-xs { padding: 5px; }\n.wrapper-sm { padding: 10px; }\n.wrapper { padding: 15px; }\n.wrapper-md { padding: 20px; }\n.wrapper-lg { padding: 30px; }\n.wrapper-xl { padding: 50px; }\n.padder-xs { padding-left: 5px; padding-right: 5px }\n.padder-sm { padding-left: 10px; padding-right: 10px }\n.padder-lg { padding-left: 30px; padding-right: 30px }\n.padder-md { padding-left: 20px; padding-right: 20px }\n.padder { padding-left: 15px; padding-right: 15px }\n.padder-v-xs { padding-top: 5px; padding-bottom: 5px }\n.padder-v-sm { padding-top: 10px; padding-bottom: 10px }\n.padder-v-lg { padding-top: 30px; padding-bottom: 30px }\n.padder-v-md { padding-top: 20px; padding-bottom: 20px }\n.padder-v { padding-top: 15px; padding-bottom: 15px }\n.no-padder { padding: 0 ; }\n.pull-in { margin-left: -15px; margin-right: -15px; }\n.pull-out { margin: -10px -15px; }\n
\n.b { border: 1px solid rgba(0, 0, 0, 0.05) }\n.b-a { border: 1px solid @border-color }\n.b-t { border-top: 1px solid @border-color }\n.b-r { border-right: 1px solid @border-color }\n.b-b { border-bottom: 1px solid @border-color }\n.b-l { border-left: 1px solid @border-color }\n.b-light { border-color: @brand-light }\n.b-dark { border-color: @brand-dark }\n.b-black { border-color: @brand-dark }\n.b-primary { border-color: @brand-primary }\n.b-success { border-color: @brand-success }\n.b-info { border-color: @brand-info }\n.b-warning { border-color: @brand-warning }\n.b-danger { border-color: @brand-danger }\n.b-white { border-color: #fff }\n.b-dashed { border-style: dashed ; }\n.b-l-light { border-left-color: @brand-light }\n.b-l-dark { border-left-color: @brand-dark }\n.b-l-black { border-left-color: @brand-dark }\n.b-l-primary { border-left-color: @brand-primary }\n.b-l-success { border-left-color: @brand-success }\n.b-l-info { border-left-color: @brand-info }\n.b-l-warning { border-left-color: @brand-warning }\n.b-l-danger { border-left-color: @brand-danger }\n.b-l-white { border-left-color: #fff }\n.b-l-2x { border-left-width: 2px }\n.b-l-3x { border-left-width: 3px }\n.b-l-4x { border-left-width: 4px }\n.b-l-5x { border-left-width: 5px }\n.b-2x { border-width: 2px }\n.b-3x { border-width: 3px }\n.b-4x { border-width: 4px }\n.b-5x { border-width: 5px }\n
\n.r { border-radius: @border-radius-base @border-radius-base @border-radius-base @border-radius-base; }\n.r-2x { border-radius: @border-radius-base * 2; }\n.r-3x { border-radius: @border-radius-base * 3; }\n.r-l { border-radius: @border-radius-base 0 0 @border-radius-base; }\n.r-r { border-radius: 0 @border-radius-base @border-radius-base 0; }\n.r-t { border-radius: @border-radius-base @border-radius-base 0 0; }\n.r-b { border-radius: 0 0 @border-radius-base @border-radius-base; }\n
\n.font-normal { font-weight: normal; }\n.font-thin { font-weight: 300; }\n.font-bold { font-weight: 700; }\n.text-3x { font-size: 3em; }\n.text-2x { font-size: 2em; }\n.text-lg { font-size: @font-size-lg; }\n.text-md { font-size: @font-size-md; }\n.text-base { font-size: @font-size-base; }\n.text-sm { font-size: @font-size-sm; }\n.text-xs { font-size: @font-size-xs; }\n.text-xxs { text-indent: -9999px }\n.text-ellipsis { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.text-u-c { text-transform: uppercase; }\n.text-l-t { text-decoration: line-through; }\n.text-u-l { text-decoration: underline; }\n
\n.pos-rlt { position: relative; }\n.pos-stc { position: static ; }\n.pos-abt { position: absolute; }\n.pos-fix { position: fixed; }\n
\n<div class=\"hbox b-a bg-light\">\n <div class=\"col wrapper-sm b-r bg-white\">bg-white</div>\n <div class=\"col wrapper-sm b-r bg-dark\">bg-dark</div>\n <div class=\"col wrapper-sm b-r bg-info\">bg-info</div>\n <div class=\"col wrapper-sm b-r bg-success\">bg-sucess</div>\n <div class=\"col wrapper-sm b-r bg-warning\">bg-warning</div>\n <div class=\"col wrapper-sm b-r bg-danger\">bg-danger</div>\n <div class=\"col wrapper-sm bg-primary\">bg-primary</div>\n</div>\n
\n.show { visibility: visible; }\n.line { *width: 100%; height: 2px; margin: 10px 0; font-size: 0; overflow: hidden; background-color: transparent; border-width: 0; border-top: 1px solid @border-color; }\n.line-xs { margin: 0 }\n.line-lg { margin-top: 15px; margin-bottom: 15px }\n.line-dashed { border-style: dashed; background: transparent; }\n.no-line { border-width: 0 }\n.no-border, .no-borders { border-color: transparent; border-width: 0 }\n.no-radius { border-radius: 0 }\n.block { display: block; }\n.block.hide { display: none; }\n.inline { display: inline-block !important; }\n.none { display: none; }\n.pull-none { float: none; }\n.rounded { border-radius: 500px; }\n.clear { display: block; overflow: hidden; }\n.no-bg { background-color: transparent; color: inherit; }\n.no-select { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }\n
\n\n\namis 中有大量的功能类 class 可以使用,即可以用在 schema 中,也可以用在自定义组件开发中,掌握这些 class, 几乎可以不用写样式。
\namis 中的样式基于 BootStrap V3, 这里主要讲 Bootstrap 中没有涉及到的。
\namis 集成了 fontawesome,所以关于图标部分,请前往 fontawesome 查看。
\n水平布局可以考虑用 Bootstrap 的 Grids 或者用 hobx
加 col
<div class=\"hbox b-a\">\n <div class=\"col wrapper-sm bg-success\">Col A</div>\n <div class=\"col wrapper-sm bg-info\">Col B</div>\n <div class=\"col wrapper-sm bg-danger\">Col C</div>\n</div>\n
.w-1x { width: 1em; }\n.w-2x { width: 2em; }\n.w-3x { width: 3em; }\n.w-xxs { width: 60px; }\n.w-xs { width: 90px; }\n.w-sm { width: 150px; }\n.w { width: 200px; }\n.w-md { width: 240px; }\n.w-lg { width: 280px; }\n.w-xl { width: 320px; }\n.w-xxl { width: 360px; }\n.w-full { width: 100%; }\n.w-auto { width: auto; }\n.h-auto { height: auto; }\n.h-full { height: 100% ; max-height: none ; }\n
\n<div class=\"hbox b-a bg-primary\">\n <div class=\"col wrapper-sm b-r w-1x\">w-1x</div>\n <div class=\"col wrapper-sm b-r w-2x\">w-2x</div>\n <div class=\"col wrapper-sm b-r w-3x\">w-3x</div>\n <div class=\"col wrapper-sm b-r w-xxs\">w-xxs</div>\n <div class=\"col wrapper-sm b-r w-xs\">w-xs</div>\n <div class=\"col wrapper-sm b-r w-sm\">w-sm</div>\n <div class=\"col wrapper-sm b-r w\">w</div>\n <div class=\"col wrapper-sm lter\">...</div>\n</div>\n<div class=\"hbox b-a bg-primary m-t\">\n <div class=\"col wrapper-sm b-r w-md\">w-md</div>\n <div class=\"col wrapper-sm b-r w-lg\">w-lg</div>\n <div class=\"col wrapper-sm b-r w-xl\">w-xl</div>\n <div class=\"col wrapper-sm lter\">...</div>\n</div>\n<div class=\"hbox b-a bg-primary m-t\">\n <div class=\"col wrapper-sm b-r w-xxl\">w-xxl</div>\n <div class=\"col wrapper-sm lter\">...</div>\n</div>\n
.m-xxs { margin: 2px 4px }\n.m-xs { margin: 5px; }\n.m-sm { margin: 10px; }\n.m { margin: 15px; }\n.m-md { margin: 20px; }\n.m-lg { margin: 30px; }\n.m-xl { margin: 50px; }\n.m-n { margin: 0 }\n.m-l-none { margin-left: 0 }\n.m-l-xs { margin-left: 5px; }\n.m-l-sm { margin-left: 10px; }\n.m-l { margin-left: 15px }\n.m-l-md { margin-left: 20px; }\n.m-l-lg { margin-left: 30px; }\n.m-l-xl { margin-left: 40px; }\n.m-l-xxl { margin-left: 50px; }\n.m-l-n-xxs { margin-left: -1px }\n.m-l-n-xs { margin-left: -5px }\n.m-l-n-sm { margin-left: -10px }\n.m-l-n { margin-left: -15px }\n.m-l-n-md { margin-left: -20px }\n.m-l-n-lg { margin-left: -30px }\n.m-l-n-xl { margin-left: -40px }\n.m-l-n-xxl { margin-left: -50px }\n.m-t-none { margin-top: 0 }\n.m-t-xxs { margin-top: 1px; }\n.m-t-xs { margin-top: 5px; }\n.m-t-sm { margin-top: 10px; }\n.m-t { margin-top: 15px }\n.m-t-md { margin-top: 20px; }\n.m-t-lg { margin-top: 30px; }\n.m-t-xl { margin-top: 40px; }\n.m-t-xxl { margin-top: 50px; }\n.m-t-n-xxs { margin-top: -1px }\n.m-t-n-xs { margin-top: -5px }\n.m-t-n-sm { margin-top: -10px }\n.m-t-n { margin-top: -15px }\n.m-t-n-md { margin-top: -20px }\n.m-t-n-lg { margin-top: -30px }\n.m-t-n-xl { margin-top: -40px }\n.m-t-n-xxl { margin-top: -50px }\n.m-r-none { margin-right: 0 }\n.m-r-xxs { margin-right: 1px }\n.m-r-xs { margin-right: 5px }\n.m-r-sm { margin-right: 10px }\n.m-r { margin-right: 15px }\n.m-r-md { margin-right: 20px }\n.m-r-lg { margin-right: 30px }\n.m-r-xl { margin-right: 40px }\n.m-r-xxl { margin-right: 50px }\n.m-r-n-xxs { margin-right: -1px }\n.m-r-n-xs { margin-right: -5px }\n.m-r-n-sm { margin-right: -10px }\n.m-r-n { margin-right: -15px }\n.m-r-n-md { margin-right: -20px }\n.m-r-n-lg { margin-right: -30px }\n.m-r-n-xl { margin-right: -40px }\n.m-r-n-xxl { margin-right: -50px }\n.m-b-none { margin-bottom: 0 }\n.m-b-xxs { margin-bottom: 1px; }\n.m-b-xs { margin-bottom: 5px; }\n.m-b-sm { margin-bottom: 10px; }\n.m-b { margin-bottom: 15px; }\n.m-b-md { margin-bottom: 20px; }\n.m-b-lg { margin-bottom: 30px; }\n.m-b-xl { margin-bottom: 40px; }\n.m-b-xxl { margin-bottom: 50px; }\n.m-b-n-xxs { margin-bottom: -1px }\n.m-b-n-xs { margin-bottom: -5px }\n.m-b-n-sm { margin-bottom: -10px }\n.m-b-n { margin-bottom: -15px }\n.m-b-n-md { margin-bottom: -20px }\n.m-b-n-lg { margin-bottom: -30px }\n.m-b-n-xl { margin-bottom: -40px }\n.m-b-n-xxl { margin-bottom: -50px }\n
\n.wrapper-xs { padding: 5px; }\n.wrapper-sm { padding: 10px; }\n.wrapper { padding: 15px; }\n.wrapper-md { padding: 20px; }\n.wrapper-lg { padding: 30px; }\n.wrapper-xl { padding: 50px; }\n.padder-xs { padding-left: 5px; padding-right: 5px }\n.padder-sm { padding-left: 10px; padding-right: 10px }\n.padder-lg { padding-left: 30px; padding-right: 30px }\n.padder-md { padding-left: 20px; padding-right: 20px }\n.padder { padding-left: 15px; padding-right: 15px }\n.padder-v-xs { padding-top: 5px; padding-bottom: 5px }\n.padder-v-sm { padding-top: 10px; padding-bottom: 10px }\n.padder-v-lg { padding-top: 30px; padding-bottom: 30px }\n.padder-v-md { padding-top: 20px; padding-bottom: 20px }\n.padder-v { padding-top: 15px; padding-bottom: 15px }\n.no-padder { padding: 0 ; }\n.pull-in { margin-left: -15px; margin-right: -15px; }\n.pull-out { margin: -10px -15px; }\n
\n.b { border: 1px solid rgba(0, 0, 0, 0.05) }\n.b-a { border: 1px solid @border-color }\n.b-t { border-top: 1px solid @border-color }\n.b-r { border-right: 1px solid @border-color }\n.b-b { border-bottom: 1px solid @border-color }\n.b-l { border-left: 1px solid @border-color }\n.b-light { border-color: @brand-light }\n.b-dark { border-color: @brand-dark }\n.b-black { border-color: @brand-dark }\n.b-primary { border-color: @brand-primary }\n.b-success { border-color: @brand-success }\n.b-info { border-color: @brand-info }\n.b-warning { border-color: @brand-warning }\n.b-danger { border-color: @brand-danger }\n.b-white { border-color: #fff }\n.b-dashed { border-style: dashed ; }\n.b-l-light { border-left-color: @brand-light }\n.b-l-dark { border-left-color: @brand-dark }\n.b-l-black { border-left-color: @brand-dark }\n.b-l-primary { border-left-color: @brand-primary }\n.b-l-success { border-left-color: @brand-success }\n.b-l-info { border-left-color: @brand-info }\n.b-l-warning { border-left-color: @brand-warning }\n.b-l-danger { border-left-color: @brand-danger }\n.b-l-white { border-left-color: #fff }\n.b-l-2x { border-left-width: 2px }\n.b-l-3x { border-left-width: 3px }\n.b-l-4x { border-left-width: 4px }\n.b-l-5x { border-left-width: 5px }\n.b-2x { border-width: 2px }\n.b-3x { border-width: 3px }\n.b-4x { border-width: 4px }\n.b-5x { border-width: 5px }\n
\n.r { border-radius: @border-radius-base @border-radius-base @border-radius-base @border-radius-base; }\n.r-2x { border-radius: @border-radius-base * 2; }\n.r-3x { border-radius: @border-radius-base * 3; }\n.r-l { border-radius: @border-radius-base 0 0 @border-radius-base; }\n.r-r { border-radius: 0 @border-radius-base @border-radius-base 0; }\n.r-t { border-radius: @border-radius-base @border-radius-base 0 0; }\n.r-b { border-radius: 0 0 @border-radius-base @border-radius-base; }\n
\n.font-normal { font-weight: normal; }\n.font-thin { font-weight: 300; }\n.font-bold { font-weight: 700; }\n.text-3x { font-size: 3em; }\n.text-2x { font-size: 2em; }\n.text-lg { font-size: @font-size-lg; }\n.text-md { font-size: @font-size-md; }\n.text-base { font-size: @font-size-base; }\n.text-sm { font-size: @font-size-sm; }\n.text-xs { font-size: @font-size-xs; }\n.text-xxs { text-indent: -9999px }\n.text-ellipsis { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.text-u-c { text-transform: uppercase; }\n.text-l-t { text-decoration: line-through; }\n.text-u-l { text-decoration: underline; }\n
\n.pos-rlt { position: relative; }\n.pos-stc { position: static ; }\n.pos-abt { position: absolute; }\n.pos-fix { position: fixed; }\n
\n<div class=\"hbox b-a bg-light\">\n <div class=\"col wrapper-sm b-r bg-white\">bg-white</div>\n <div class=\"col wrapper-sm b-r bg-dark\">bg-dark</div>\n <div class=\"col wrapper-sm b-r bg-info\">bg-info</div>\n <div class=\"col wrapper-sm b-r bg-success\">bg-sucess</div>\n <div class=\"col wrapper-sm b-r bg-warning\">bg-warning</div>\n <div class=\"col wrapper-sm b-r bg-danger\">bg-danger</div>\n <div class=\"col wrapper-sm bg-primary\">bg-primary</div>\n</div>\n
.show { visibility: visible; }\n.line { *width: 100%; height: 2px; margin: 10px 0; font-size: 0; overflow: hidden; background-color: transparent; border-width: 0; border-top: 1px solid @border-color; }\n.line-xs { margin: 0 }\n.line-lg { margin-top: 15px; margin-bottom: 15px }\n.line-dashed { border-style: dashed; background: transparent; }\n.no-line { border-width: 0 }\n.no-border, .no-borders { border-color: transparent; border-width: 0 }\n.no-radius { border-radius: 0 }\n.block { display: block; }\n.block.hide { display: none; }\n.inline { display: inline-block !important; }\n.none { display: none; }\n.pull-none { float: none; }\n.rounded { border-radius: 500px; }\n.clear { display: block; overflow: hidden; }\n.no-bg { background-color: transparent; color: inherit; }\n.no-select { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }\n
\n\n\n