Development documentation
  1. Components
  2. UppHeaderTitleComponent

File

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

Description

A component for defining the title within a header.

The UppHeaderTitleComponent serves as a wrapper for the header's title content, allowing the consumer to insert dynamic or static content.

Example :
<upp-header>
  <upp-header-title>
    Main Title
  </upp-header-title>
</upp-header>

Metadata

selector upp-header-title
styleUrls ./upp-header.scss
template 
<ion-label>
    <ng-content></ng-content>
</ion-label>

./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 ""