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.