Tabbed Menu Component

Overview

The tabbed menu component allows you the ability to create a menu bar containing buttons that can be clicked and responded to you by your MPage code. The tabbed menu component is responsive and will dynamically shift its height to wrap longer menu buttons and/or smaller screen sizes.

Required Imports

To use the tabbed menu component, you must import the TabbedMenuComponent and IMenuItem from @clinicaloffice/mpage-developer. You must also include TabbedMenuComponent in your component imports array in your component TypeScript file.

e.g. your-component.ts

import {TabbedMenuComponent, IMenuItem} from '@clinicaloffice/mpage-developer';

@Component({
    selector: 'your-component',
    imports: [TabbedMenuComponent],
    templateUrl: './your-component.component.html',
    styleUrl: './your-component.component.scss',
    standalone: true,
    changeDetection: ChangeDetectionStrategy.OnPush
})
export class YourComponent {
}

Usage

You can use the tabbed menu component on its own, or inside a flex container as shown below. The tabbed menu component will size itself to all available space.

<div class="flex flex-gap flex-center-items" style="border-bottom: 2px solid grey">
    <tabbed-menu [tabs]="commonData.menuItems" buttonType="default" buttonColor="default" selectedButtonColor="primary" (clickTab)="commonData.tab.set($event.idName)" />
    @if (commonData.powerForms().length > 0) {
        <span class="flex-fill"></span>
        <button coButton color="accent" [cdkMenuTriggerFor]="powerFormMenu">
            <mpage-icon>add</mpage-icon>
        </button>
    }
</div>

The tabs option contains all menu items using an array of IMenuItem values.

protected menuItems: IMenuItem[] = [
    { label: 'Information', icon: 'contact_mail', idName: 'info', hoverText: 'You hovered over the Information tab!' },
    { label: 'Gender and Pronouns', icon: 'wc', idName: 'gender' },
    { label: 'Patient Preferred Information', icon: 'favorite', idName: 'pref' },
    { label: 'Community Contacts', icon: 'diversity_1', idName: 'community' },
    { label: 'Additional Contacts', icon: 'people', idName: 'contacts' },
    { label: 'Provider Relationships', icon: 'handshake', idName: 'providers' },
    { label: 'This is Me', icon: 'account_circle', idName: 'me' }
];

Options

The tabbed menu component makes use of the MPage Developer button directive to display the menu options. Almost all styling is done through the button color and style options.

Interfaces

IMenuItem {
  idName?: string;
  icon?: string;
  label?: string;
  hoverText?: string;
}