Member Junction
    Preparing search index...

    Class MJAccordionPanelComponent

    mj-accordion-panel — Collapsible panel. Replaces <kendo-panelbar-item> and <kendo-expansionpanel>.

    Supports two title modes:

    • Simple string: [Title]="'Details'" — plain text title
    • Rich template: <ng-template mjAccordionTitle> — HTML with icons, badges, etc.
    <!-- Simple string title -->
    <mj-accordion-panel Title="Details" [Expanded]="true">
      <p>Panel content here</p>
    </mj-accordion-panel>

    <!-- Rich HTML title -->
    <mj-accordion-panel [Expanded]="true">
      <ng-template mjAccordionTitle>
        <i class="fa-solid fa-code"></i> Template Editor
      </ng-template>
      <p>Panel content here</p>
    </mj-accordion-panel>
    Index

    Constructors

    constructor

    Properties

    ActionsTemplate Bare BodyId BodyTemplate Disabled ExpandedChange Fill FlushBody HeaderId HeadingLevel hostClass Size Title TitleIconMuted TitleTemplate Variant

    Accessors

    actionsTemplate bodyTemplate Expanded fillActive hasBeenExpanded titleTemplate

    Methods

    Toggle

    Constructors

    Properties

    ActionsTemplate: MJAccordionActionsDirective | null = null
    Bare: boolean = false

    Bare chrome — drop the panel's border, header background, body fill and row-wide hover fill, so the panel sits cleanly inside a host that already provides chrome (e.g. an expandable card) or directly on a page as a section. The toggle keeps its focus ring and, on a device that can hover, a hover cue: pointing at the title or the chevron gives both the brand color. A Variant keeps its own colors.

    BodyId: string = ...
    BodyTemplate: MJAccordionBodyDirective | null = null
    Disabled: boolean = false
    ExpandedChange: EventEmitter<boolean> = ...
    Fill: boolean = false

    Fill mode — for "rail section that owns the leftover height" cases (e.g. an entity tree or grid that should consume all remaining vertical space and scroll internally), rather than the default "reveal stacked content" disclosure. When set AND expanded, the panel becomes a flex column that fills its flex parent and its body becomes a flex:1; min-height:0 region — the projected content is expected to provide its own scroll child. While collapsed, the panel behaves exactly like a normal panel (header only, natural height) and does NOT claim the leftover space.

    Requires the panel's parent to be a flex column with min-height:0. Note: the open/close height animation is skipped in fill mode (the body fills rather than animating to content height).

    FlushBody: boolean = false

    Remove the body's default padding, for bodies that manage their own spacing (code editors, full-bleed grids, custom forms).

    HeaderId: string = ...
    HeadingLevel: 1 | 2 | 3 | 5 | 6 | 4 | null = null

    Heading level (1–6) for the title. When set, a role="heading" element with this aria-level wraps the toggle button, so the section title takes part in the page's heading outline. When null, there is no wrapper and the toggle is a direct child of the header row.

    hostClass: true
    Size: "sm" | "md" = 'md'

    Density. md (default) is the standard size; sm tightens header padding and font for dense contexts (sidebars, flyouts, nested panels).

    Title: string = ''
    TitleIconMuted: boolean = false

    Render icons projected into the title slot in the muted color instead of the header's primary text color. Lets consumers get the common "quiet icon" look without writing CSS. Status/brand-colored icons can still be colored inline.

    TitleTemplate: MJAccordionTitleDirective | null = null
    Variant: "primary" | "secondary" | "default" = 'default'

    Emphasis variant for visual hierarchy:

    • primary — bold, solid brand-colored header (use to make a panel stand out)
    • secondary — subtle brand tint
    • default — standard neutral header All brand-token-driven, so dark-mode-safe and themeable.

    Accessors

    Methods

    Settings

    Member Visibility

    On This Page

    Constructors
    Properties
    Accessors
    Methods