Fire-Ant

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

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

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

Ant-Design 由阿里巴巴的蚂蚁金服体验技术部出品，提供了丰富、灵活、实用的基础组件，基于React技术实现，对于喜欢Angular的童鞋来说，Fire-Ant无疑是一个值得选择的开发框架。
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 按钮：

<ant-button type="primary">Primary</ant-button>

Icon 图标：

<ant-icon type="down"></ant-icon>

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 栅格：

<ant-row>
    <ant-col [span]="12">col-12</ant-col>
    <ant-col [span]="12">col-12</ant-col>
</ant-row>

Layout 布局：

<ant-layout>
    <ant-layout-sider>Sider</ant-layout-sider>
    <ant-layout>
        <ant-layout-header>Header</ant-layout-header>
        <ant-layout-content>Content</ant-layout-content>
        <ant-layout-footer>Footer</ant-layout-footer>
    </ant-layout>
</ant-layout>

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 面包屑：

<ant-breadcrumb>
      <ant-breadcrumb-item>Home</ant-breadcrumb-item>
      <ant-breadcrumb-item><a href="">Application Center</a></ant-breadcrumb-item>
      <ant-breadcrumb-item><a href="">Application List</a></ant-breadcrumb-item>
      <ant-breadcrumb-item>An Application</ant-breadcrumb-item>
</ant-breadcrumb>

Dropdown 下拉菜单：

<ant-dropdown-button>
    <ant-button (click)="onButtonClick($event)">Dropdown</ant-button>
    <ant-menu (menuClick)="onMenuClick($event)">
        <ant-menu-item key="1">1st menu item</ant-menu-item>
        <ant-menu-item key="2">2nd memu item</ant-menu-item>
        <ant-menu-item key="3">3d menu item</ant-menu-item>
    </ant-menu>
</ant-dropdown-button>

<a class="dropdown-link" href="javascript:;" dropdown>
    Hover me <ant-icon type="down"></ant-icon>
    <ant-menu>
        <ant-menu-item>
            <a target="_blank" rel="noopener noreferrer" href="http://www.alipay.com/">1st menu item</a>
        </ant-menu-item>
        <ant-menu-item>
            <a target="_blank" rel="noopener noreferrer" href="http://www.taobao.com/">2nd menu item</a>
        </ant-menu-item>
        <ant-menu-item>
            <a target="_blank" rel="noopener noreferrer" href="http://www.tmall.com/">3d menu item</a>
        </ant-menu-item>
    </ant-menu>
</a>

Menu 导航菜单：

<ant-submenu key="sub1">
    <div ant-submenu-title>
        <ant-icon type="mail"></ant-icon> Menu One
    </div>
    <ant-menu-item key="1">Option 1</ant-menu-item>
    <ant-menu-item key="2">Option 2</ant-menu-item>
    <ant-menu-item key="3">Option 3</ant-menu-item>
    <ant-menu-item key="4">Option 4</ant-menu-item>
    </ant-submenu>
    <ant-submenu key="sub2">
    <div ant-submenu-title>
        <ant-icon type="appstore"></ant-icon> Menu Two
    </div>
    <ant-menu-item key="5">Option 5</ant-menu-item>
    <ant-menu-item key="6">Option 6</ant-menu-item>
    <ant-submenu key="sub3">
        <div ant-submenu-title>Submenu</div>
        <ant-menu-item key="7">Option 7</ant-menu-item>
        <ant-menu-item key="8">Option 8</ant-menu-item>
    </ant-submenu>
    </ant-submenu>
    <ant-submenu key="sub4">
    <div ant-submenu-title>
        <ant-icon type="setting"></ant-icon> Menu Three
    </div>
    <ant-menu-item key="9">Option 9</ant-menu-item>
    <ant-menu-item key="10">Option 10</ant-menu-item>
    <ant-menu-item key="11">Option 11</ant-menu-item>
    <ant-menu-item key="12">Option 12</ant-menu-item>
    </ant-submenu>
</ant-menu>

Pagination 分页：

<ant-pagination [current]="1" [total]="50" (pageChange)="onPageChange($event)"></ant-pagination>

Steps 步骤条：

