{"id":19990073,"url":"https://github.com/fbchen/fire-ant","last_synced_at":"2025-07-04T10:02:39.944Z","repository":{"id":57236524,"uuid":"95464210","full_name":"fbchen/fire-ant","owner":"fbchen","description":"火蚁(项目源码) ，在线例子：","archived":false,"fork":false,"pushed_at":"2018-08-02T08:26:30.000Z","size":480,"stargazers_count":42,"open_issues_count":0,"forks_count":6,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-05-13T14:21:18.424Z","etag":null,"topics":["angular4","ant-design","fire-ant","webapp"],"latest_commit_sha":null,"homepage":"https://fbchen.github.io/fire-ant/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/fbchen.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":".github/CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-06-26T15:58:45.000Z","updated_at":"2022-05-15T15:24:03.000Z","dependencies_parsed_at":"2022-08-23T15:50:45.464Z","dependency_job_id":null,"html_url":"https://github.com/fbchen/fire-ant","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/fbchen/fire-ant","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fbchen%2Ffire-ant","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fbchen%2Ffire-ant/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fbchen%2Ffire-ant/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fbchen%2Ffire-ant/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/fbchen","download_url":"https://codeload.github.com/fbchen/fire-ant/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fbchen%2Ffire-ant/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":262388993,"owners_count":23303331,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular4","ant-design","fire-ant","webapp"],"created_at":"2024-11-13T04:50:57.432Z","updated_at":"2025-07-04T10:02:39.890Z","avatar_url":"https://github.com/fbchen.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"# Fire-Ant\nFire-Ant 是Ant-Design框架的Angular(4.*)实现的，可用作PC Web应用开发的UI框架。\n\nFire-Ant 是在参考Ant-Design的源码基础上，采用了更加简洁的实现，此外，在css格式上采用Sass代替了Less。封装后的组件更加灵活方便，使开发人员可以更加专注于业务的实现，可以极大减少前端开发时间。\n\nFireAnt的中文名为“火蚁”，火蚁是蚂蚁团体的巧手匠，它们以在水中筑筏而著称，在影片《蚁人》中蚁人利用一个蚁筏通过了下水道。希望FireAnt能为前端开发人员和创业者们逢山开路、遇水搭桥，勇往直前。\n\n- [Ant-Design](https://ant.design/index-cn) 由阿里巴巴的蚂蚁金服体验技术部出品，提供了丰富、灵活、实用的基础组件，基于React技术实现，对于喜欢Angular的童鞋来说，Fire-Ant无疑是一个值得选择的开发框架。\n\n- [Angular](https://github.com/angular/angular) is a development platform for building mobile and desktop web applications using Typescript/JavaScript (JS) and other languages.\n\n\n## Components\n\n* Genernel\n\u003ctable\u003e\n    \u003cthead\u003e\n        \u003ctr\u003e\n            \u003cth\u003e组件\u003c/th\u003e\n            \u003cth\u003e标签\u003c/th\u003e\n            \u003cth\u003e进度\u003c/th\u003e\n        \u003c/tr\u003e\n    \u003c/thead\u003e\n    \u003ctbody\u003e\n        \u003ctr\u003e\n            \u003ctd\u003eButton 按钮\u003c/td\u003e\n            \u003ctd\u003e\u0026lt;ant-button\u0026gt;\u003c/td\u003e\n            \u003ctd\u003e已完成 (Done)\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd\u003eIcon 图标\u003c/td\u003e\n            \u003ctd\u003e\u0026lt;ant-icon\u0026gt;\u003c/td\u003e\n            \u003ctd\u003e已完成 (Done)\u003c/td\u003e\n        \u003c/tr\u003e\n    \u003c/tbody\u003e\n\u003c/table\u003e\n\n\u003e Button 按钮：\n```html\n\u003cant-button type=\"primary\"\u003ePrimary\u003c/ant-button\u003e\n```\n\u003e Icon 图标：\n```html\n\u003cant-icon type=\"down\"\u003e\u003c/ant-icon\u003e\n```\n\n* Layout\n\u003ctable\u003e\n    \u003cthead\u003e\n        \u003ctr\u003e\n            \u003cth\u003e组件\u003c/th\u003e\n            \u003cth\u003e标签\u003c/th\u003e\n            \u003cth\u003e进度\u003c/th\u003e\n        \u003c/tr\u003e\n    \u003c/thead\u003e\n    \u003ctbody\u003e\n        \u003ctr\u003e\n            \u003ctd\u003eGrid 栅格 - Row\u003c/td\u003e\n            \u003ctd\u003e\u0026lt;ant-row\u0026gt;\u003c/td\u003e\n            \u003ctd\u003e已完成 (Done)\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd\u003eGrid 栅格 - Col\u003c/td\u003e\n            \u003ctd\u003e\u0026lt;ant-col\u0026gt;\u003c/td\u003e\n            \u003ctd\u003e已完成 (Done)\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd\u003eLayout 布局\u003c/td\u003e\n            \u003ctd\u003e\n                \u0026lt;ant-layout\u0026gt;\n            \u003c/td\u003e\n            \u003ctd\u003e已完成 (Done)\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd\u003eLayout 布局 - Header\u003c/td\u003e\n            \u003ctd\u003e\n                \u0026lt;ant-layout-header\u0026gt;\n            \u003c/td\u003e\n            \u003ctd\u003e已完成 (Done)\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd\u003eLayout 布局 - Content\u003c/td\u003e\n            \u003ctd\u003e\n                \u0026lt;ant-layout-content\u0026gt;\n            \u003c/td\u003e\n            \u003ctd\u003e已完成 (Done)\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd\u003eLayout 布局 - Footer\u003c/td\u003e\n            \u003ctd\u003e\n                \u0026lt;ant-layout-footer\u0026gt;\n            \u003c/td\u003e\n            \u003ctd\u003e已完成 (Done)\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd\u003eLayout 布局 - Sider\u003c/td\u003e\n            \u003ctd\u003e\n                \u0026lt;ant-layout-sider\u0026gt;\n            \u003c/td\u003e\n            \u003ctd\u003e已完成 (Done)\u003c/td\u003e\n        \u003c/tr\u003e\n    \u003c/tbody\u003e\n\u003c/table\u003e\n\n\u003e Grid 栅格：\n```html\n\u003cant-row\u003e\n    \u003cant-col [span]=\"12\"\u003ecol-12\u003c/ant-col\u003e\n    \u003cant-col [span]=\"12\"\u003ecol-12\u003c/ant-col\u003e\n\u003c/ant-row\u003e\n```\n\u003e Layout 布局：\n```html\n\u003cant-layout\u003e\n    \u003cant-layout-sider\u003eSider\u003c/ant-layout-sider\u003e\n    \u003cant-layout\u003e\n        \u003cant-layout-header\u003eHeader\u003c/ant-layout-header\u003e\n        \u003cant-layout-content\u003eContent\u003c/ant-layout-content\u003e\n        \u003cant-layout-footer\u003eFooter\u003c/ant-layout-footer\u003e\n    \u003c/ant-layout\u003e\n\u003c/ant-layout\u003e\n```\n\n* Navigation\n\u003ctable\u003e\n    \u003cthead\u003e\n        \u003ctr\u003e\n            \u003cth\u003e组件\u003c/th\u003e\n            \u003cth\u003e标签\u003c/th\u003e\n            \u003cth\u003e进度\u003c/th\u003e\n        \u003c/tr\u003e\n    \u003c/thead\u003e\n    \u003ctbody\u003e\n        \u003ctr\u003e\n            \u003ctd\u003eAffix 固钉\u003c/td\u003e\n            \u003ctd\u003e \u003c/td\u003e\n            \u003ctd\u003e待开发 (Pending)\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd\u003eBreadcrumb 面包屑\u003c/td\u003e\n            \u003ctd\u003e\u0026lt;ant-breadcrumb\u0026gt;\u003c/td\u003e\n            \u003ctd\u003e已完成 (Done)\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd\u003eBackTop 回到顶部\u003c/td\u003e\n            \u003ctd\u003e \u003c/td\u003e\n            \u003ctd\u003e待开发 (Pending)\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd\u003eDropdown 下拉菜单\u003c/td\u003e\n            \u003ctd\u003e\u0026lt;ant-dropdown-button\u0026gt;\u003c/td\u003e\n            \u003ctd\u003e已完成 (Done)\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd\u003eMenu 导航菜单\u003c/td\u003e\n            \u003ctd\u003e\u0026lt;ant-menu\u0026gt;\u003c/td\u003e\n            \u003ctd\u003e已完成 (Done)\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd\u003ePagination 分页\u003c/td\u003e\n            \u003ctd\u003e\u0026lt;ant-pagination\u0026gt;\u003c/td\u003e\n            \u003ctd\u003e已完成 (Done)\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd\u003eSteps 步骤条\u003c/td\u003e\n            \u003ctd\u003e\u0026lt;ant-steps\u0026gt;\u003c/td\u003e\n            \u003ctd\u003e已完成 (Done)\u003c/td\u003e\n        \u003c/tr\u003e\n    \u003c/tbody\u003e\n\u003c/table\u003e\n\n\u003e Breadcrumb 面包屑：\n```html\n\u003cant-breadcrumb\u003e\n      \u003cant-breadcrumb-item\u003eHome\u003c/ant-breadcrumb-item\u003e\n      \u003cant-breadcrumb-item\u003e\u003ca href=\"\"\u003eApplication Center\u003c/a\u003e\u003c/ant-breadcrumb-item\u003e\n      \u003cant-breadcrumb-item\u003e\u003ca href=\"\"\u003eApplication List\u003c/a\u003e\u003c/ant-breadcrumb-item\u003e\n      \u003cant-breadcrumb-item\u003eAn Application\u003c/ant-breadcrumb-item\u003e\n\u003c/ant-breadcrumb\u003e\n```\n\n\u003e Dropdown 下拉菜单：\n```html\n\u003cant-dropdown-button\u003e\n    \u003cant-button (click)=\"onButtonClick($event)\"\u003eDropdown\u003c/ant-button\u003e\n    \u003cant-menu (menuClick)=\"onMenuClick($event)\"\u003e\n        \u003cant-menu-item key=\"1\"\u003e1st menu item\u003c/ant-menu-item\u003e\n        \u003cant-menu-item key=\"2\"\u003e2nd memu item\u003c/ant-menu-item\u003e\n        \u003cant-menu-item key=\"3\"\u003e3d menu item\u003c/ant-menu-item\u003e\n    \u003c/ant-menu\u003e\n\u003c/ant-dropdown-button\u003e\n\n\u003ca class=\"dropdown-link\" href=\"javascript:;\" dropdown\u003e\n    Hover me \u003cant-icon type=\"down\"\u003e\u003c/ant-icon\u003e\n    \u003cant-menu\u003e\n        \u003cant-menu-item\u003e\n            \u003ca target=\"_blank\" rel=\"noopener noreferrer\" href=\"http://www.alipay.com/\"\u003e1st menu item\u003c/a\u003e\n        \u003c/ant-menu-item\u003e\n        \u003cant-menu-item\u003e\n            \u003ca target=\"_blank\" rel=\"noopener noreferrer\" href=\"http://www.taobao.com/\"\u003e2nd menu item\u003c/a\u003e\n        \u003c/ant-menu-item\u003e\n        \u003cant-menu-item\u003e\n            \u003ca target=\"_blank\" rel=\"noopener noreferrer\" href=\"http://www.tmall.com/\"\u003e3d menu item\u003c/a\u003e\n        \u003c/ant-menu-item\u003e\n    \u003c/ant-menu\u003e\n\u003c/a\u003e\n```\n\n\u003e Menu 导航菜单：\n```html\n\u003cant-submenu key=\"sub1\"\u003e\n    \u003cdiv ant-submenu-title\u003e\n        \u003cant-icon type=\"mail\"\u003e\u003c/ant-icon\u003e Menu One\n    \u003c/div\u003e\n    \u003cant-menu-item key=\"1\"\u003eOption 1\u003c/ant-menu-item\u003e\n    \u003cant-menu-item key=\"2\"\u003eOption 2\u003c/ant-menu-item\u003e\n    \u003cant-menu-item key=\"3\"\u003eOption 3\u003c/ant-menu-item\u003e\n    \u003cant-menu-item key=\"4\"\u003eOption 4\u003c/ant-menu-item\u003e\n    \u003c/ant-submenu\u003e\n    \u003cant-submenu key=\"sub2\"\u003e\n    \u003cdiv ant-submenu-title\u003e\n        \u003cant-icon type=\"appstore\"\u003e\u003c/ant-icon\u003e Menu Two\n    \u003c/div\u003e\n    \u003cant-menu-item key=\"5\"\u003eOption 5\u003c/ant-menu-item\u003e\n    \u003cant-menu-item key=\"6\"\u003eOption 6\u003c/ant-menu-item\u003e\n    \u003cant-submenu key=\"sub3\"\u003e\n        \u003cdiv ant-submenu-title\u003eSubmenu\u003c/div\u003e\n        \u003cant-menu-item key=\"7\"\u003eOption 7\u003c/ant-menu-item\u003e\n        \u003cant-menu-item key=\"8\"\u003eOption 8\u003c/ant-menu-item\u003e\n    \u003c/ant-submenu\u003e\n    \u003c/ant-submenu\u003e\n    \u003cant-submenu key=\"sub4\"\u003e\n    \u003cdiv ant-submenu-title\u003e\n        \u003cant-icon type=\"setting\"\u003e\u003c/ant-icon\u003e Menu Three\n    \u003c/div\u003e\n    \u003cant-menu-item key=\"9\"\u003eOption 9\u003c/ant-menu-item\u003e\n    \u003cant-menu-item key=\"10\"\u003eOption 10\u003c/ant-menu-item\u003e\n    \u003cant-menu-item key=\"11\"\u003eOption 11\u003c/ant-menu-item\u003e\n    \u003cant-menu-item key=\"12\"\u003eOption 12\u003c/ant-menu-item\u003e\n    \u003c/ant-submenu\u003e\n\u003c/ant-menu\u003e\n```\n\n\u003e Pagination 分页：\n```html\n\u003cant-pagination [current]=\"1\" [total]=\"50\" (pageChange)=\"onPageChange($event)\"\u003e\u003c/ant-pagination\u003e\n```\n\n\u003e Steps 步骤条：\n```html\n\u003cant-steps [current]=\"1\"\u003e\n    \u003cant-step nzTitle=\"Finished\" description=\"This is a description.\"\u003e\u003c/ant-step\u003e\n    \u003cant-step nzTitle=\"In Progress\" description=\"This is a description.\"\u003e\u003c/ant-step\u003e\n    \u003cant-step nzTitle=\"Waiting\" description=\"This is a description.\"\u003e\u003c/ant-step\u003e\n\u003c/ant-steps\u003e\n```\n\n* Data Entry\n\u003ctable\u003e\n    \u003cthead\u003e\n        \u003ctr\u003e\n            \u003cth\u003e组件\u003c/th\u003e\n            \u003cth\u003e标签\u003c/th\u003e\n            \u003cth\u003e进度\u003c/th\u003e\n        \u003c/tr\u003e\n    \u003c/thead\u003e\n    \u003ctbody\u003e\n        \u003ctr\u003e\n            \u003ctd\u003eAutoComplete 自动完成\u003c/td\u003e\n            \u003ctd\u003e \u003c/td\u003e\n            \u003ctd\u003e待开发 (Pending)\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd\u003eCheckbox 多选框\u003c/td\u003e\n            \u003ctd\u003e\u0026lt;ant-checkbox\u0026gt;\u003c/td\u003e\n            \u003ctd\u003e已完成 (Done)\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd\u003eCascader 级联选择\u003c/td\u003e\n            \u003ctd\u003e\u0026lt;ant-cascader\u0026gt;\u003c/td\u003e\n            \u003ctd\u003e已完成 (Done)\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd\u003eDatePicker 日期选择框\u003c/td\u003e\n            \u003ctd\u003e\u0026lt;ant-datepicker\u0026gt;\u003c/td\u003e\n            \u003ctd\u003e已完成 (Done)\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd\u003eMonthPicker 月份选择框\u003c/td\u003e\n            \u003ctd\u003e\u0026lt;ant-monthpicker\u0026gt;\u003c/td\u003e\n            \u003ctd\u003e已完成 (Done)\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd\u003eRangePicker 日期段选择框\u003c/td\u003e\n            \u003ctd\u003e\u0026lt;ant-rangepicker\u0026gt;\u003c/td\u003e\n            \u003ctd\u003e已完成 (Done)\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd\u003eForm 表单\u003c/td\u003e\n            \u003ctd\u003e\u0026lt;form\u0026gt;\u003c/td\u003e\n            \u003ctd\u003e已完成 (Done)\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd\u003eInputNumber 数字输入框\u003c/td\u003e\n            \u003ctd\u003e\u0026lt;ant-number\u0026gt;\u003c/td\u003e\n            \u003ctd\u003e已完成 (Done)\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd\u003eInput 输入框\u003c/td\u003e\n            \u003ctd\u003e\u0026lt;ant-input\u0026gt;\u003c/td\u003e\n            \u003ctd\u003e已完成 (Done)\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd\u003eMention 提及\u003c/td\u003e\n            \u003ctd\u003e \u003c/td\u003e\n            \u003ctd\u003e待开发 (Pending)\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd\u003eRate 评分\u003c/td\u003e\n            \u003ctd\u003e\u0026lt;ant-rate\u0026gt;\u003c/td\u003e\n            \u003ctd\u003e已完成 (Done)\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd\u003eRadio 单选框\u003c/td\u003e\n            \u003ctd\u003e\u0026lt;ant-radio\u0026gt;\u003c/td\u003e\n            \u003ctd\u003e已完成 (Done)\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd\u003eSwitch 开关\u003c/td\u003e\n            \u003ctd\u003e\u0026lt;ant-switch\u0026gt;\u003c/td\u003e\n            \u003ctd\u003e已完成 (Done)\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd\u003eSlider 滑动输入条\u003c/td\u003e\n            \u003ctd\u003e \u003c/td\u003e\n            \u003ctd\u003e待开发 (Pending)\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd\u003eSelect 选择器\u003c/td\u003e\n            \u003ctd\u003e\u0026lt;ant-select\u0026gt;\u003c/td\u003e\n            \u003ctd\u003e已完成 (Done)\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd\u003eTreeSelect 树选择\u003c/td\u003e\n            \u003ctd\u003e \u003c/td\u003e\n            \u003ctd\u003e待开发 (Pending)\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd\u003eTransfer 穿梭框\u003c/td\u003e\n            \u003ctd\u003e \u003c/td\u003e\n            \u003ctd\u003e待开发 (Pending)\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd\u003eTimePicker 时间选择框\u003c/td\u003e\n            \u003ctd\u003e\u0026lt;ant-timepicker\u0026gt;\u003c/td\u003e\n            \u003ctd\u003e已完成 (Done)\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd\u003eTimeSelect 时间选择框\u003c/td\u003e\n            \u003ctd\u003e\u0026lt;ant-time-select\u0026gt;\u003c/td\u003e\n            \u003ctd\u003e已完成 (Done)\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd\u003eUpload 上传\u003c/td\u003e\n            \u003ctd\u003e \u003c/td\u003e\n            \u003ctd\u003e待开发 (Pending)\u003c/td\u003e\n        \u003c/tr\u003e\n    \u003c/tbody\u003e\n\u003c/table\u003e\n\n\u003e Checkbox 多选框：\n```html\n\u003c!-- normal --\u003e\n\u003cant-checkbox value=\"open\" [checked]=\"true\"\u003eCheckbox\u003c/ant-checkbox\u003e\n\u003c!-- the checked state is controlled by ngModel --\u003e\n\u003cant-checkbox value=\"open\" uncheckedValue=\"off\" [(ngModel)]=\"example1.value\"\u003eCheckbox\u003c/ant-checkbox\u003e\n\u003c!-- group --\u003e\n\u003cant-checkbox-group [(ngModel)]=\"example4.group1\" (change)=\"onChange($event)\"\u003e\n    \u003cant-checkbox value=\"Apple\"\u003eApple\u003c/ant-checkbox\u003e\n    \u003cant-checkbox value=\"Pear\"\u003ePear\u003c/ant-checkbox\u003e\n    \u003cant-checkbox value=\"Orange\"\u003eOrange\u003c/ant-checkbox\u003e\n\u003c/ant-checkbox-group\u003e\n```\n\n\u003e Cascader 级联选择：\n```html\n\u003cant-cascader\n    [(ngModel)]=\"example1.value\"\n    [options]=\"options\" (change)=\"onChange($event)\" (select)=\"onSelect($event)\"\n    placeholder=\"Please select\"\u003e\u003c/ant-cascader\u003e\n```\n\n\u003e DatePicker 日期选择框：\n```html\n\u003clabel style=\"display: inline-block; width: 65px\"\u003e选择日期：\u003c/label\u003e\n\u003cant-datepicker\n    [(ngModel)]=\"example1.value1\" (change)=\"onChange($event)\"\u003e\n\u003c/ant-datepicker\u003e\n\n\u003clabel style=\"display: inline-block; width: 65px\"\u003e选择时间：\u003c/label\u003e\n\u003cant-datepicker\n    [(ngModel)]=\"example1.value3\"\n    [showTimePicker]=\"true\" (change)=\"onChange($event)\"\u003e\n\u003c/ant-datepicker\u003e\n```\n\n\u003e MonthPicker 月份选择框：\n```html\n\u003cant-monthpicker\n    [(ngModel)]=\"example1.value2\" (change)=\"onChange($event)\"\u003e\n\u003c/ant-monthpicker\u003e\n```\n\n\u003e RangePicker 日期段选择框：\n```html\n\u003clabel style=\"display: inline-block; width: 65px\"\u003e选择日期：\u003c/label\u003e\n\u003cant-rangepicker\n    [(ngModel)]=\"example1.value1\" (change)=\"onRangeChange($event)\"\u003e\n\u003c/ant-rangepicker\u003e\n\n\u003clabel style=\"display: inline-block; width: 65px\"\u003e选择时间：\u003c/label\u003e\n\u003cant-rangepicker\n    [showTimePicker]=\"true\"\n    [(ngModel)]=\"example1.value1\" (change)=\"onRangeChange($event)\"\u003e\n\u003c/ant-rangepicker\u003e\n```\n\n\u003e Form 表单：\n```html\n\u003cform #form1=\"ngForm\" #fireForm1=\"faForm\" layout=\"inline\" (ngSubmit)=\"handleSubmit(fireForm1)\" novalidate=\"\"\u003e\n    \u003cform-item\u003e\n        \u003cant-input placeholder=\"Username\" name=\"username\"\n            [(ngModel)]=\"example1.username\" [required]=\"true\"\u003e\n            \u003cinput-prefix style=\"font-size: 13px\"\u003e\n                \u003cant-icon type=\"user\"\u003e\u003c/ant-icon\u003e\n            \u003c/input-prefix\u003e\n        \u003c/ant-input\u003e\n    \u003c/form-item\u003e\n    \u003cform-item\u003e\n        \u003cant-input placeholder=\"Password\" name=\"password\" type=\"password\"\n            [(ngModel)]=\"example1.password\" [required]=\"true\"\u003e\n            \u003cinput-prefix style=\"font-size: 13px\"\u003e\n                \u003cant-icon type=\"lock\"\u003e\u003c/ant-icon\u003e\n            \u003c/input-prefix\u003e\n        \u003c/ant-input\u003e\n    \u003c/form-item\u003e\n    \u003cform-item\u003e\n        \u003cant-button type=\"primary\" htmlType=\"submit\" [disabled]=\"form1.invalid\"\u003e\n            Login\n        \u003c/ant-button\u003e\n    \u003c/form-item\u003e\n\u003c/form\u003e\n```\n\n```ts\npublic exampleMessages = {\n    username: { required: '用户名不能为空' },\n    password: { required: '密码不能为空' }\n};\n\npublic handleSubmit(form: FormDirective): void {\n    if (!form.validate(this.exampleMessages)) {\n        console.log('form is invalid...');\n    }\n}\n```\n\n\n\u003e InputNumber 数字输入框：\n```html\n\u003cant-number [min]=\"1\" [max]=\"10\" (change)=\"onChange($event)\"\n    [(ngModel)]=\"example1.value1\"\u003e\u003c/ant-number\u003e\n```\n\n\u003e Input 输入框：\n```html\n\u003cant-input placeholder=\"Basic usage\" [(ngModel)]=\"example1.value\"\u003e\u003c/ant-input\u003e\n\n\u003cant-addon style=\"margin-bottom: 16px\"\u003e\n    \u003cng-template #before\u003ehttp://\u003c/ng-template\u003e\n    \u003cng-template #after\u003e.com\u003c/ng-template\u003e\n    \u003cant-input [(ngModel)]=\"example2.value1\"\u003e\u003c/ant-input\u003e\n\u003c/ant-addon\u003e\n\n\u003cant-input placeholder=\"Enter your userName\" [(ngModel)]=\"example5.username\"\u003e\n    \u003cinput-prefix\u003e\n        \u003cant-icon type=\"user\"\u003e\u003c/ant-icon\u003e\n    \u003c/input-prefix\u003e\n    \u003cinput-suffix\u003e\n        \u003cant-icon type=\"close-circle\"\u003e\u003c/ant-icon\u003e\n    \u003c/input-suffix\u003e\n\u003c/ant-input\u003e\n\n\u003cant-input type=\"textarea\" [(ngModel)]=\"example4.value1\" placeholder=\"Autosize height based on content lines\" [autosize]=\"true\"\u003e\u003c/ant-input\u003e\n```\n\n\u003e Rate 评分：\n```html\n\u003cant-rate [(ngModel)]=\"example1.value1\"\u003e\u003c/ant-rate\u003e\n```\n\n\u003e Radio 单选框：\n```html\n\u003c!-- normal --\u003e\n\u003cant-radio value=\"open\" [checked]=\"true\"\u003eRadio\u003c/ant-radio\u003e\n\u003c!-- the checked state is controlled by ngModel --\u003e\n\u003cant-radio value=\"open\" uncheckedValue=\"off\" [(ngModel)]=\"example1.value\"\u003eRadio\u003c/ant-radio\u003e\n\u003c!-- group --\u003e\n\u003cant-radio-group [(ngModel)]=\"example3.group1\" (change)=\"onGroupChange($event)\"\u003e\n    \u003cant-radio value=\"1\"\u003eA\u003c/ant-radio\u003e\n    \u003cant-radio value=\"2\"\u003eB\u003c/ant-radio\u003e\n    \u003cant-radio value=\"3\"\u003eC\u003c/ant-radio\u003e\n    \u003cant-radio value=\"4\"\u003eD\u003c/ant-radio\u003e\n\u003c/ant-radio-group\u003e\n\n\u003cant-radio-group mode=\"button\" [(ngModel)]=\"example5.group1\" (change)=\"onGroupChange($event)\"\u003e\n    \u003cant-radio value=\"a\"\u003eHangzhou\u003c/ant-radio\u003e\n    \u003cant-radio value=\"b\"\u003eShanghai\u003c/ant-radio\u003e\n    \u003cant-radio value=\"c\"\u003eBeijing\u003c/ant-radio\u003e\n    \u003cant-radio value=\"d\"\u003eChengdu\u003c/ant-radio\u003e\n\u003c/ant-radio-group\u003e\n```\n\n\u003e Switch 开关：\n```html\n\u003c!-- normal --\u003e\n\u003cant-switch (change)=\"onChange($event)\"\u003e\u003c/ant-switch\u003e\n\u003cant-switch (change)=\"onChange($event)\" checkedText=\"开\" uncheckedText=\"关\"\u003e\u003c/ant-switch\u003e\n\n\u003c!-- the checked state is controlled by ngModel --\u003e\n\u003cant-switch value=\"open\" uncheckedValue=\"off\" [(ngModel)]=\"example1.value\"\u003e\u003c/ant-switch\u003e\n```\n\n\u003e Select 选择器：\n```html\n单选模式 (default)：\n\u003cant-select [(ngModel)]=\"example6.value1\"\n    [size]=\"example6.size\" style=\"width: 200px;\"\u003e\n    \u003cant-option *ngFor=\"let i of getNumRange()\" [value]=\"i\"\u003e\n        选项{{i}}\n    \u003c/ant-option\u003e\n\u003c/ant-select\u003e\n\ncombobox模式：\n\u003cant-select [(ngModel)]=\"example6.value2\"\n    [size]=\"example6.size\" mode=\"combobox\" style=\"width: 200px;\"\u003e\n    \u003cant-option *ngFor=\"let i of getNumRange()\" [value]=\"i\"\u003e\n        选项{{i}}\n    \u003c/ant-option\u003e\n\u003c/ant-select\u003e\n\nmultiple模式：\n\u003cant-select [(ngModel)]=\"example6.value3\"\n    placeholder=\"Please select\"\n    [size]=\"example6.size\" mode=\"multiple\" style=\"width: 100%;\"\u003e\n    \u003cant-option *ngFor=\"let i of getNumRange()\" [value]=\"i\"\u003e\n        选项{{i}}\n    \u003c/ant-option\u003e\n\u003c/ant-select\u003e\n\ntags模式：\n\u003cant-select [(ngModel)]=\"example6.value4\"\n    placeholder=\"Please select\"\n    [size]=\"example6.size\" mode=\"tags\" style=\"width: 100%;\"\u003e\n    \u003cant-option *ngFor=\"let i of getNumRange()\" [value]=\"i\"\u003e\n        选项{{i}}\n    \u003c/ant-option\u003e\n\u003c/ant-select\u003e\n```\n\n\u003e TimePicker 时间选择框：\n```html\n\u003clabel style=\"display: inline-block; width: 65px\"\u003e选择时间：\u003c/label\u003e\n\u003cant-timepicker\n    [(ngModel)]=\"example1.value1\" (change)=\"onChange($event)\"\u003e\n\u003c/ant-timepicker\u003e\n```\n\n\u003e TimeSelect 时间选择框：\n```html\n\u003clabel style=\"display: inline-block; width: 65px\"\u003e选择时间：\u003c/label\u003e\n\u003cant-time-select\n    [(ngModel)]=\"example1.value2\" (change)=\"onChange($event)\"\u003e\n\u003c/ant-time-select\u003e\n```\n\n\n* Data Display\n\u003ctable\u003e\n    \u003cthead\u003e\n        \u003ctr\u003e\n            \u003cth\u003e组件\u003c/th\u003e\n            \u003cth\u003e标签\u003c/th\u003e\n            \u003cth\u003e进度\u003c/th\u003e\n        \u003c/tr\u003e\n    \u003c/thead\u003e\n    \u003ctbody\u003e\n        \u003ctr\u003e\n            \u003ctd\u003eAvatar 头像\u003c/td\u003e\n            \u003ctd\u003e\u0026lt;ant-avatar\u0026gt;\u003c/td\u003e\n            \u003ctd\u003e已完成 (Done)\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd\u003eBadge 徽标数\u003c/td\u003e\n            \u003ctd\u003e\u0026lt;ant-badge\u0026gt;\u003c/td\u003e\n            \u003ctd\u003e已完成 (Done)\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd\u003eCollapse 折叠面板\u003c/td\u003e\n            \u003ctd\u003e \u003c/td\u003e\n            \u003ctd\u003e待开发 (Pending)\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd\u003eCarousel 走马灯\u003c/td\u003e\n            \u003ctd\u003e \u003c/td\u003e\n            \u003ctd\u003e待开发 (Pending)\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd\u003eCard 卡片\u003c/td\u003e\n            \u003ctd\u003e \u003c/td\u003e\n            \u003ctd\u003e待开发 (Pending)\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd\u003eCalendar 日历\u003c/td\u003e\n            \u003ctd\u003e\u0026lt;ant-fullcalendar\u0026gt;\u003c/td\u003e\n            \u003ctd\u003e已完成 (Done)\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd\u003ePopover 气泡卡片\u003c/td\u003e\n            \u003ctd\u003eant-popover\u003c/td\u003e\n            \u003ctd\u003e已完成 (Done)\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd\u003eTree 树形控件\u003c/td\u003e\n            \u003ctd\u003e\u0026lt;ant-tree\u0026gt;\u003c/td\u003e\n            \u003ctd\u003e已完成 (Done)\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd\u003eTooltip 文字提示器\u003c/td\u003e\n            \u003ctd\u003e\u0026lt;ant-tooltip\u0026gt;\u003c/td\u003e\n            \u003ctd\u003e已完成 (Done)\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd\u003eTimeline 时间轴\u003c/td\u003e\n            \u003ctd\u003e \u003c/td\u003e\n            \u003ctd\u003e待开发 (Pending)\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd\u003eTag 标签\u003c/td\u003e\n            \u003ctd\u003e\u0026lt;ant-tag\u0026gt;\u003c/td\u003e\n            \u003ctd\u003e已完成 (Done)\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd\u003eTabs 标签页\u003c/td\u003e\n            \u003ctd\u003e\u0026lt;ant-tabs\u0026gt;\u003c/td\u003e\n            \u003ctd\u003e已完成 (Done)\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd\u003eTable 表格\u003c/td\u003e\n            \u003ctd\u003e\u0026lt;ant-table\u0026gt;\u003c/td\u003e\n            \u003ctd\u003e已完成 (Done)\u003c/td\u003e\n        \u003c/tr\u003e\n    \u003c/tbody\u003e\n\u003c/table\u003e\n\n\u003e Avatar 头像：\n```html\n\u003cant-avatar icon=\"user\"\u003e\u003c/ant-avatar\u003e\n\u003cant-avatar\u003e\u003cant-avatar-text\u003eU\u003c/ant-avatar-text\u003e\u003c/ant-avatar\u003e\n\u003cant-avatar src=\"https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png\"\u003e\u003c/ant-avatar\u003e\n```\n\n\u003e Badge 徽标数：\n```html\n\u003cant-badge [count]=\"5\" [showZero]=\"true\"\u003e\n    \u003ca href=\"#\" class=\"head-example\"\u003e\u003c/a\u003e\n\u003c/ant-badge\u003e\n\n\u003cant-badge [dot]=\"true\"\u003e\n    \u003cant-icon type=\"notification\"\u003e\u003c/ant-icon\u003e\n\u003c/ant-badge\u003e\n\n\u003cant-badge status=\"success\"\u003e\u003c/ant-badge\u003e\n\u003cant-badge status=\"error\"\u003e\u003c/ant-badge\u003e\n\u003cant-badge status=\"default\"\u003e\u003c/ant-badge\u003e\n\u003cant-badge status=\"processing\"\u003e\u003c/ant-badge\u003e\n\u003cant-badge status=\"warning\"\u003e\u003c/ant-badge\u003e\n```\n\n\u003e Calendar 日历：\n```html\n\u003cant-fullcalendar (panelChange)=\"onPanelChange($event)\"\u003e\u003c/ant-fullcalendar\u003e\n```\n\n\u003e Popover 气泡卡片：\n```html\n\u003cant-button type=\"primary\" ant-popover title=\"Title\" pop-content=\"Content\"\u003eHover me\u003c/ant-button\u003e\n\u003cant-button ant-popover title=\"Title\" placement=\"topLeft\" [arrowPointAtCenter]=\"true\"\u003e\n    Arrow points to center / 箭头指向中心\n    \u003cpopover-content\u003e\n        \u003cp\u003eContent\u003c/p\u003e\n        \u003cp\u003eContent\u003c/p\u003e\n    \u003c/popover-content\u003e\n\u003c/ant-button\u003e\n```\n\n\u003e Tree 树形控件：\n```html\n\u003cant-tree [roots]=\"children\" [checkable]=\"true\" (check)=\"onCheck($event)\"\u003e\u003c/ant-tree\u003e\n```\n\n\u003e Tooltip 文字提示器：\n```html\n\u003cspan antTooltip title=\"prompt text\"\u003eTooltip will show when mouse enter.\u003c/span\u003e\n```\n\n\u003e Tag 标签：\n```html\n\u003cant-tag [closable]=\"true\" (beforeClose)=\"beforeClose($event)\" (close)=\"afterClose($event)\"\u003eTag 1\u003c/ant-tag\u003e\n```\n\n\u003e Tabs 标签页：\n```html\n\u003cant-tabs activeKey=\"1\" (change)=\"onChange($event)\"\u003e\n    \u003cant-tabpane tabTitle=\"Tab 1\" key=\"1\"\u003eContent of Tab Pane 1\u003c/ant-tabpane\u003e\n    \u003cant-tabpane tabTitle=\"Tab 2\" key=\"2\" [disabled]=\"true\"\u003eContent of Tab Pane 2\u003c/ant-tabpane\u003e\n    \u003cant-tabpane tabTitle=\"Tab 3\" key=\"3\"\u003eContent of Tab Pane 3\u003c/ant-tabpane\u003e\n\u003c/ant-tabs\u003e\n```\n\n\u003e Table 表格：\n```html\n\u003cant-table\u003e\n    \u003ctable-header\u003e这是表格标题\u003c/table-header\u003e\n    \u003ctable-content\u003e\n        \u003cthead\u003e\n            \u003ctr\u003e\n                \u003cth\u003e姓名\u003c/th\u003e\n                \u003cth\u003e年龄\u003c/th\u003e\n                \u003cth\u003e地址\u003c/th\u003e\n                \u003cth\u003e操作\u003c/th\u003e\n            \u003c/tr\u003e\n        \u003c/thead\u003e\n        \u003ctbody\u003e\n            \u003ctr *ngFor=\"let item of getExample1Data()\"\u003e\n                \u003ctd\u003e{{item.name}}\u003c/td\u003e\n                \u003ctd\u003e{{item.age}}\u003c/td\u003e\n                \u003ctd\u003e{{item.address}}\u003c/td\u003e\n                \u003ctd\u003e\n                    \u003ca href=\"#\"\u003e编辑\u003c/a\u003e\n                    \u003cspan class=\"ant-divider\"\u003e\u003c/span\u003e\n                    \u003ca href=\"#\"\u003e删除\u003c/a\u003e\n                    \u003cspan class=\"ant-divider\"\u003e\u003c/span\u003e\n                    \u003ca href=\"#\" class=\"ant-dropdown-link\"\u003e\n                        更多 \u003cant-icon type=\"down\"\u003e\u003c/ant-icon\u003e\n                    \u003c/a\u003e\n                \u003c/td\u003e\n            \u003c/tr\u003e\n        \u003c/tbody\u003e\n    \u003c/table-content\u003e\n    \u003ctable-footer\u003e这是表格注脚\u003c/table-footer\u003e\n\u003c/ant-table\u003e\n```\n\n* Feedback\n\u003ctable\u003e\n    \u003cthead\u003e\n        \u003ctr\u003e\n            \u003cth\u003e组件\u003c/th\u003e\n            \u003cth\u003e标签\u003c/th\u003e\n            \u003cth\u003e进度\u003c/th\u003e\n        \u003c/tr\u003e\n    \u003c/thead\u003e\n    \u003ctbody\u003e\n        \u003ctr\u003e\n            \u003ctd\u003eAlert 警告提示\u003c/td\u003e\n            \u003ctd\u003e\u0026lt;ant-alert\u0026gt;\u003c/td\u003e\n            \u003ctd\u003e已完成 (Done)\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd\u003eModal 对话框\u003c/td\u003e\n            \u003ctd\u003eModal\u003c/td\u003e\n            \u003ctd\u003e已完成 (Done)\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd\u003eMessage 全局提示\u003c/td\u003e\n            \u003ctd\u003eMessage\u003c/td\u003e\n            \u003ctd\u003e已完成 (Done)\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd\u003eNotification 通知提醒框\u003c/td\u003e\n            \u003ctd\u003eNotification\u003c/td\u003e\n            \u003ctd\u003e已完成 (Done)\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd\u003eProgress 进度条\u003c/td\u003e\n            \u003ctd\u003e\u0026lt;ant-progress\u0026gt;\u003c/td\u003e\n            \u003ctd\u003e已完成 (Done)\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd\u003ePopconfirm 气泡确认框\u003c/td\u003e\n            \u003ctd\u003epopconfirm\u003c/td\u003e\n            \u003ctd\u003e已完成 (Done)\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd\u003eDialog 信息提示框\u003c/td\u003e\n            \u003ctd\u003e\u0026lt;ant-dialog\u0026gt;\u003c/td\u003e\n            \u003ctd\u003e已完成 (Done)\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd\u003eDialog 信息提示框\u003c/td\u003e\n            \u003ctd\u003eLayer\u003c/td\u003e\n            \u003ctd\u003e已完成 (Done)\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd\u003eSpin 加载中\u003c/td\u003e\n            \u003ctd\u003e\u0026lt;ant-spin\u0026gt;\u003c/td\u003e\n            \u003ctd\u003e已完成 (Done)\u003c/td\u003e\n        \u003c/tr\u003e\n    \u003c/tbody\u003e\n\u003c/table\u003e\n\n\u003e Alert 警告提示：\n```html\n\u003cant-alert type=\"success\" message=\"Success Text\"\u003e\u003c/ant-alert\u003e\n```\n\n\u003e Modal 对话框：\n\n模态对话框弹窗有两种方法，一种是传TemplateRef，一种是传Component，例子如下：\n\n例子1（TemplateRef）：\n```html\n\u003cant-button type=\"primary\" (click)=\"showExample1Modal($event)\"\u003eOpen\u003c/ant-button\u003e\n\u003cng-template #example1Template\u003e\n    \u003cp\u003eSome contents...\u003c/p\u003e\n    \u003cp\u003eSome contents...\u003c/p\u003e\n    \u003cp\u003eSome contents...\u003c/p\u003e\n\u003c/ng-template\u003e\n```\n\n```ts\n@ViewChild('example1Template', { read: TemplateRef })\nexample1Template: TemplateRef\u003cany\u003e;\n\nconstructor(private modal: Modal) {\n}\n\nshowExample1Modal(event: Event): void {\n    this.modal.open({\n        title: 'Basic Modal',\n        templateRef: this.example1Template,\n        triggerEvent: event\n    }).subscribe((result: { dialog: ModalDialog, event: Event, action: string }) =\u003e {\n        if (result.action === 'OK') {\n            console.log('你点击了【确定】');\n        } else {\n            console.log('你点击了【取消】');\n        }\n    }, (error) =\u003e {\n        console.error(error);\n    });\n}\n```\n\n例子2（Component）：\n```html\n\u003cant-button type=\"primary\" (click)=\"showExample5Modal($event)\"\u003eOpen\u003c/ant-button\u003e\n```\n\n```ts\nconstructor(private modal: Modal) {\n}\n\nshowExample5Modal(event: Event): void {\n    this.modal.create(ModalFormComponent, {\n        data: this.data\n    }, {\n        title: '请输入账号',\n        width: 320,\n        triggerEvent: event\n    }).subscribe((result: { dialog: ModalDialog, event: Event, button: any, action: string }) =\u003e {\n        console.log(`你点击了【${result.button.text || '确定'}】`, result.button);\n        console.log(this.data);\n        result.button.loading = true;\n        setTimeout(() =\u003e {\n            result.button.loading = false;\n            result.dialog.close();\n        }, 3000);\n    }, (error) =\u003e {\n        console.error(error);\n    });\n}\n```\n\n例子3（便捷方法，如：info、success、error、warning、confirm）：\n```ts\ninfo(): void {\n    const title = 'This is a notification message';\n    const content = 'some messages...some messages...';\n    this.modal.info(content, title)\n        .then((result: { dialog: ModalDialog, event: Event, action: string }) =\u003e {\n            console.log('你点击了【确定】');\n            result.dialog.close();\n        }, (result: { dialog: ModalDialog, event: Event, action: string }) =\u003e {\n            console.log('你点击了【取消】');\n        });\n}\n```\n\n\u003e Message 全局提示：\n```html\n\u003cant-button type=\"primary\" (click)=\"info()\"\u003eDisplay normal message\u003c/ant-button\u003e\n```\n```ts\nconstructor(private message: Message) {\n}\ninfo(): void {\n    this.message.info('This is a normal message');\n}\n```\n\n\u003e Notification 通知提醒框：\n```html\n\u003cant-button type=\"primary\" (click)=\"openNotification()\"\u003eOpen the notification box\u003c/ant-button\u003e\n```\n```ts\nconstructor(private notification: Notification) {\n}\nopenNotification(): void {\n    this.notification.open({\n        message: 'Notification Title',\n        description: 'This is the content of the notification. This is the content of the notification.'\n    });\n}\n```\n\nProgress 进度条：\n```html\n\u003cant-progress [percent]=\"30\"\u003e\u003c/ant-progress\u003e\n\u003cant-progress type=\"circle\" [percent]=\"75\"\u003e\u003c/ant-progress\u003e\n\u003cant-progress type=\"circle\" [percent]=\"75\" [status]=\"'exception'\"\u003e\u003c/ant-progress\u003e\n```\n\n\n\u003e Popconfirm 气泡确认框：\n```html\n\u003ca href=\"javascript:;\" popconfirm title=\"Are you sure delete this task?\" (confirm)=\"onConfirm()\" (cancel)=\"onCancel()\"\u003eDelete\u003c/a\u003e\n```\n\n\u003e Dialog 信息提示框：\n```html\n\u003cant-button type=\"primary\" (click)=\"showAlert()\"\u003eAlert\u003c/ant-button\u003e\n```\n```ts\nconstructorprivate layer: Layer) {\n}\nshowAlert(): void {\n    this.layer.showAlert('你好，我是提示信息!').then(() =\u003e {\n        console.log('您刚刚选择了: OK');\n    }, () =\u003e {\n        console.log('您刚刚选择了: NO');\n    });\n}\nshowConfirm(): void {\n    this.layer.showConfirm('是否删除记录?', '系统消息').then(() =\u003e {\n        console.log('您刚刚选择了: OK');\n    }, () =\u003e {\n        console.log('您刚刚选择了: NO');\n    });\n}\n```\n\n\u003e Spin 加载中：\n```html\n\u003cant-spin tip=\"Loading...\"\u003e\u003c/ant-spin\u003e\n```\n\n\n\n## Install\n\n```bash\nnpm install fire-ant --save\n```\n\n如果下载速度较慢，可以尝试加入[淘宝 NPM 镜像](http://npm.taobao.org)，以加快模块下载速度。\n\n```bash\nnpm install -g cnpm --registry=https://registry.npm.taobao.org\n```\n或者\n```bash\nalias cnpm=\"npm --registry=https://registry.npm.taobao.org \\\n--cache=$HOME/.npm/.cache/cnpm \\\n--disturl=https://npm.taobao.org/dist \\\n--userconfig=$HOME/.cnpmrc\"\n```\n\n然后通过cnpm命令来安装：\n```bash\ncnpm install fire-ant --save\n```\n\n- 目前打成发布包的脚本还有问题，安装包还不可用，深感抱歉！主要问题如下：\n1. ERROR in AntModule is not an NgModule\n2. 没有把templateUrl中的html文件装入ts、js文件内\n3. 没有把styleUrls中的scss文件装入ts、js文件内\n- 例如\n```ts\n@Component({\n    selector: 'ant-input',\n    templateUrl: './input.html',  \u003c-- did not package inside\n    styleUrls: ['./style/index.scss'],  \u003c-- did not package inside\n    encapsulation: ViewEncapsulation.None,\n    providers: [INPUT_CONTROL_VALUE_ACCESSOR]\n})\n```\n\n## Quickstart\n\n直接下载本工程，并启动运行查看Demo：\n```bash\ngit clone https://github.com/fbchen/fire-ant-example.git\ncd fire-ant-example\ncnpm install\n```\n\n下载后，通过开发工具[VSCode](http://code.visualstudio.com/Download)打开安装目录，点击调试“启动程序”，然后在浏览器中输入 http://localhost:4200/ 直接预览效果。\n\n## Usage\n\n```ts\nimport { NgModule } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { BrowserModule } from '@angular/platform-browser';\n\nimport { AntModule } from 'fire-ant';\n\nimport { AppComponent }   from './app.component';\n\n@NgModule({\n    imports: [\n        FormsModule,\n        BrowserModule,\n        AntModule\n    ],\n    declarations: [\n\n    ],\n    providers: [],\n    bootstrap: [ AppComponent ]\n})\nexport class AppModule { }\n```\n\n# Live Example\nOpen Chrome, and visits:\n[https://fbchen.github.io/fire-ant](https://fbchen.github.io/fire-ant/index.html)\n\nDemo Project:\n[https://github.com/fbchen/fire-ant-example](https://github.com/fbchen/fire-ant-example)\n\n\n# License\n\n基于 [MIT](./LICENSE) 协议发布，免费开源\n\n# Contributing\nThanks for your interest in contributing! :tada: Read up on our guidelines for [contributing][contributing] and then look through our issues with a help [help wanted](https://github.com/fbchen/fire-ant-example/issues?q=is%3Aopen+is%3Aissue+label%3A%22help+wanted%22)\nlabel.\n\n我们欢迎任何形式的贡献，有任何建议或意见您可以进行 [Pull Request](https://github.com/fbchen/fire-ant-example/pulls)，或者给我们 [提问](https://github.com/fbchen/fire-ant-example/issues)。\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffbchen%2Ffire-ant","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffbchen%2Ffire-ant","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffbchen%2Ffire-ant/lists"}