Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/aoju/hibiscus.js
Native Angular directives for Bootstrap4
https://github.com/aoju/hibiscus.js
accordion alert angular bootstrap bootstrap4 buttons carousel datepicker ng-bootstrap pagination popover progress-bar rating tabs timepicker tooltip widget
Last synced: 30 days ago
JSON representation
Native Angular directives for Bootstrap4
- Host: GitHub
- URL: https://github.com/aoju/hibiscus.js
- Owner: aoju
- License: mit
- Created: 2018-01-10T11:55:22.000Z (almost 7 years ago)
- Default Branch: main
- Last Pushed: 2022-04-02T16:38:48.000Z (over 2 years ago)
- Last Synced: 2024-09-14T12:58:34.354Z (about 2 months ago)
- Topics: accordion, alert, angular, bootstrap, bootstrap4, buttons, carousel, datepicker, ng-bootstrap, pagination, popover, progress-bar, rating, tabs, timepicker, tooltip, widget
- Language: TypeScript
- Size: 699 KB
- Stars: 109
- Watchers: 7
- Forks: 10
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
-- QQ群①：839128 --
-- QQ群②：839120 --
---
# Getting started
> Native Angular directives for Bootstrap4
* [Angular](https://angular.io/) (requires `Angular` version 4.0.0 or higher)
* [Bootstrap CSS](http://getbootstrap.com/) (`bootstrap-sass` 4.0.0)
* [DateFns](https://date-fns.org/) (`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
- [x] Accordion
- [x] Action button
- [x] Alert Confirm
- [x] Badge
- [x] Breadcrumbs
- [ ] Calendar
- [x] Carousel
- [x] Cascader
- [x] Checkbox Group
- [x] DatePicker
- [x] Dialog
- [ ] Echarts
- [x] File Upload
- [x] Flow Steps
- [x] http
- [x] Image Cropper
- [x] Image Upload
- [x] Infinite Scroll
- [x] Modal
- [x] Message
- [x] Notify
- [x] Notification
- [x] OAuth2
- [x] Overlay
- [x] Pager
- [x] Pagination
- [x] Popconfirm
- [x] Popover
- [x] Progress Bar
- [x] Radio Group
- [x] Rating
- [x] Select
- [x] Select Button
- [x] Storage
- [x] Switch
- [x] Spin
- [x] Tabs
- [x] Tags
- [x] TimePicker
- [x] Tooltip
- [x] Tree View
- [x] 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:
```typescript
@NgModule({
declarations: [
AppComponent,
],
imports: [
BrowserModule,
HiNGModule,
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {}
```
And use `HiNGModule` to declare on your feature module:
```typescript
@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:
```typescript
import { BrowserAnimationsModule, NoopAnimationsModule } from '@angular/platform-browser/animations';
@NgModule({
declarations: [
AppComponent,
],
imports: [
BrowserModule,
SharedModule,
HiNGModule,
BrowserAnimationsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {}
```
### Contributors
[
](https://github.com/immrj) | [
](https://github.com/chenalan)
:---: |:---: |
[Kemosabe](https://github.com/immrj) |[Chenalan](https://github.com/chenalan)