<ant-steps [current]="1">
    <ant-step nzTitle="Finished" description="This is a description."></ant-step>
    <ant-step nzTitle="In Progress" description="This is a description."></ant-step>
    <ant-step nzTitle="Waiting" description="This is a description."></ant-step>
</ant-steps>

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 多选框：

<!-- normal -->
<ant-checkbox value="open" [checked]="true">Checkbox</ant-checkbox>
<!-- the checked state is controlled by ngModel -->
<ant-checkbox value="open" uncheckedValue="off" [(ngModel)]="example1.value">Checkbox</ant-checkbox>
<!-- group -->
<ant-checkbox-group [(ngModel)]="example4.group1" (change)="onChange($event)">
    <ant-checkbox value="Apple">Apple</ant-checkbox>
    <ant-checkbox value="Pear">Pear</ant-checkbox>
    <ant-checkbox value="Orange">Orange</ant-checkbox>
</ant-checkbox-group>

Cascader 级联选择：

<ant-cascader
    [(ngModel)]="example1.value"
    [options]="options" (change)="onChange($event)" (select)="onSelect($event)"
    placeholder="Please select"></ant-cascader>

DatePicker 日期选择框：

<label style="display: inline-block; width: 65px">选择日期：</label>
<ant-datepicker
    [(ngModel)]="example1.value1" (change)="onChange($event)">
</ant-datepicker>

<label style="display: inline-block; width: 65px">选择时间：</label>
<ant-datepicker
    [(ngModel)]="example1.value3"
    [showTimePicker]="true" (change)="onChange($event)">
</ant-datepicker>

MonthPicker 月份选择框：

<ant-monthpicker
    [(ngModel)]="example1.value2" (change)="onChange($event)">
</ant-monthpicker>

RangePicker 日期段选择框：

<label style="display: inline-block; width: 65px">选择日期：</label>
<ant-rangepicker
    [(ngModel)]="example1.value1" (change)="onRangeChange($event)">
</ant-rangepicker>

<label style="display: inline-block; width: 65px">选择时间：</label>
<ant-rangepicker
    [showTimePicker]="true"
    [(ngModel)]="example1.value1" (change)="onRangeChange($event)">
</ant-rangepicker>

Form 表单：

<form #form1="ngForm" #fireForm1="faForm" layout="inline" (ngSubmit)="handleSubmit(fireForm1)" novalidate="">
    <form-item>
        <ant-input placeholder="Username" name="username"
            [(ngModel)]="example1.username" [required]="true">
            <input-prefix style="font-size: 13px">
                <ant-icon type="user"></ant-icon>
            </input-prefix>
        </ant-input>
    </form-item>
    <form-item>
        <ant-input placeholder="Password" name="password" type="password"
            [(ngModel)]="example1.password" [required]="true">
            <input-prefix style="font-size: 13px">
                <ant-icon type="lock"></ant-icon>
            </input-prefix>
        </ant-input>
    </form-item>
    <form-item>
        <ant-button type="primary" htmlType="submit" [disabled]="form1.invalid">
            Login
        </ant-button>
    </form-item>
</form>

public exampleMessages = {
    username: { required: '用户名不能为空' },
    password: { required: '密码不能为空' }
};

public handleSubmit(form: FormDirective): void {
    if (!form.validate(this.exampleMessages)) {
        console.log('form is invalid...');
    }
}

InputNumber 数字输入框：

<ant-number [min]="1" [max]="10" (change)="onChange($event)"
    [(ngModel)]="example1.value1"></ant-number>

Input 输入框：

<ant-input placeholder="Basic usage" [(ngModel)]="example1.value"></ant-input>

<ant-addon style="margin-bottom: 16px">
    <ng-template #before>http://</ng-template>
    <ng-template #after>.com</ng-template>
    <ant-input [(ngModel)]="example2.value1"></ant-input>
</ant-addon>

<ant-input placeholder="Enter your userName" [(ngModel)]="example5.username">
    <input-prefix>
        <ant-icon type="user"></ant-icon>
    </input-prefix>
    <input-suffix>
        <ant-icon type="close-circle"></ant-icon>
    </input-suffix>
</ant-input>

<ant-input type="textarea" [(ngModel)]="example4.value1" placeholder="Autosize height based on content lines" [autosize]="true"></ant-input>

Rate 评分：

