angular2-collapsible

Angular collapsible component styled with Materialize CSS.

Demo

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 type="'accordion'">

<collapsible-header class="waves-effect">

Item #1

</collapsible-header>

<collapsible-body [expanded]="false">

<p>Item #1 Body</p>

</collapsible-body>

<collapsible-header class="waves-effect">

Item #2

</collapsible-header>

<collapsible-body [expanded]="true">

<p>Item #2 Body</p>

</collapsible-body>

``` OR for a table with collapsible row details ```xml type="'accordion'" bordered>

<collapsible-table-row>

<th>Col #1</th>

<th>Col #2</th>

<th>Col #3</th>

</collapsible-table-row>

<collapsible-table-row [detail]="detail1">

<td>Cell(0,0)</td>

<td>Cell(0,1)</td>

<td>Cell(0,2)</td>

</collapsible-table-row>

<collapsible-table-row-detail #detail1>

<table>

<tr>

<td width="75%">Row #1 Detail #1</td>

<td>Row #1 Detail #2</td>

</tr>

</table>

</collapsible-table-row-detail>

<collapsible-table-row [detail]="detail2">

<td>Cell(1,0)</td>

<td>Cell(1,1)</td>

<td>Cell(1,2)</td>

</collapsible-table-row>

<collapsible-table-row-detail #detail2>

<p>Row #2 Detail</p>

</collapsible-table-row-detail>

```

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)' | 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