一个纯 CSS 界面框架
简约现代风格;移动优先响应式。
一个 UI 组件库
细致交互效果;深入业务需求。
一个纯 JS 函数库
妈妈再也不担心我找不到代码复制了。
一个 WEBAPP 开发框架
体验趋于原生;最少代码完成最多业务。
一套前端开发规范
高效编码模型;构造大型项目。
一个前端集成解决方案
打包压缩;模块依赖;文档测试;团队协作。
TealUI 多数组件能独立使用,复制源码是最快的使用方式。
友情提示
右击文档页面查看源文件可找到源码;复制源码时请同时复制注释。
和传统框架不同,TealUI 是一个大型的代码库,所有源码体积超过 10M。因此我们建议您单独使用每个组件,点击每个组件页面右上角的“下载此组件”,即可下载组件所需的所有源码。
在下载和定制可以选择所需组件并打包下载,此工具也可在本地运行。
点此下载整个项目。项目结构为:
TealUI/ ├── assets/ 存放项目所需工具。 ├── dist/ 存放预生成的可直接引用的代码。 │ ├── images/ │ └── fonts/ ├── src/ 存放所有组件源码和文档。 └── docs/ 存放教程。
使用 GIT
使用命令git clone https://github.com/Teal/TealUI.git
下载项目。或 点此 Fork Git 项目。
使用 NPM
使用命令npm install TealUI
安装项目。
TealUI 拥有独创的模块化方式,只需一行代码即可加载所需模块及依赖性。点此了解更多
<script type="text/javascript" src="boot.js?utility/dom/base,utility/dom/keyNav"></script>
直接引用项目 dist
文件夹下 teal-all-debug.js
和 teal-all-debug.css
即可使用所有组件。
为团队定制一套自己的 UI 组件库和框架集。点此了解更多
将以下代码存为 test.html
,将任意组件的示例复制到 <body>
,在浏览器打开即可见到效果。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <title>标题</title> <link rel="stylesheet" type="text/css" href="http://teal.github.io/TealUI/dist/teal-ui.css" /> <script type="text/javascript" src="http://teal.github.io/TealUI/dist/teal-ui.js"></script> </head> <body> Hello world </body> </html>
TealUI 使用到的某些 HTML 元素和 CSS 属性需要将页面设置为 HTML5 文档类型。项目中每个页面都要参照下面的格式进行设置。
<!DOCTYPE html> <html lang="zh-CN"> ... </html>
TealUI 是移动设备优先的。所有样式优先考虑手机使用,并为电脑增加补充代码。
为了确保适当的绘制和触屏缩放,需要在 <head>
之中添加 viewport 元数据标签。
<meta name="viewport" content="width=device-width, initial-scale=1">
如果希望网站能完全模拟原生 APP 体验,禁止用户放大缩小网页,可改为如下代码:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">