<ant-rate [(ngModel)]="example1.value1"></ant-rate>

Radio 单选框：

<!-- normal -->
<ant-radio value="open" [checked]="true">Radio</ant-radio>
<!-- the checked state is controlled by ngModel -->
<ant-radio value="open" uncheckedValue="off" [(ngModel)]="example1.value">Radio</ant-radio>
<!-- group -->
<ant-radio-group [(ngModel)]="example3.group1" (change)="onGroupChange($event)">
    <ant-radio value="1">A</ant-radio>
    <ant-radio value="2">B</ant-radio>
    <ant-radio value="3">C</ant-radio>
    <ant-radio value="4">D</ant-radio>
</ant-radio-group>

<ant-radio-group mode="button" [(ngModel)]="example5.group1" (change)="onGroupChange($event)">
    <ant-radio value="a">Hangzhou</ant-radio>
    <ant-radio value="b">Shanghai</ant-radio>
    <ant-radio value="c">Beijing</ant-radio>
    <ant-radio value="d">Chengdu</ant-radio>
</ant-radio-group>

Switch 开关：

<!-- normal -->
<ant-switch (change)="onChange($event)"></ant-switch>
<ant-switch (change)="onChange($event)" checkedText="开" uncheckedText="关"></ant-switch>

<!-- the checked state is controlled by ngModel -->
<ant-switch value="open" uncheckedValue="off" [(ngModel)]="example1.value"></ant-switch>

Select 选择器：

单选模式 (default)：
<ant-select [(ngModel)]="example6.value1"
    [size]="example6.size" style="width: 200px;">
    <ant-option *ngFor="let i of getNumRange()" [value]="i">
        选项{{i}}
    </ant-option>
</ant-select>

combobox模式：
<ant-select [(ngModel)]="example6.value2"
    [size]="example6.size" mode="combobox" style="width: 200px;">
    <ant-option *ngFor="let i of getNumRange()" [value]="i">
        选项{{i}}
    </ant-option>
</ant-select>

multiple模式：
<ant-select [(ngModel)]="example6.value3"
    placeholder="Please select"
    [size]="example6.size" mode="multiple" style="width: 100%;">
    <ant-option *ngFor="let i of getNumRange()" [value]="i">
        选项{{i}}
    </ant-option>
</ant-select>

tags模式：
<ant-select [(ngModel)]="example6.value4"
    placeholder="Please select"
    [size]="example6.size" mode="tags" style="width: 100%;">
    <ant-option *ngFor="let i of getNumRange()" [value]="i">
        选项{{i}}
    </ant-option>
</ant-select>

TimePicker 时间选择框：

<label style="display: inline-block; width: 65px">选择时间：</label>
<ant-timepicker
    [(ngModel)]="example1.value1" (change)="onChange($event)">
</ant-timepicker>

TimeSelect 时间选择框：

<label style="display: inline-block; width: 65px">选择时间：</label>
<ant-time-select
    [(ngModel)]="example1.value2" (change)="onChange($event)">
</ant-time-select>

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 头像：

<ant-avatar icon="user"></ant-avatar>
<ant-avatar><ant-avatar-text>U</ant-avatar-text></ant-avatar>
<ant-avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"></ant-avatar>

Badge 徽标数：

<ant-badge [count]="5" [showZero]="true">
    <a href="#" class="head-example"></a>
</ant-badge>

<ant-badge [dot]="true">
    <ant-icon type="notification"></ant-icon>
</ant-badge>

<ant-badge status="success"></ant-badge>
<ant-badge status="error"></ant-badge>
<ant-badge status="default"></ant-badge>
<ant-badge status="processing"></ant-badge>
<ant-badge status="warning"></ant-badge>

Calendar 日历：

<ant-fullcalendar (panelChange)="onPanelChange($event)"></ant-fullcalendar>

Popover 气泡卡片：

<ant-button type="primary" ant-popover title="Title" pop-content="Content">Hover me</ant-button>
<ant-button ant-popover title="Title" placement="topLeft" [arrowPointAtCenter]="true">
    Arrow points to center / 箭头指向中心
    <popover-content>
        <p>Content</p>
        <p>Content</p>
    </popover-content>
</ant-button>

Tree 树形控件：

