BannerLayout - ToolStation

Overview

The TsBannerLayout component is a flexible layout with three customizable blocks: leftBlocks, rightTopBlocks, and rightBottomBlocks. It supports drag-and-drop functionality in Builder.io, allowing seamless integration of custom components into each block.

Component Code

<template>
  <div class="flex items-stretch" :id="`three-banner-layout-${random_id}`">
    <div class="items-stretch grow">
        <Blocks
            class="w-full"
            :parent="props.builderBlock?.id"
            :path="`component.options.leftBlocks`"
            :blocks="props.leftBlocks"
        />
    </div>
    <div class="min-w-[350px]">

        <Blocks
            class="w-full"
            :parent="props.builderBlock?.id"
            :path="`component.options.rightTopBlocks`"
            :blocks="props.rightTopBlocks"
        />

        <Blocks
            class="w-full"
            :parent="props.builderBlock?.id"
            :path="`component.options.rightBottomBlocks`"
            :blocks="props.rightBottomBlocks"
        />

    </div>
  </div>
</template>

<script setup lang="ts">
import { Blocks } from '@builder.io/sdk-vue';

type Props = {
  builderBlock?: object;
  leftBlocks?: any[];
  rightTopBlocks?: any[];
  rightBottomBlocks?: any[];
}

const props = defineProps<Props>();

const random_id = ref('')

onMounted(() => {
  random_id.value = useRandomUUID()
})
</script>

Usage

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

Props

Name	Type	Default	Description
builderBlock	`object`	""	`builderBlock` is used for builderBlock object which set by default when dragging `BannerLayout` in builder visual editor.
leftBlocks	`any[]`	""	`leftBlocks` is used to add block in left section of `BannerLayout` and It's hidden from the visual editor.
rightTopBlocks	`any[]`	""	`rightTopBlocks` is used to add block in left section of `BannerLayout` and It's hidden from the visual editor.
rightBottomBlocks	`any[]`	""	`rightBottomBlocks` is used to add block in left section of `BannerLayout` and It's hidden from the visual editor.

TsContentStatic

Button PDF Form Trigger