Version: Next

CommonHeader

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 across 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

TritonCommonHeader

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`	`'/'`

TritonCommonHeaderItem

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	`-nav-dots-vertical` `Dynamic-Position` `Fuelpump` `LARS` `Login` `Logout` `Seismic` `TowCon` `access` `account-circle` `acknowledge` `add-picture` `alarm` `alert-list` `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` `analyse` `angle-swap-horizontal` `angle-swap-vertical` `announcement` `app-store` `application` `application-1` `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` `baseline` `battery-charging` `bookmark` `border-color` `border-size` `border-type` `box` `brightness` `broadcast` `bus-switch` `calendar` `cancel` `caret-down` `caret-left` `caret-right` `caret-up` `chart-area` `chart-bar` `chart-donut` `chart-gauge` `chart-line` `chart-pie` `chart-radar` `chart-scatter` `charts` `chat-buble` `check` `chevron-down` `chevron-left` `chevron-right` `chevron-up` `chevron-wide-right` `circle` `clock` `clock-fill` `close` `cloud` `cloud-and-moon` `cloud-and-sun` `cloud-download` `cloud-download-2` `cloud-upload` `cloud-upload-2` `co-2` `co2` `cog` `color-border` `color-fill` `color-picker` `color-text` `compass` `config` `configuration` `confirmation-number` `conn` `container` `copy` `currents` `currents-direction` `cut` `dark` `dashboard` `dashboard-editor` `day` `day-dusk` `db` `db-cloud` `device-hub` `documents` `donut` `dots-horizontal` `dots-vertical` `double-chevron-up` `dp` `draft` `drag-item` `drag-item-1` `drop` `dusk` `eco-co2` `eco-nox` `eco-sox` `edit` `edit-redo` `edit-undo` `emblem` `energy-efficiency` `energy-recovery` `engine-1` `engine-2` `engine-3` `equipment-diagram` `expand` `external-page` `fast_forward` `fast_rewind` `feed` `file` `fill-color` `filter-1` `filter-2` `fingerprint` `flash` `fleet` `fog` `folder` `folder-outlined` `force-1` `force-10` `force-11` `force-12` `force-2` `force-3` `force-4` `force-5` `force-6` `force-7` `force-8` `force-9` `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` `fresh-water` `fuel` `fuel-pump` `fuel-tank` `fullscreen` `fullscreen-exit` `gauge` `group` `group1` `hamburger` `hard-drive` `help` `help-2` `home` `inactive` `indented-list` `info` `info-2` `insert_chart_outlined` `insert_photo` `label` `layers` `light` `line` `link` `link-off` `list` `lng-gass` `load-more` `loading` `lock` `lock-locked` `lock-open` `logo-facebook` `logo-kongsberg` `logo-kongsberg-fill` `logo-linkedin` `logo-pnext` `logo-triton` `logo-twitter` `machinery` `mail` `map` `master-track` `math-sum` `minus` `mixing` `moon` `my-wells` `nav-apps-list` `nav-dots-horizontal` `navigation` `navigation-arrow` `new-cargo` `night` `notification` `notification-2` `nox` `noxx` `object-list` `on-off-switch` `operation-tree` `palette` `papers` `paste` `pause` `pencil` `pending-actions` `person` `phone` `pin` `place` `play` `plus` `posrefs` `power` `preview` `print` `privacy` `propeller-1` `propeller-2` `propeller-tunnel` `propulsion-1` `propulsion-2` `pull-down` `pull-left` `pull-right` `pull-up` `raining` `record` `rectangle` `redo` `reload` `reset` `reset-zoom` `return-1` `returns` `router` `run-analysis` `safety` `save` `scale` `screen` `search` `sensor-bar` `shaft` `shaft-with-cog` `share-1` `share-2` `show-password` `signal` `single-line-diagram` `slash` `snowflake` `snowing` `sox` `spinner` `star` `star-empty` `step_back` `step_forward` `stop` `sucess` `sum` `sun` `sunset` `support` `system` `table` `tank` `temperature` `template` `template-configuration` `tenants` `terminal` `test-this` `text` `text-color` `threshold` `thunder` `trash` `underwater-radar` `undo` `unload` `update-timer` `update-timer-2` `vertical-align-bottom` `vertical-align-top` `vessel-front` `vessel-front-2` `vessel-statistics` `vessel-tank` `vessel-top` `vessel-top-outline` `view-list` `visibility-off` `visibility-on` `voyage` `voyages` `warning-critical` `waves` `waves-direction` `wind` `wind-direction` `zoom_in` `zoom_out`	-

Slots

Main

Default render position for header content. Anything in this slot will be rendered in the right position of the header. Although the <triton-common-header-item> is preferand as the slot input, anything is accepted. It is the implementer's responsibility 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 to this slot will be rendered in the center position. This slot is only used to handle edge cases. The slot will always keep the same space between left and right, so content may not appear in the precise center of the header.

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

left

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

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

logo

Override the default logo. Any HTMLElement can be passed, but do not use any element that is not representing a logo (allowed elements; <img>, <svg>). If you want to override with text, use the title property and displayLogo = false. Do not set a logo with height greater than the base height (default 16px) multiplied by 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​

TritonCommonHeader​

TritonCommonHeaderItem​

Slots​

Main​

center​

left​

logo​