Nutella Pancake Machine

    callapsible-card
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.12 • Public • Published

    Callapsible Card

    Callapsible Card is a simple material card with the ability to hide/show content Action button is provided if hidden content is provided. Animations included.

    Expanded/Callapsed states are maintained on reload An attribute now can set the default of the initial state

    Installation

    npm install callapsible-card
    

    Scaffolding

    Import the module into your project under imports

    imports: [
        BrowserModule,
        AppRoutingModule,
        CallapsibleModule
      ],
    

    Selector Usage

    This is the basic selector with no content, header or hiddend content

    This selector uses content projection - the following selector can be projected into the component - the element does not matter.

    Content Projection Selectors

    Selector header - this will project your content into the header area

    <div header></div>
    

    Selector showContent - this will project your content into the content area

    <div showContent></div>
    

    Selector hiddenContent - this will project your content into the hidden content area

    <div hiddenContent></div>
    

    Please note that is you do not provide hidden content - the actions will not appear thus displaying the card as a regular card compoent.

    Here is a sample using all content projection selectors

    <wav-collapsible-card>
      <div header fxFlex>
        <mat-toolbar>
            <span fxFlex class="title">Title</span>
            <button mat-icon-button>
                <mat-icon class="fade">info</mat-icon>
            </button>
        </mat-toolbar>
      </div>
    
      <div showContent style="padding: 16px;">
        <div fxFlex style="padding-top: 8px;">There is no configurations defined in this group</div>
      </div>
    
      <div hiddenContent style="padding: 16px;">
        <div fxFlex style="padding-top: 8px;">There is no configurations defined in this group</div>
        <button mat-stroked-button color="primary">Create New Config</button>
      </div>
    
    </wav-collapsible-card>
    

    Inputs

    The following Inputs are available

    Input Type Defaut Description
    action ButtonActionState More, Less customization for the More or Less
    id STRING '' ID for Tag on Selected event feedback info

    ButtonActionState

    ButtonActionState Model allows for the customization for the More or Less button text { expanded: 'More', collapsed: 'Less' }

    Outputs

    Event Type Description
    selected SelectedState show/hide action when clicked - returns state and id

    This event returns SelectedState that will look like the following structure

    { id: 'sample', state: true }

    The ID is the reference string you assign the input

    The STATE returns whether the card is expanded or callapsied

    Attributes

    • expanded - initial expanded state to true
    • actionDivider - divider above actions
    • disableActions - disables the actions for custom action implementation
    • cacheState - retains expanded/callapsed states on reload
    • noPadding - removes all padding in Card
    • elevation - height of elevation (shadow)

    Apply any number of attributes to the component like this

    <wav-collapsible-card expanded actionDivider cacheState>

    ViewChild Accessors

    To access events to connect to your own behaviours for expand and collapse, connect to the component as a ViewChild and the following functions are available.

    Function Description
    toggle() changes the state of the current expanded/collapsed state
    expand() changes the state to expanded
    collapse() changes the state to collapse

    FormControl

    formControlName="comments"

    countrySelection = this.fb.group({
      comments: [null],
    })
    

    Options

    <div *ngFor="let item of searchData" style="margin-bottom: 16px; padding: 8px;">
      <wav-collapsible-card
        [elevation]="0"
        [action]="action"
        [actionDivider]="false"
        [noPadding]="true"
        [id]="item.value"
        (selected)="onSelected($event)"
      >
        <div header fxFlex>
          <mat-toolbar>
              <span fxFlex class="title">Title</span>
              <button mat-icon-button>
                  <mat-icon class="fade">info</mat-icon>
              </button>
          </mat-toolbar>
        </div>
    
        <div showContent style="padding: 16px;">
          <div fxFlex style="padding-top: 8px;">There is no configurations defined in this group</div>
        </div>
    
        <div hiddenContent style="padding: 16px;">
          <div fxFlex style="padding-top: 8px;">There is no configurations defined in this group</div>
          <button mat-stroked-button color="primary">Create New Config</button>
        </div>
    
      </wav-collapsible-card>
    </div>
    

    Below is a sample of a function capturing the selected event and the customization of the action text for the button to callapse/expand

    action = { expanded: 'MORE', collapsed: 'LESS'}
    
    
    onSelected(event: SelectedState) {
      console.log('selected', event)
    }
    

    Install

    npm i callapsible-card

    DownloadsWeekly Downloads

    27

    Version

    1.0.12

    License

    ISC

    Unpacked Size

    91.7 kB

    Total Files

    18

    Last publish

    Collaborators

    • wavecoders