teaMasthead

This is a directive available under tea.directives. The teaMasthead builds a masthead for the page. The masthead is used to define entities.

Usage

<tea-masthead title="'Tomcat Server'"
              subtitle="object.name">
 
    <tea-masthead-attributes>
        <tea-attribute ng-repeat="(name, value) in object.config" label="{{name}}">{{value}}</tea-attribute>
    </tea-masthead-attributes>
 
    <tea-masthead-long-attributes>
        <tea-long-attribute label="Description">{{object.desc}}</tea-long-attribute>
    </tea-masthead-long-attributes>
 
    <tea-masthead-actions>
        <a ng-repeat="operation in object.type.operations | filter:isPublic" class="tea-action-btn"
           ng-click="openOperation(operation.name)">{{operation.label}}</a>
    </tea-masthead-actions>
</tea-masthead>
Parameters
  • title - {string}:Title of the page.
  • subtitle - {string} :Subtitle of the page.
Customization
  • teaMastheadAttributes: Attributes that are rendered in the first column of the masthead. This should be used with teaAttribute directive only.
  • teaMastheadLongAttributes: Long attributes that are rendered in the second column of the masthead. This should be used with teaLongAttribute directive only.
  • teaMastheadActions: Action buttons that are rendered in the masthead. This should be used with HTML anchors using the class tea-action-btn only. Operations on the current TeaObject can be performed using the openOperation function provided by teaScopeDecorator.
  • teaMastheadConstraints: Constraints that are rendered in the masthead. This should be used with teaConstraint directive only.
  • teaMastheadStatus: Status that is rendered just below the title and name.
    <tea-masthead-status>
        <span ng-show="object.status" ng-class="getStatusClass(object)">
            {{object.status.state|lowercase}}
        </span>
    </tea-masthead-status>

Directive Details

This directive creates a new scope.