NgxCollapseDetails

#Angular component for extra content

How to install

Below are ways to install the library using npm or yarn:

npm i ngx-summary-details

How to use default component

import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";
import { NgxCollapseDetailsComponent } from "ngx-collapse-details";
import { AppComponent } from "./app.component";
@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, NgxCollapseDetailsComponent],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

<ngx-summary-details>
  <ul>
    <li>Teste 1</li>
    <li>Teste 2</li>
  </ul>
</ngx-summary-details>

How to use custom component

<ngx-summary-details
  summary="Teste"
  width="60%"
  bgColor="#555"
  color="orange"
  borderRadius="5px 10px 15px 20px"
  bgHover="purple"
  boxShadow="0 0 5px 5px orange"
  colorHover="blue"
>
  <ul>
    <li>Teste 1</li>
    <li>Teste 2</li>
  </ul>
</ngx-summary-details>

Properties

This component is an abstraction of a collapse, but using native HTML properties.

| Props | type | required | Description | | ------------ | ------ | -------- | --------------------------------- | | width | string | | width of collapse | | summary | string | | summary of collapse | | bgColor | string | | Background color of summary | | bgHover | string | | Background color hover of summary | | color | string | | Color of summary | | colorHover | string | | Color hover of summary | | borderRadius | string | | Border radius of summary | | borderDetail | string | | Border of summary | | boxShadow | string | | Box shadow of summary |