angular2-collapsible
Version:
Angular collapsible component styled with Materialize CSS.
175 lines (139 loc) • 7.47 kB
Markdown
# angular-collapsible
[](https://travis-ci.org/DmitriiSer/angular2-collapsible)
Angular collapsible component styled with Materialize CSS.
## [Demo](https://dmitriiser.github.io/angular2-collapsible-example/)
## 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
<h1>{{title}}</h1>
<collapsible-list [type]="'accordion'">
<collapsible-list-item>
<collapsible-header class="waves-effect">
Item #1
</collapsible-header>
<collapsible-body [expanded]="false">
<p>Item #1 Body</p>
</collapsible-body>
</collapsible-list-item>
<collapsible-list-item>
<collapsible-header class="waves-effect">
Item #2
</collapsible-header>
<collapsible-body [expanded]="true">
<p>Item #2 Body</p>
</collapsible-body>
</collapsible-list-item>
</collapsible-list>
```
OR for a table with collapsible row details
```xml
<h1>{{title}}</h1>
<collapsible-table [type]="'accordion'" bordered>
<thead>
<collapsible-table-row>
<th>Col #1</th>
<th>Col #2</th>
<th>Col #3</th>
</collapsible-table-row>
</thead>
<tbody>
<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>
</tbody>
</collapsible-table>
```
## 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](mailto:dmitrii.serikov@gmail.com)