TsSection - ToolStation - Internal Docs

Overview

The TsSection component is a responsive wrapper with a container set to a maximum width of 1280px and 16px horizontal padding. It ensures consistent alignment and spacing for content across various screen sizes.

Component Code

<template>
  <div :id="props.id"
       :class="twMerge('mb-8', props.appendClass)">
    <div :class="twMerge('mx-auto max-w-screen-xl px-4', props.containerClass)">
      <slot>
        <Blocks v-if="Object.entries(props.builderBlock).length" :parent="props.builderBlock.id"
          :path="`component.options.content`" :blocks="normalizedContent" />
      </slot>
    </div>
  </div>
</template>

<script setup lang="ts">
import { Blocks } from '@builder.io/sdk-vue';
import { twMerge } from "tailwind-merge";
import { computed } from "vue";
import { object } from 'zod';

type Props = {
  containerClass?: string,
  appendClass?: string,
  builderBlock?: object,
  content?: object[] | object,
  id?: string,
}

const props = withDefaults(defineProps<Props>(), {
  containerClass: '',
  appendClass: '',
  builderBlock: () => ({}),
  content: () => ({}),
});

const normalizedContent = computed(() =>
  Array.isArray(props.content) ? props.content : [props.content]
);
</script>

Usage

In Nuxt

<TsSection>
  <!-- Pass you content here which you want to wrap with TsSection -->
</TsSection>

In Builder

Go to the insert tab.
Search TsSection in search bar.
Hold TsSection component & drag where you want to use.
Use any component and drag inside the TsSection component.

Props

Name	Type	Default	Description
containerClass	`string`	""	`containerClass` is used to pass classes to the container of Content inside the `TsSection`
appendClass	`string`	""	`appendClass` is used to pass classes to the rootElement of `TsSection`
builderBlock	`object`	""	`builderBlock` is used for builderBlock object which set by default when dragging `TsSection` in builder visual editor.
content	`object[]`	""	`content` is only used for builder inside this we get all content which dragged inside the component from visual editor
id	`string`	""	`is` is used to provide unique id of specific `TsSection`

Slots

Name	Slot props	Description
Default	_	It is used to replace the default content with our Custom content.

Trust Pilot Widget

TsNuxtCard