开源项目 paper-date-picker
使用教程
1. 项目的目录结构及介绍
paper-date-picker/
├── demo/
│ ├── index.html
│ └── styles.css
├── src/
│ ├── paper-date-picker.js
│ ├── paper-date-picker-dialog.js
│ └── paper-date-picker-styles.js
├── test/
│ ├── index.html
│ └── test-suite.js
├── .gitignore
├── .travis.yml
├── bower.json
├── LICENSE
├── README.md
└── wct.conf.json
demo/
: 包含项目的演示文件,如index.html
和styles.css
。src/
: 包含项目的主要源代码文件,如paper-date-picker.js
和paper-date-picker-dialog.js
。test/
: 包含项目的测试文件,如index.html
和test-suite.js
。.gitignore
: 指定 Git 版本控制系统忽略的文件和目录。.travis.yml
: Travis CI 的配置文件。bower.json
: Bower 包管理器的配置文件。LICENSE
: 项目的许可证文件。README.md
: 项目的说明文档。wct.conf.json
: Web Component Tester 的配置文件。
2. 项目的启动文件介绍
项目的启动文件主要是 demo/index.html
,它包含了项目的演示页面。以下是 demo/index.html
的主要内容:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>paper-date-picker Demo</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<paper-date-picker></paper-date-picker>
<script src="../bower_components/webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="../src/paper-date-picker.js">
</body>
</html>
<paper-date-picker></paper-date-picker>
: 定义了一个日期选择器组件。<script src="../bower_components/webcomponentsjs/webcomponents-lite.js"></script>
: 引入 Web Components 的 polyfill。<link rel="import" href="../src/paper-date-picker.js">
: 引入主要的日期选择器组件。
3. 项目的配置文件介绍
bower.json
bower.json
是 Bower 包管理器的配置文件,定义了项目的依赖和其他元数据。以下是 bower.json
的主要内容:
{
"name": "paper-date-picker",
"version": "1.2.3",
"description": "A Material Design date picker",
"authors": [
"Ben Davis <bendavis78@gmail.com>"
],
"keywords": [
"web-components",
"polymer",
"date",
"picker"
],
"main": "paper-date-picker.js",
"dependencies": {
"polymer": "Polymer/polymer#^2.0.0",
"iron-icon": "PolymerElements/iron-icon#^2.0.0",
"iron-iconset-svg": "PolymerElements/iron-iconset-svg#^2.0.0",
"paper-styles": "PolymerElements/paper-styles#^2.0.0"
},
"devDependencies": {
"web-component-tester": "^6.0.0",
"webcomponentsjs": "webcomponents/webcomponentsjs#^1.0.0"
}
}
name
: 项目的名称。version
: 项目的版本号。description
: 项目的描述。authors
: 项目的作者。keywords
: 项目的关键词。main
: 项目的主文件。dependencies
: 项目的依赖包。devDependencies
: 项目的开发依赖包。
.travis.yml
.travis.yml
是 Travis CI 的配置文件,定义了持续集成的环境和任务。以下是 `.