touhousupports / hibiscus.js

Native Angular directives for Bootstrap4

-- QQ群①：839128 -- -- QQ群②：839120 --

---

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:

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

And use HiNGModule to declare on your feature module:

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

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

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

Contributors

Kemosabe	Chenalan