Gap
The component takes in child elements and adds gaps between them. The orientation property can be set to "horizontal" or "vertical" to specify the direction of the gap. The align property can be used to set the alignment of the elements within the Gap component, and the space property is used to set the amount of space between the elements. Additionally, the wrap property can be used to make the Gap component wrap all the elements within it.
Basic Usage
<triton-gap>
<div class="with-border"> Some text </div>
<div class="with-border"> text with gap in between </div>
<div class="with-border"> text with gap in between </div>
</triton-gap>
<TritonGap>
<div class="with-border"> Some text </div>
<div class="with-border"> text with gap in between </div>
<div class="with-border"> text with gap in between </div>
</TritonGap>
<html>
<head>
<script type="module">
import { defineCustomElements } from '~node_modules/@kognifai/triton-cl-core/loader/index.es2017.js';
defineCustomElements();
</script>
</head>
<body>
<triton-gap>
<div class="with-border"> Some text </div>
<div class="with-border"> text with gap in between </div>
<div class="with-border"> text with gap in between </div>
</triton-gap>
</body>
</html>
Behavior
Orientation
The orientation property is used to set the direction in which
the flex Gap will be added.
horizontal:
vertical:
<triton-gap orientation="vertical">
<div> Some text </div>
<div> text with gap in between </div>
<div> text with gap in between </div>
</triton-gap>
Align
The align property can be used to set the alignment of the
elements within the Gap component.
<triton-gap align="center">
<triton-badge>Block A</triton-badge>
<div> Some text </div>
<triton-badge size="small">Block B</triton-badge>
<triton-button size="large">Block C</triton-button>
</triton-gap>
Space
The space property is used to set the amount of space which is
added by the Gap component.
<triton-gap space="large">
<div> Some text </div>
<div> text with gap in between </div>
<div> text with gap in between </div>
</triton-gap>
Wrap
The wrap property can be enabled to make the Gap component
wrap all the elements within it.
With wrap:
Without wrap:
<triton-gap wrap>
<div> Some text </div>
<div> text with gap in between </div>
<div> text with gap in between </div>
</triton-gap>
Playground
API
Properties
| Property | Description | Type | Default |
|---|---|---|---|
align | Alignment of each element inside the component | baseline center end start | - |
justify | property defines how the component distributes space between and around content items along the main-axis of a flex container, and the inline axis of a grid container. | around between end evenly start | - |
orientation | Orientation of the flex gap | horizontal vertical | 'horizontal' |
space | Gap between each element in the component | base body large medium small tiny xlarge xxlarge xxxlarge boolean | 'small' |
wrap | If true the component will wrap all the elements | boolean | false |