<p align="center"> <a target="_blank" href="https://www.mit-license.org"> <img src="https://img.shields.io/badge/license-MIT-green.svg"> </a> <a target="_blank" href="https://nodejs.org"> <img src="https://img.shields.io/badge/node-%3E=8.0.0-brightgreen.svg"> </a> <a target="_blank" href="https://www.npmjs.com"> <img src="https://img.shields.io/badge/npm-%3E=7.0.0-green.svg"> </a> <a target="_blank" href="https://eslint.org"> <img src="https://img.shields.io/badge/eslint-%5E3.0.0-blue.svg"> </a> <a target="_blank" href="https://travis-ci.org/aoju/hibiscus.js"> <img src="https://travis-ci.org/aoju/hibiscus.js.svg?branch=master"> </a> </p> <p align="center"> -- QQ群①：<a href="https://shang.qq.com/wpa/qunwpa?idkey=17fadd02891457034c6536c984f0d7db29b73ea14c9b86bba39ce18ed7a90e18">839128</a> -- -- QQ群②：<a href="https://shang.qq.com/wpa/qunwpa?idkey=c207666cbc107d03d368bde8fc15605bb883ebc482e28d440de149e3e2217460">839120</a> -- </p>

---

Getting started

Native Angular directives for Bootstrap4

• Angular (requires Angular version 4.0.0 or higher)
• Bootstrap CSS (bootstrap-sass 4.0.0)
• DateFns (date-fns 1.27.2 or higher. It is for DatePicker parse & format date)

Notice: OnPush @Input is recommended in @hibiscus.js, so use Immutable.js will be easy.

• Angular 4: version <= 0.0.23; Angular 5: version >= 0.1.0 Angular 6: version >= 0.1.0

Components

• Accordion
• Action button
• Alert Confirm
• Badge
• Breadcrumbs
• Calendar
• Carousel
• Cascader
• Checkbox Group
• DatePicker
• Dialog
• Echarts
• File Upload
• Flow Steps
• http
• Image Cropper
• Image Upload
• Infinite Scroll
• Modal
• Message
• Notify
• Notification
• OAuth2
• Overlay
• Pager
• Pagination
• Popconfirm
• Popover
• Progress Bar
• Radio Group
• Rating
• Select
• Select Button
• Storage
• Switch
• Spin
• Tabs
• Tags
• TimePicker
• Tooltip
• Tree View
• Validators

Installation

After installing the above dependencies, install @hibiscus.js via:

npm install --save hibiscus.js

Once installed you need to import our main module.

import { HiNGModule } from 'hibiscus.js';

Then use HiNGModule to declare on your root module:

typescriptCopy
@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    HiNGModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

And use HiNGModule to declare on your feature module:

typescriptCopy
@NgModule({
  imports: [CommonModule, FormsModule, HiNGModule],
  exports: [DatePickerDemoComponent],
  declarations: [DatePickerDemoComponent],
  providers: [],
})
export class DatePickerDemoModule {}

Animations

@hibiscus.js have got animations done. So You should include BrowserAnimationsModule or NoopAnimationsModule to your AppModule.

example:

typescriptCopy
import { BrowserAnimationsModule, NoopAnimationsModule } from '@angular/platform-browser/animations';

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    SharedModule,
    HiNGModule,
    BrowserAnimationsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

Contributors

<img alt="Kemosabe" src="https://avatars0.githubusercontent.com/u/5940699?s=460&v=4" width="117">	<img alt="Chenalan" src="https://avatars2.githubusercontent.com/u/7518753?s=460&v=4" width="117">
Kemosabe	Chenalan