Version: 2.1.1

CommonHeader

Default common header for Kongsberg applications. The header component is part of the basic layout options, and exists in the common package of triton. Headers are useful for displaying content at the top of a web page, often used to present navigation options, give the page a title, and/or provide default functionality that will be available for the whole application.

Basic Usage

<triton-common-header>
  <triton-common-header-item>
    Header item
  </triton-common-header-item>
</triton-common-header>

<TritonCommonHeader>
  <TritonCommonHeaderItem>
    Header item
  </TritonCommonHeaderItem>
</TritonCommonHeader>

<html> 
  <head> 
    <script type="module"> 
      import { defineCustomElements } from '~node_modules/@kognifai/triton-cl-common/loader/index.es2017.js'; 
      defineCustomElements(); 
    </script> 
  </head> 
  <body> 
    <triton-common-header>
      <triton-common-header-item>
        Header item
      </triton-common-header-item>
    </triton-common-header>
  </body> 
</html>

Header item

Appearance

Title

Use the title property to set the title of the header.

Item 1

Item 2

<triton-common-header title="Header Title" fixed='false'>
  <triton-common-header-item>
    Item 1
  </triton-common-header-item>
  <triton-common-header-item>
    Item 2
  </triton-common-header-item>
</triton-common-header>

Logo

By setting the display-logo property to false, the Kongsberg logo will not be displayed to the left in the header.

Item 1

Item 2

<triton-common-header display-logo='false' title="A header without logo" fixed='false'>
  <triton-common-header-item>
    Item 1
  </triton-common-header-item>
  <triton-common-header-item>
    Item 2
  </triton-common-header-item>
</triton-common-header>

Behavior

Header Items

A Triton Header is composed of many Triton Header Items. These header items can take any markup, that will be rendered in the header.

<triton-common-header fixed='false'>
  <triton-common-header-item>
    <triton-switch
      id="theme-toggle"
      checked-icon="sun"
      unchecked-icon="moon"
    ></triton-switch>
  </triton-common-header-item>
</triton-common-header>

Fixed

To set the Triton Header to not be fixed on top of the screen, set the fixed property to false.

Item

<triton-common-header fixed='false'>
  <triton-common-header-item>
    Item
  </triton-common-header-item>
</triton-common-header>

Minimized

Not implemented yet

When this is implemented, by setting the minimized property to true, the header will show in a minimized version.

Item

<!-- warning: Not implemented yet -->
<triton-common-header minimized='true' fixed='false'>
  <triton-common-header-item>
    Item
  </triton-common-header-item>
</triton-common-header>

Playground

API

Properties

triton-common-header

Property	Description	Type	Default
`display-logo`	^{If true the default logo will appear in the left corner of the header}	`boolean`	`true`
`fixed`	^{If true the header will stick to the top of the window}	`boolean`	`true`
`title`	^{Title for the header. The title will display next to the logo}	`string`	-
`minimized`	^{not implementet yet show the header in minimized version only the logo will show and the header content will be available through a dropdown}	`boolean`	`false`
`page-root-url`	^{If url is given the header will append a link to the logo andor the title. If false this feature will be toggled of}	`boolean` `string`	`'/'`

triton-common-header-item

