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 hostClass Size Title TitleIconMuted titleTemplate Variant

    Accessors

    Expanded fillActive hasBeenExpanded

    Methods

    Toggle

    Constructors

    Properties

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

    Bare chrome — drop the panel's own border and header background so the panel sits cleanly inside a host that already provides chrome (e.g. an expandable card). The toggle/title/chevron/body still work; only the box styling is removed.

    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 = ...
    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