Web SDK documentation
  1. Components
  2. IconPanelComponent
core/common/icon-panel/icon-panel.component.ts

Description

Icon Panel Component

Displays information in a grid of bordered panels, each with an icon, label, and content. Useful for showing structured metadata, device information, connection status, etc.

Example :
sections: IconPanelSection[] = [
  {
    id: 'device-info',
    label: 'Device Information',
    icon: 'c8y-device',
    visible: true,
    content: '<p>Device ID: THM-001</p><p>Type: Sensor</p>',
    colClass: 'col-xs-12 col-md-6'
  },
  {
    id: 'status',
    label: 'Status',
    icon: 'c8y-connection',
    visible: true,
    content: 'Connected',
    colClass: 'col-xs-12 col-md-6'
  }
];
Example :
<c8y-icon-panel [sections]="sections"></c8y-icon-panel>

You can also project additional content:

Example :
<c8y-icon-panel [sections]="sections">
  <div class="col-xs-12">
    <p>Additional custom content here</p>
  </div>
</c8y-icon-panel>

Example

<b>Example :</b><div><pre class="line-numbers"><code class="language-typescript">sections: IconPanelSection[] = [
  {
    id: &#39;device-info&#39;,
    label: &#39;Device Information&#39;,
    icon: &#39;c8y-device&#39;,
    visible: true,
    content: &#39;&lt;p&gt;Device ID: THM-001&lt;/p&gt;&lt;p&gt;Type: Sensor&lt;/p&gt;&#39;,
    colClass: &#39;col-xs-12 col-md-6&#39;
  },
  {
    id: &#39;status&#39;,
    label: &#39;Status&#39;,
    icon: &#39;c8y-connection&#39;,
    visible: true,
    content: &#39;Connected&#39;,
    colClass: &#39;col-xs-12 col-md-6&#39;
  }
];</code></pre></div><b>Example :</b><div><pre class="line-numbers"><code class="language-html">&lt;c8y-icon-panel [sections]=&quot;sections&quot;&gt;&lt;/c8y-icon-panel&gt;</code></pre></div><p>You can also project additional content:</p>
<b>Example :</b><div><pre class="line-numbers"><code class="language-html">&lt;c8y-icon-panel [sections]=&quot;sections&quot;&gt;
  &lt;div class=&quot;col-xs-12&quot;&gt;
    &lt;p&gt;Additional custom content here&lt;/p&gt;
  &lt;/div&gt;
&lt;/c8y-icon-panel&gt;</code></pre></div>

Metadata

selector c8y-icon-panel
standalone true
imports
C8yTranslatePipe
StripHtmlPipe
templateUrl ./icon-panel.component.html

Relationships

Used by

Depends on

<div
  class="d-flex row tight-grid flex-wrap a-i-stretch"
  [attr.aria-label]="ariaLabel | translate"
  role="region"
  data-cy="c8y-icon-panel"
>
  @for (section of sections; track section.id) {
    @if (section.visible) {
      <div
        class="d-flex m-b-8"
        [attr.aria-label]="
          (section.label | translate) + ': ' + (section.content | translate | stripHtml)
        "
        role="definition"
        [ngClass]="section.colClass || 'col-xs-12 col-md-6'"
        [attr.data-cy]="section.dataCy"
      >
        <div [ngClass]="section.containerClass || 'border-all fit-w d-flex'">
          <div class="p-8">
            <i
              [class]="'icon-24  m-t-4 c8y-icon ' + (section.iconClass || '')"
              [c8yIcon]="section.icon"
              aria-hidden="true"
            ></i>
          </div>
          <div class="p-t-8 p-b-8 p-r-8 flex-grow">
            <p class="text-label-small m-b-4">{{ section.label | translate }}</p>
            <div
              class="small fit-w"
              [innerHTML]="section.content | translate"
            ></div>
          </div>
        </div>
      </div>
    }
  }

  <ng-content></ng-content>
</div>

results matching ""

    No results matching ""