Skip to main content
5.0.3Next5.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: 5.0.3

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>
Some text
text with gap in between
text with gap in between

Behavior

Orientation

The orientation property is used to set the direction in which the flex Gap will be added.

horizontal:

Some text
text with gap in between
text with gap in between

vertical:

Some text
text with gap in between
text with gap in between
<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.

Block A
Some text
Block CBlock C
<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.

Some text
text with gap in between
text with gap in between
<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:

Some text
text with gap in between
text with gap in between
Some text
text with gap in between
text with gap in between

Without wrap:

Some text
text with gap in between
text with gap in between
Some text
text with gap in between
text with gap in between
<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

PropertyDescriptionTypeDefault
alignAlignment of each element inside the componentbaseline center end start-
justifyproperty 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-
orientationOrientation of the flex gaphorizontal vertical'horizontal'
spaceGap between each element in the componentbase body large medium small tiny xlarge xxlarge xxxlarge boolean'small'
wrapIf true the component will wrap all the elementsbooleanfalse

Details

Used in