Skip to main content
4.0.9Next5.1.05.0.35.0.25.0.15.0.04.0.94.0.84.0.73.2.03.1.03.0.13.0.02.1.12.0.101.0.0
Version: 4.0.9

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 1Item 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>

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

Item 1Item 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

PropertyDescriptionTypeDefault
display-logoIf true the default logo will appear in the left corner of the headerbooleantrue
fixedIf true the header will stick to the top of the windowbooleantrue
titleTitle for the header. The title will display next to the logostring-
minimizednot implementet yet show the header in minimized version only the logo will show and the header content will be available through a dropdownbooleanfalse
page-root-urlIf url is given the header will append a link to the logo andor the title. If false this feature will be toggled ofboolean string'/'

TritonCommonHeaderItem

PropertyDescriptionTypeDefault
titleThe title of the header item. This will add a title paragraph into the wrapper.string-
positionSet the position of the header itemcenter left right'right'
symbolSet one of Tritons provided icons as the icon for the header itemsearch link logo-kongsberg analyse chart-area chart-bar chart-donut chart-gauge chart-line chart-pie chart-radar chart-scatter charts config donut gauge run-analysis table vessel-statistics baseline bus-switch equipment-diagram single-line-diagram threshold -nav-dots-vertical 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_drop_down arrow_drop_up arrow-align-middle arrow-back arrow-down arrow-forward arrow-head arrow-left arrow-right arrow-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-picker 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_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 format-itallic format-remove format-underline frame fullscreen-exit fullscreen group group1 hamburger hard-drive help-2 help home indented-list info-2 info insert_chart_outlined insert_photo label layers light line link-off load-more loading lock-locked lock-open lock Login logo-facebook logo-linkedin logo-twitter Logout mail map math-sum minus my-wells nav-apps-list nav-dots-horizontal navigation-arrow night 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 save 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 acknowledge alert-list co-2 conn dp Dynamic-Position eco-co2 eco-nox eco-sox energy-efficiency energy-recovery fresh-water fuel-pump fuel Fuelpump LARS list lng-gass machinery navigation noxx posrefs power propulsion-1 propulsion-2 safety Seismic sox system tank TowCon vessel-front-2 mixing new-cargo terminal 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 master-track operation-tree-

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>