Development documentation
  1. Components
  2. UppHeaderButtonComponent

File

libs/upp-wdgt/src/components/upp-header/upp-header.ts

Description

A component for adding buttons to a header.

The UppHeaderButtonComponent acts as a wrapper for buttons, encapsulating them within a standard <ion-button> to ensure a consistent style.

Example :
<upp-header>
  <upp-header-button>
    <ion-icon name="add"></ion-icon>
  </upp-header-button>
</upp-header>

Metadata

selector upp-header-button
styleUrls ./upp-header.scss
template 
<ion-button [ngClass]="size">
    <ng-content></ng-content>
</ion-button>

Index

Inputs

Inputs

size
Type : "large" | "small"
Default value : 'large'

./upp-header.scss 

:host {
    ion-item.header {
        position: relative;

        --padding-start: 0px;
        --inner-padding-start: 15px;
        --padding-end: 0px;
        --inner-padding-end: 5px;
        
        &.border {
            border-bottom: 3px solid red;
        }

        &.mobile {
            --inner-padding-start: 0px;

            ion-buttons {
                margin-right: 5px;
            }
        }

        ion-buttons.menu-icon {
            margin-right: 0px;
        }

        /************************************/
        /* TITLE, CONTENT, BUTTONS          */
        /************************************/

        ::ng-deep upp-header-title {
            ion-label {
                font-size: var(--upp-font-size, 15px);
                font-weight: 700;
                letter-spacing: 0.4px;
                text-transform: uppercase;
                color: inherit;                     
            }
        }

        ::ng-deep upp-header-button {
            ion-button {
                margin: 0px;

                ion-icon {
                    font-size: 22px;
                    color: inherit;
                }

                &.small {
                    --padding-top: 0px;
                    --padding-bottom: 0px;
                    --padding-start: 0px;
                    --padding-end: 0px;

                    height: 40px;
                    width: 40px;

                    border-radius: 50%;
                    background: var(--ion-color-light);
                    color: var(--ion-color-light-contrast);

                    ion-icon {
                        font-size: 38px;
                    }
                }

                &.large {
                    height: 40px;
                    width: 40px;
                    margin-left: 2px;

                    border-radius: 50%;
                    border: 1px solid var(--ion-color-light-contrast);

                    background: var(--ion-color-light);
                    color: var(--ion-color-light-contrast);

                    ion-icon {
                        font-size: 38px;
                    }
                }
            }
    }

        ::ng-deep upp-header-content {
            ion-label {
                font-size: 12px;
                font-weight: 700;
                letter-spacing: 0.4px;
                text-transform: uppercase;
                color: inherit;                     
            }
        }
    }
}
Legend
Html element
Component
Html element with directive

results matching ""

    No results matching ""