Filter Card Module

Logo Filter Card module library allows user to set filter options and return data of the filtered items. Filter can be set on/off by the switch inside and user can choose which filters will be active/disabled with checkboxes.

User can add information tip text into filter card.

Click here for demo

Installation

All public npm packages of Logo Software is at https://www.npmjs.com/~logofe. To install Filter Card Module:

$ npm set registry https://registry.npmjs.org/
$ npm install @logo-software/filter-card -s

Just import it to your project of @NgModule import section.

@NgModule({
 imports: [CommonModule, FilterCardModule, SwitchModule, InformationTipModule. PopoverModule],
})
export class AppModule {
}

Dependencies

While installing @logo-software/filter-card, package manager also will be installing these packages as a dependency:

• SwitchModule
• PopoverModule
• InformationTipModule

Filter Card Component

Filter Card module easily can be imported into project with one data that includes all options,

Add the below code to your code stack and give initializer parameters.

<logo-filter-card [ngModel]="yourFilterData"></logo-filter-card>

Data Sample

Dummy data will be used:

  yourFilterData= [
  {
    label: 'Label 1',
    id: '1',
    information: 'This is information about filter.',
    recordNumber: '11',
    switchIsRounded: true,
    switchStatus: true,
    popoverContent:[
      {
        label:'Label of Popover',
        value: true,
        id: '1',
      },
    ],
  },
]

For API details, please visit http://design.logo.com.tr/#/docs/components/components-overview