Property	Description	Type	Default
`title`	^{The title of the header item. This will add a title paragraph into the wrapper.}	`string`	-
`position`	^{Set the position of the header item}	`center` `left` `right`	`'right'`
`symbol`	^{Set one of Tritons provided icons as the icon for the header item}	`undefined` `search` `link` `logo-kongsberg` `analyse` `area-chart` `bar-chart` `chart-area` `chart-bar` `chart-donut` `chart-gauge` `chart-line` `chart-pie` `chart-radar` `chart-scatter` `charts` `config` `donut` `gauge` `line-chart` `pie-chart` `radar-chart` `run-analysis` `scatter-plot` `table` `vessel-statistics` `baseline` `bus-switch` `equipment-diagram` `single-line-diagram` `threshold` `-nav-dots-vertical` `Login` `Logout` `access` `account-circle` `add-picture` `alarm` `align-arrow-middle` `align-bottom` `align-horizontal` `align-justify` `align-left` `align-right` `align-text-center` `align-text-left` `align-text-right` `align-top` `align-vertical` `allign-right` `allign-vertical` `angle-swap-horizontal` `angle-swap-vertical` `announcement` `app-store` `application-1` `application` `apps-list` `area` `arrow-align-middle` `arrow-back` `arrow-down` `arrow-forward` `arrow-head` `arrow-left` `arrow-right` `arrow-up` `arrow_drop_down` `arrow_drop_up` `attachment` `average` `battery-charging` `bookmark` `border-color` `border-size` `border-type` `box` `brightness` `broadcast` `calendar` `cancel` `caret-down` `caret-left` `caret-right` `caret-up` `chat-buble` `check` `chevron-down` `chevron-left` `chevron-right` `chevron-up` `chevron-wide-right` `circle` `clock` `close` `cloud-download-2` `cloud-download` `cloud-upload-2` `cloud-upload` `cloud` `co2` `cog` `color-border` `color-fill` `color-text` `compass` `configuration` `confirmation-number` `container` `copy` `cut` `dark` `dashboard-editor` `dashboard` `day-dusk` `day` `db-cloud` `db` `device-hub` `documents` `dots-horizontal` `dots-vertical` `double-chevron-up` `drag-item-1` `drag-item` `dusk` `edit-redo` `edit-undo` `edit` `emblem` `expand` `external-page` `fast_forward` `fast_rewind` `feed` `file` `fill-color` `filter-1` `filter-2` `fingerprint` `flash` `folder-outlined` `folder` `format-itallic` `format-remove` `format-underline` `format_align_center` `format_align_justify` `format_align_left` `format_align_right` `format_bold` `format_clear` `format_indent_decrease` `format_indent_increase` `format_italic` `format_list_bulleted` `format_list_numbered` `format_strikethrough` `format_underlined` `frame` `fullscreen-exit` `fullscreen` `group` `group1` `hamburger` `hard-drive` `help` `home` `indented-list` `info-2` `info` `insert_chart_outlined` `insert_photo` `label` `layers` `light` `line` `link-off` `load-more` `lock-locked` `lock-open` `lock` `logo-facebook` `logo-linkedin` `logo-twitter` `mail` `map` `math-sum` `minus` `my-wells` `nav-apps-list` `nav-dots-horizontal` `navigation-arrow` `night` `notification-1` `notification-2` `notification` `nox` `object-list` `on-off-switch` `palette` `papers` `paste` `pause` `pencil` `pending-actions` `person` `phone` `pin` `place` `play` `plus` `preview` `print` `privacy` `pull-down` `pull-left` `pull-right` `pull-up` `record` `rectangle` `redo` `reload` `reset` `return-1` `returns` `router` `scale` `screen` `share-1` `share-2` `show-password` `signal` `slash` `spinner` `star-empty` `star` `step_back` `step_forward` `stop` `sucess` `sum` `support` `template-configuration` `template` `tenants` `test-this` `text-color` `text` `trash` `undo` `update-timer-2` `update-timer` `vertical-align-bottom` `vertical-align-top` `view-list` `visibility-off` `visibility-on` `warning-critical` `zoom_in` `zoom_out` `draft` `drop` `engine-1` `engine-2` `engine-3` `fleet` `fuel-tank` `propeller-1` `propeller-2` `propeller-tunnel` `shaft-with-cog` `shaft` `underwater-radar` `vessel-front` `vessel-tank` `vessel-top-outline` `vessel-top` `logo-kongsberg-fill` `logo-pnext` `logo-triton` `Dynamic-Position` `Fuelpump` `LARS` `Seismic` `TowCon` `acknowledge` `alert-list` `co-2` `conn` `dp` `eco-co2` `eco-nox` `eco-sox` `energy-efficiency` `energy-recovery` `fresh-water` `fuel-pump` `fuel` `list` `lng-gass` `machinery` `navigation` `noxx` `posrefs` `power` `propulsion-1` `propulsion-2` `safety` `sox` `system` `tank` `vessel-front-2` `mixing` `new-cargo` `unload` `voyage` `voyages` `cloud-and-moon` `cloud-and-sun` `currents-direction` `currents` `fog` `force-1` `force-10` `force-11` `force-12` `force-2` `force-3` `force-4` `force-5` `force-6` `force-7` `force-8` `force-9` `moon` `raining` `snowflake` `snowing` `sun` `sunset` `temperature` `thunder` `waves-direction` `waves` `wind-direction` `wind` `loading`	-

Slots

Main

Default render position for header content. Everything in the main slot will be render in the right position slot of the header. Although the <triton-common-header-item> is preferand as the slot input, anything is accepted. But you would be responsible to maintain the rules of the <triton-header-common>.

<triton-common-header>
  <div></div>
</triton-common-header>

center

All the same as the main slot. Content passed in will be rendered to the center position. This slot is only used to handle edge cases. The slot will always keep the same space between left and right, hence the slot is not always in center of the header.

<triton-common-header>
  <div slot="center"></div>
</triton-common-header>

left

All the same as the main slot. Content passed in will be rendered to the left position. Logo and title will always be place before the left content slot.

<triton-common-header>
  <div slot="left"></div>
</triton-common-header>

logo

Override the default logo. All type of HTMLElement is allowed, but do not use any element that is not representing a logo (allowed elements; <img>, <svg>). If you wanna override with text, use the title property and displayLogo equal false. Do not set a logo with height greater than base height (default 16px) multiplied with 3.

<triton-common-header>
  <div slot="logo"></div>
</triton-common-header>

CommonHeader

Basic Usage​

Appearance​

Title​

Logo​

Behavior​

Header Items​

Fixed​

Minimized​

Playground​

API​

Properties​

triton-common-header​

triton-common-header-item​

Slots​

Main​

center​

left​

logo​