Content Gallery

Usage

app.html

<cf-content-gallery [styling]="galleryStyling">

    <cf-content-gallery-card *ngFor="let card of [1, 2, 3, 4, 5], let i = index">
        <h3 style="text-align: center">Card index: {{i}}</h3>
    </cf-content-gallery-card>

</cf-content-gallery>

app.ts

galleryStyling = new ContentGalleryStylingModel({
    height: '300px',
    verticalAlignment: 'center',
    horizontalAlignment: 'center',
    container: {class: 'my-gallery-container'},
    nextButton: {class: 'my-gallery-next-btn'},
    previousButton: {class: 'my-gallery-prev-btn'},
    paginationButton: {class: 'my-gallery-pagination-btn'}
});

galleryCardStyling = new ContentGalleryCardStylingModel({
    verticalAlignment: 'end',
    horizontalAlignment: 'end',
});

app.scss

/deep/ {
    .my-gallery-container {
        background: lightcyan;
    }
    .my-gallery-next-btn, .my-gallery-prev-btn, .my-gallery-pagination-btn {
        color: darkcyan;
    }
}

Gallery styling properties

Attr

Type

Details

height

string

It is css height property. Logically work with values in pixels. If not set - gallery height will adjust to current card content height.

horizontalAlignment

string

It is horizontal alignment for all gallery cards. Can be: start, center, end. Card own horizontall alignmnent has higher importance.

verticalAlignment

string

It is vertical alignment. Can be: start, center, end. Card own vertical alignmnent has higher importance.

galleryInner

StylingModel