angular-collapsible

Angular collapsible component styled with Materialize CSS.
Compatibility chart
| angular-collapsible | Angular | Node.js |
|------------------------|----------------|----------|
| <=0.0.53 | >=2.x.x <5.x.x | 8.9.x |
| 0.6.x | >=6.x.x <8.x.x | >=8.9.x |
| ? | >=8.x.x | >=10.9.x |
Dependencies
* @angular/animations
``
bash
$ npm install @angular/animations --save
`
* materialize-css
`
bash
$ npm install materialize-css --save
`
open src/styles.css and add this line:
`
bash
@import '~materialize-css/dist/css/materialize.min.css';
`
Consuming the library
You can import the library in any Angular application by running:
`
bash
$ npm install angular2-collapsible
`
and then from your Angular AppModule
:
`
typescript
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 { }
`
Once the library is imported, you can use its components and services in your Angular application:
`
xml
{{title}}
Item #1
Item #1 Body
Item #2
Item #2 Body
`
OR for a table with collapsible row details
`
xml
{{title}}
Col #1 |
Col #2 |
Col #3 |
Cell(0,0) |
Cell(0,1) |
Cell(0,2) |
Row #1 Detail #1 |
Row #1 Detail #2 |
Cell(1,0) |
Cell(1,1) |
Cell(1,2) |
Row #2 Detail
``
Options
| Option | Type | Default value | Description |
| ------------------------ | ----------------------------------- | --------------- | ------------------------------------------------------------- |
|
type | { 'accordion' | 'expandable' } |
'accordion' | The type of the collapsible list: 'accordion' or 'expandable' |
$3
$3
| 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)' | A color of an odd striped row |
|
stripedOddTextColor | string |
'black' | A text color of an odd striped row |
|
stripedEvenColor | string |
'transparent' | A color of an even striped row |
|
stripedEvenTextColor | string |
'black' | A text color of an even striped row |
|
highlight | boolean |
false | Highlight table rows on mouse hover |
|
highlightColor | string |
'rgba(222,222,222, 0.8)' | A color of a highlighted row |
|
highlightTextColor | string |
'black' | A text color of a highlighted row |
|
activeColor | string |
'rgba(212,212,212, 0.8)' | A color of an active row |
|
activeTextColor | string |
'black' | A 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 to multiple rows |
|
selectColor | string |
'rgba(212,212,212, 0.8)' | Allows to multiple rows |
|
selectTextColor | string |
'black' | A 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 withing the table |
License
MIT ©
Dmitrii Serikov