Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/fbchen/fire-ant

火蚁(项目源码) ，在线例子：
https://github.com/fbchen/fire-ant

angular4 ant-design fire-ant webapp

Last synced: about 1 month ago
JSON representation

火蚁(项目源码) ，在线例子：

Awesome Lists containing this project

README 

        
# Fire-Ant

Fire-Ant 是Ant-Design框架的Angular(4.*)实现的，可用作PC Web应用开发的UI框架。



Fire-Ant 是在参考Ant-Design的源码基础上，采用了更加简洁的实现，此外，在css格式上采用Sass代替了Less。封装后的组件更加灵活方便，使开发人员可以更加专注于业务的实现，可以极大减少前端开发时间。



FireAnt的中文名为“火蚁”，火蚁是蚂蚁团体的巧手匠，它们以在水中筑筏而著称，在影片《蚁人》中蚁人利用一个蚁筏通过了下水道。希望FireAnt能为前端开发人员和创业者们逢山开路、遇水搭桥，勇往直前。



- [Ant-Design](https://ant.design/index-cn) 由阿里巴巴的蚂蚁金服体验技术部出品，提供了丰富、灵活、实用的基础组件，基于React技术实现，对于喜欢Angular的童鞋来说，Fire-Ant无疑是一个值得选择的开发框架。



- [Angular](https://github.com/angular/angular) is a development platform for building mobile and desktop web applications using Typescript/JavaScript (JS) and other languages.



## Components



* Genernel



    

        

            组件

            标签

            进度

        

    

    

        

            Button 按钮

            <ant-button>

            已完成 (Done)

        

        

            Icon 图标

            <ant-icon>

            已完成 (Done)

        

    



> Button 按钮：

```html

Primary

```

> Icon 图标：

```html



```



* Layout



    

        

            组件

            标签

            进度

        

    

    

        

            Grid 栅格 - Row

            <ant-row>

            已完成 (Done)

        

        

            Grid 栅格 - Col

            <ant-col>

            已完成 (Done)

        

        

            Layout 布局

            

                <ant-layout>

            

            已完成 (Done)

        

        

            Layout 布局 - Header

            

                <ant-layout-header>

            

            已完成 (Done)

        

        

            Layout 布局 - Content

            

                <ant-layout-content>

            

            已完成 (Done)

        

        

            Layout 布局 - Footer

            

                <ant-layout-footer>

            

            已完成 (Done)

        

        

            Layout 布局 - Sider

            

                <ant-layout-sider>

            

            已完成 (Done)

        

    



> Grid 栅格：

```html



    col-12

    col-12



```

> Layout 布局：

```html



    Sider

    

        Header

        Content

        Footer

    



```



* Navigation



    

        

            组件

            标签

            进度

        

    

    

        

            Affix 固钉

             

            待开发 (Pending)

        

        

            Breadcrumb 面包屑

            <ant-breadcrumb>

            已完成 (Done)

        

        

            BackTop 回到顶部

             

            待开发 (Pending)

        

        

            Dropdown 下拉菜单

            <ant-dropdown-button>

            已完成 (Done)

        

        

            Menu 导航菜单

            <ant-menu>

            已完成 (Done)

        

        

            Pagination 分页

            <ant-pagination>

            已完成 (Done)

        

        

            Steps 步骤条

            <ant-steps>

            已完成 (Done)

        

    



> Breadcrumb 面包屑：

```html



      Home

      Application Center

      Application List

      An Application



```



> Dropdown 下拉菜单：

```html



    Dropdown

    

        1st menu item

        2nd memu item

        3d menu item

    





    Hover me 

    

        

            1st menu item

        

        

            2nd menu item

        

        

            3d menu item

        

    



```



> Menu 导航菜单：

```html



    


         Menu One

    


    Option 1

    Option 2

    Option 3

    Option 4

    

    

    


         Menu Two

    


    Option 5

    Option 6

    

        
Submenu


        Option 7

        Option 8

    

    

    

    


         Menu Three

    


    Option 9

    Option 10

    Option 11

    Option 12

    



```



> Pagination 分页：

```html



```



> Steps 步骤条：

```html



    

    

    



```



* Data Entry



    

        

            组件

            标签

            进度

        

    

    

        

            AutoComplete 自动完成

             

            待开发 (Pending)

        

        

            Checkbox 多选框

            <ant-checkbox>

            已完成 (Done)

        

        

            Cascader 级联选择

            <ant-cascader>

            已完成 (Done)

        

        

            DatePicker 日期选择框

            <ant-datepicker>

            已完成 (Done)

        

        

            MonthPicker 月份选择框

            <ant-monthpicker>

            已完成 (Done)

        

        

            RangePicker 日期段选择框

            <ant-rangepicker>

            已完成 (Done)

        

        

            Form 表单

            <form>

            已完成 (Done)

        

        

            InputNumber 数字输入框

            <ant-number>

            已完成 (Done)

        

        

            Input 输入框

            <ant-input>

            已完成 (Done)

        

        

            Mention 提及

             

            待开发 (Pending)

        

        

            Rate 评分

            <ant-rate>

            已完成 (Done)

        

        

            Radio 单选框

            <ant-radio>

            已完成 (Done)

        

        

            Switch 开关

            <ant-switch>

            已完成 (Done)

        

        

            Slider 滑动输入条

             

            待开发 (Pending)

        

        

            Select 选择器

            <ant-select>

            已完成 (Done)

        

        

            TreeSelect 树选择

             

            待开发 (Pending)

        

        

            Transfer 穿梭框

             

            待开发 (Pending)

        

        

            TimePicker 时间选择框

            <ant-timepicker>

            已完成 (Done)

        

        

            TimeSelect 时间选择框

            <ant-time-select>

            已完成 (Done)

        

        

            Upload 上传

             

            待开发 (Pending)

        

    



> Checkbox 多选框：

```html



Checkbox



Checkbox



    Apple

    Pear

    Orange



```



> Cascader 级联选择：

```html



```



> DatePicker 日期选择框：

```html

选择日期：



选择时间：



```



> MonthPicker 月份选择框：

```html



```



> RangePicker 日期段选择框：

```html

选择日期：



选择时间：



```



> Form 表单：

```html



    

        

            

                

            

        

    

    

        

            

                

            

        

    

    

        

            Login

        

    



```



```ts

public exampleMessages = {

    username: { required: '用户名不能为空' },

    password: { required: '密码不能为空' }

};



public handleSubmit(form: FormDirective): void {

    if (!form.validate(this.exampleMessages)) {

        console.log('form is invalid...');

    }

}

```



> InputNumber 数字输入框：

```html



```



> Input 输入框：

```html



    http://

    .com

    



    

        

    

    

        

    



```



> Rate 评分：

```html



```



> Radio 单选框：

```html



Radio



Radio



    A

    B

    C

    D



    Hangzhou

    Shanghai

    Beijing

    Chengdu



```



> Switch 开关：

```html



```



> Select 选择器：

```html

单选模式 (default)：



    

        选项{{i}}

    



combobox模式：



    

        选项{{i}}

    



multiple模式：



    

        选项{{i}}

    



tags模式：



    

        选项{{i}}

    



```



> TimePicker 时间选择框：

```html

选择时间：



```



> TimeSelect 时间选择框：

```html

选择时间：



```



* Data Display



    

        

            组件

            标签

            进度

        

    

    

        

            Avatar 头像

            <ant-avatar>

            已完成 (Done)

        

        

            Badge 徽标数

            <ant-badge>

            已完成 (Done)

        

        

            Collapse 折叠面板

             

            待开发 (Pending)

        

        

            Carousel 走马灯

             

            待开发 (Pending)

        

        

            Card 卡片

             

            待开发 (Pending)

        

        

            Calendar 日历

            <ant-fullcalendar>

            已完成 (Done)

        

        

            Popover 气泡卡片

            ant-popover

            已完成 (Done)

        

        

            Tree 树形控件

            <ant-tree>

            已完成 (Done)

        

        

            Tooltip 文字提示器

            <ant-tooltip>

            已完成 (Done)

        

        

            Timeline 时间轴

             

            待开发 (Pending)

        

        

            Tag 标签

            <ant-tag>

            已完成 (Done)

        

        

            Tabs 标签页

            <ant-tabs>

            已完成 (Done)

        

        

            Table 表格

            <ant-table>

            已完成 (Done)

        

    



> Avatar 头像：

```html



U



```



> Badge 徽标数：

```html



    



    



```



> Calendar 日历：

```html



```



> Popover 气泡卡片：

```html

Hover me



    Arrow points to center / 箭头指向中心

    

        
Content


        
Content


    



```



> Tree 树形控件：

```html



```



> Tooltip 文字提示器：

```html

Tooltip will show when mouse enter.

```



> Tag 标签：

```html

Tag 1

```



> Tabs 标签页：

```html



    Content of Tab Pane 1

    Content of Tab Pane 2

    Content of Tab Pane 3



```



> Table 表格：

```html



    这是表格标题

    

        

            

                姓名

                年龄

                地址

                操作

            

        

        

            

                {{item.name}}

                {{item.age}}

                {{item.address}}

                

                    编辑

                    

                    删除

                    

                    

                        更多 

                    

                

            

        

    

    这是表格注脚



```



* Feedback



    

        

            组件

            标签

            进度

        

    

    

        

            Alert 警告提示

            <ant-alert>

            已完成 (Done)

        

        

            Modal 对话框

            Modal

            已完成 (Done)

        

        

            Message 全局提示

            Message

            已完成 (Done)

        

        

            Notification 通知提醒框

            Notification

            已完成 (Done)

        

        

            Progress 进度条

            <ant-progress>

            已完成 (Done)

        

        

            Popconfirm 气泡确认框

            popconfirm

            已完成 (Done)

        

        

            Dialog 信息提示框

            <ant-dialog>

            已完成 (Done)

        

        

            Dialog 信息提示框

            Layer

            已完成 (Done)

        

        

            Spin 加载中

            <ant-spin>

            已完成 (Done)

        

    



> Alert 警告提示：

```html



```



> Modal 对话框：



模态对话框弹窗有两种方法，一种是传TemplateRef，一种是传Component，例子如下：



例子1（TemplateRef）：

```html

Open



    
Some contents...


    
Some contents...


    
Some contents...



```



```ts

@ViewChild('example1Template', { read: TemplateRef })

example1Template: TemplateRef;



constructor(private modal: Modal) {

}



showExample1Modal(event: Event): void {

    this.modal.open({

        title: 'Basic Modal',

        templateRef: this.example1Template,

        triggerEvent: event

    }).subscribe((result: { dialog: ModalDialog, event: Event, action: string }) => {

        if (result.action === 'OK') {

            console.log('你点击了【确定】');

        } else {

            console.log('你点击了【取消】');

        }

    }, (error) => {

        console.error(error);

    });

}

```



例子2（Component）：

```html

Open

```



```ts

constructor(private modal: Modal) {

}



showExample5Modal(event: Event): void {

    this.modal.create(ModalFormComponent, {

        data: this.data

    }, {

        title: '请输入账号',

        width: 320,

        triggerEvent: event

    }).subscribe((result: { dialog: ModalDialog, event: Event, button: any, action: string }) => {

        console.log(`你点击了【${result.button.text || '确定'}】`, result.button);

        console.log(this.data);

        result.button.loading = true;

        setTimeout(() => {

            result.button.loading = false;

            result.dialog.close();

        }, 3000);

    }, (error) => {

        console.error(error);

    });

}

```



例子3（便捷方法，如：info、success、error、warning、confirm）：

```ts

info(): void {

    const title = 'This is a notification message';

    const content = 'some messages...some messages...';

    this.modal.info(content, title)

        .then((result: { dialog: ModalDialog, event: Event, action: string }) => {

            console.log('你点击了【确定】');

            result.dialog.close();

        }, (result: { dialog: ModalDialog, event: Event, action: string }) => {

            console.log('你点击了【取消】');

        });

}

```



> Message 全局提示：

```html

Display normal message

```

```ts

constructor(private message: Message) {

}

info(): void {

    this.message.info('This is a normal message');

}

```



> Notification 通知提醒框：

```html

Open the notification box

```

```ts

constructor(private notification: Notification) {

}

openNotification(): void {

    this.notification.open({

        message: 'Notification Title',

        description: 'This is the content of the notification. This is the content of the notification.'

    });

}

```



Progress 进度条：

```html



```



> Popconfirm 气泡确认框：

```html

Delete

```



> Dialog 信息提示框：

```html

Alert

```

```ts

constructorprivate layer: Layer) {

}

showAlert(): void {

    this.layer.showAlert('你好，我是提示信息!').then(() => {

        console.log('您刚刚选择了: OK');

    }, () => {

        console.log('您刚刚选择了: NO');

    });

}

showConfirm(): void {

    this.layer.showConfirm('是否删除记录?', '系统消息').then(() => {

        console.log('您刚刚选择了: OK');

    }, () => {

        console.log('您刚刚选择了: NO');

    });

}

```



> Spin 加载中：

```html



```



## Install



```bash

npm install fire-ant --save

```



如果下载速度较慢，可以尝试加入[淘宝 NPM 镜像](http://npm.taobao.org)，以加快模块下载速度。



```bash

npm install -g cnpm --registry=https://registry.npm.taobao.org

```

或者

```bash

alias cnpm="npm --registry=https://registry.npm.taobao.org \

--cache=$HOME/.npm/.cache/cnpm \

--disturl=https://npm.taobao.org/dist \

--userconfig=$HOME/.cnpmrc"

```



然后通过cnpm命令来安装：

```bash

cnpm install fire-ant --save

```



- 目前打成发布包的脚本还有问题，安装包还不可用，深感抱歉！主要问题如下：

1. ERROR in AntModule is not an NgModule

2. 没有把templateUrl中的html文件装入ts、js文件内

3. 没有把styleUrls中的scss文件装入ts、js文件内

- 例如

```ts

@Component({

    selector: 'ant-input',

    templateUrl: './input.html',  <-- did not package inside

    styleUrls: ['./style/index.scss'],  <-- did not package inside

    encapsulation: ViewEncapsulation.None,

    providers: [INPUT_CONTROL_VALUE_ACCESSOR]

})

```



## Quickstart



直接下载本工程，并启动运行查看Demo：

```bash

git clone https://github.com/fbchen/fire-ant-example.git

cd fire-ant-example

cnpm install

```



下载后，通过开发工具[VSCode](http://code.visualstudio.com/Download)打开安装目录，点击调试“启动程序”，然后在浏览器中输入 http://localhost:4200/ 直接预览效果。



## Usage



```ts

import { NgModule } from '@angular/core';

import { FormsModule } from '@angular/forms';

import { BrowserModule } from '@angular/platform-browser';



import { AntModule } from 'fire-ant';



import { AppComponent }   from './app.component';



@NgModule({

    imports: [

        FormsModule,

        BrowserModule,

        AntModule

    ],

    declarations: [



    ],

    providers: [],

    bootstrap: [ AppComponent ]

})

export class AppModule { }

```



# Live Example

Open Chrome, and visits:

[https://fbchen.github.io/fire-ant](https://fbchen.github.io/fire-ant/index.html)



Demo Project:

[https://github.com/fbchen/fire-ant-example](https://github.com/fbchen/fire-ant-example)



# License



基于 [MIT](./LICENSE) 协议发布，免费开源



# Contributing

Thanks 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)

label.



我们欢迎任何形式的贡献，有任何建议或意见您可以进行 [Pull Request](https://github.com/fbchen/fire-ant-example/pulls)，或者给我们 [提问](https://github.com/fbchen/fire-ant-example/issues)。