Skip to main content
Docs
Components
Design
NextNext2.0.101.0.0
Version: Next

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​

PropertyDescriptionTypeDefault