<ant-tree [roots]="children" [checkable]="true" (check)="onCheck($event)"></ant-tree>

Tooltip 文字提示器：

<span antTooltip title="prompt text">Tooltip will show when mouse enter.</span>

Tag 标签：

<ant-tag [closable]="true" (beforeClose)="beforeClose($event)" (close)="afterClose($event)">Tag 1</ant-tag>

Tabs 标签页：

<ant-tabs activeKey="1" (change)="onChange($event)">
    <ant-tabpane tabTitle="Tab 1" key="1">Content of Tab Pane 1</ant-tabpane>
    <ant-tabpane tabTitle="Tab 2" key="2" [disabled]="true">Content of Tab Pane 2</ant-tabpane>
    <ant-tabpane tabTitle="Tab 3" key="3">Content of Tab Pane 3</ant-tabpane>
</ant-tabs>

Table 表格：

<ant-table>
    <table-header>这是表格标题</table-header>
    <table-content>
        <thead>
            <tr>
                <th>姓名</th>
                <th>年龄</th>
                <th>地址</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            <tr *ngFor="let item of getExample1Data()">
                <td>{{item.name}}</td>
                <td>{{item.age}}</td>
                <td>{{item.address}}</td>
                <td>
                    <a href="#">编辑</a>
                    <span class="ant-divider"></span>
                    <a href="#">删除</a>
                    <span class="ant-divider"></span>
                    <a href="#" class="ant-dropdown-link">
                        更多 <ant-icon type="down"></ant-icon>
                    </a>
                </td>
            </tr>
        </tbody>
    </table-content>
    <table-footer>这是表格注脚</table-footer>
</ant-table>

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 警告提示：

<ant-alert type="success" message="Success Text"></ant-alert>

Modal 对话框：

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

例子1（TemplateRef）：

<ant-button type="primary" (click)="showExample1Modal($event)">Open</ant-button>
<ng-template #example1Template>
    <p>Some contents...</p>
    <p>Some contents...</p>
    <p>Some contents...</p>
</ng-template>

@ViewChild('example1Template', { read: TemplateRef })
example1Template: TemplateRef<any>;

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）：

<ant-button type="primary" (click)="showExample5Modal($event)">Open</ant-button>

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）：

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 全局提示：

<ant-button type="primary" (click)="info()">Display normal message</ant-button>

constructor(private message: Message) {
}
info(): void {
    this.message.info('This is a normal message');
}

Notification 通知提醒框：

<ant-button type="primary" (click)="openNotification()">Open the notification box</ant-button>

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 进度条：

<ant-progress [percent]="30"></ant-progress>
<ant-progress type="circle" [percent]="75"></ant-progress>
<ant-progress type="circle" [percent]="75" [status]="'exception'"></ant-progress>

Popconfirm 气泡确认框：

<a href="javascript:;" popconfirm title="Are you sure delete this task?" (confirm)="onConfirm()" (cancel)="onCancel()">Delete</a>

Dialog 信息提示框：

<ant-button type="primary" (click)="showAlert()">Alert</ant-button>

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 加载中：

<ant-spin tip="Loading..."></ant-spin>

Install

npm install fire-ant --save

如果下载速度较慢，可以尝试加入淘宝 NPM 镜像，以加快模块下载速度。

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

或者

alias cnpm="npm --registry=https://registry.npm.taobao.org \
--cache=$HOME/.npm/.cache/cnpm \
--disturl=https://npm.taobao.org/dist \
--userconfig=$HOME/.cnpmrc"

然后通过cnpm命令来安装：

cnpm install fire-ant --save

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

ERROR in AntModule is not an NgModule
没有把templateUrl中的html文件装入ts、js文件内
没有把styleUrls中的scss文件装入ts、js文件内

例如

@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：

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

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

Usage

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

Demo Project: https://github.com/fbchen/fire-ant-example

License

基于 MIT 协议发布，免费开源

Contributing

Thanks for your interest in contributing! 🎉 Read up on our guidelines for [contributing][contributing] and then look through our issues with a help help wanted label.

我们欢迎任何形式的贡献，有任何建议或意见您可以进行 Pull Request，或者给我们提问。

Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting

fbchen / fire-ant

Programming Languages

Labels

Projects that are alternatives of or similar to fire-ant