Skip to content

aoju/hibiscus.js

Repository files navigation

-- 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
Kemosabe Chenalan