Skip to main content
4.0.8Next5.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.8

CommonLayout

The Triton Common Layout provides simple scaffolding for rendering a page. It provides solts for header, sidebar, and main content. Triton Layout should be used for full-page applications - in cases where you are intending to use Triton throughout the application.

Basic Usage

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

<triton-common-sidebar>
...sidebar content
</triton-common-sidebar>
</triton-common-layout>
<TritonCommonLayout>
<TritonCommonHeader>
<TritonCommonHeaderItem>
Header item
</TritonCommonHeaderItem>
</TritonCommonHeader>

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

<triton-common-sidebar>
...sidebar content
</triton-common-sidebar>
</triton-common-layout>
</body>
</html>

In this example you can see the use of Triton Layout accross the page. Layout is useful for bringing a page to life quickly, and enables you to better take advantage of the complete Triton universe in your full-page applications. The Triton Layout is a wrapper for the whole web page, and provides slots for the header, sidebar, and content.

API

Properties