Tabs

Component is build based on Angular Material Tabs and Angular animation system

It consists of two components:

• cfTabsComponent

• cfTabsCardComponent

Usage

app.html

<cf-tabs [properties]="myTabs" [styling]="myTabsStyles">
  <cf-tabs-card *ngFor="let card of cards, let i = index" [properties]="card" [styling]="myTabsCardsStyles">
    <h1>Card - {{i+1}}</h1>
  </cf-tabs-card>
</cf-tabs>

app.ts

myTabs = new TabsModel({
    showCardNumberAsIcon: true,
});

myTabsStyles = new TabsStylingModel({
    container: {
        class: "my-custom-tabs"
    }
});

cards = [
    new TabsCardModel({ header: { label: "Card" }}),
    new TabsCardModel({ header: { label: "Card" }}),
    new TabsCardModel({ header: { label: "Card" }}),
    new TabsCardModel({ header: { label: "Card" }}),
    new TabsCardModel({ header: { label: "Card" }}),
];

myTabsCardStyles = new TabsCardStylingModel({
    container: {
        class: "my-custom-tabs-card"
    },
    header: new ButtonStylingModel({
        button: {
            class: "my-tabs-card-header-button ",
        }
    })
});

app.scss

/deep/ {
    .my-tabs-next-button.mat-button, .my-tabs-card-header-button.mat-button {
      color: darkblue;
      background: lightseagreen;
    }
}

Tabs input properties

Attr	Type	Details
showStepNumberAsIcon	boolean	If to show card number as icon in wizard header cards buttons
showStepNumberAsPrefix	boolean	If to show card number as prefix in wizard header cards buttons

Tabs styling properties

Attr	Type	Details
container	StylingModel	Styling by type StylingModel

Tabs output properties

Attr	Detailsprevious
onCardChanged	Is emiting event with active card after card was changed

Tabs card input properties

Attr	Type	Details
header	ButtonModel	The ButtonModel object for tabs card header button

Tabs card styling properties

Attr	Type	Details
header	ButtonStylingModel	Styling by type ButtonStylingModel
iconIndex	StylingModel	Styling by type StylingModel
prefixIndex	StylingModel	Styling by type StylingModel

Tabs card output properties

Attr	Details
onNext	Is emiting event before go to next card
onPrev	Is emiting event before go to previous card