angular2-collapsible

Angular collapsible component styled with Materialize CSS.

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
angular2-collapsible
1050.8.07 months ago5 years agoMinified + gzip package size for angular2-collapsible in KB

Readme

angular-collapsible
Build Status 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
{{title}}
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
{{title}}
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