angular2-collapsible is a materialized CSS Collapsible component that helps you create content switchers and accordion controls.
materialize collapsible not working, css collapse animation, angular material collapse, collapsible ui
How to make use of it:
Installation:
npm install materialize-css --save
1. Open src / styles.css and add the following line to enable Materialize CSS styles:
@import '~materialize-css/dist/css/materialize.min.css';
2. Then from your Angular AppModule:
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; // <-- import required BrowserAnimationsModule
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
// Import your library
import { CollapsibleModule } from 'angular2-collapsible'; // <-- import the module
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
BrowserAnimationsModule, // <-- include required BrowserAnimationsModule
CollapsibleModule // <-- include angular2-collapsible module
],
bootstrap: [AppComponent]
})
export class AppModule { }
Options
| Option | Type | Default value | Description |
|---|---|---|---|
| type | { ‘accordion’ | ‘expandable’ } | ‘accordion’ | The type of the collapsible list: ‘accordion’ or ‘expandable’ |
Collapsible list options
Collapsible table options
| Option | Type | Default value | Description |
|---|---|---|---|
| bordered | boolean | false | Makes the table bordered |
| borderedHorizontally | boolean | false | Makes the table bordered horizontally only |
| borderedVertically | boolean | false | Makes the table bordered vertically only |
| striped | boolean | false | Makes the table striped |
| stripedOddColor | string | ‘rgba(242,242,242,0.8)’ | Color of an odd striped row |
| stripedOddTextColor | string | ‘black’ | Text color of an odd striped row |
| stripedEvenColor | string | ‘transparent’ | Color of an even striped row |
| stripedEvenTextColor | string | ‘black’ | Text color of an even striped row |
| highlight | boolean | false | Highlight table rows on mouse hover |
| highlightColor | string | ‘rgba(222,222,222, 0.8)’ | Color of a highlighted row |
| highlightTextColor | string | ‘black’ | Text color of a highlighted row |
| activeColor | string | ‘rgba(212,212,212, 0.8)’ | Color of an active row |
| activeTextColor | string | ‘black’ | Text color of an active row |
| centered | boolean | false | Center align all the text in the table |
| [ ] TODO: responsive | boolean | false | Makes the table horizontally scrollable on smaller screen widths |
| select | boolean | false | Allows to select rows |
| selectMultipleRows | boolean | false | Allows multiple rows |
| selectColor | string | ‘rgba(212,212,212, 0.8)’ | Allows multiple rows |
| selectTextColor | string | ‘black’ | Text color of a selected row |
| allowDeselectingRows | boolean | false | Allows deselecting selected rows |
| allowKeyboardNavigation | boolean | true | Allows navigation between table rows using arrow keys |
| noTextSelect | boolean | false | Disables user select within the table |
angular 4 materialize css collapsible library plugin/github
See Demo And Download
Official Website(DmitriiSer): Click Here
This superior jQuery/javascript plugin is developed by DmitriiSer. For extra advanced usage, please go to the official website.
