TextLoader

Extends TextLoader

import { TextLoader } from '@bbc/front-end-kit/vue/showpad'

Extends TextLoader with data-sp-* support for config-driven label injection. When dataSp is set, the label span receives a data-sp attribute using {{ path }}.label so the ConfigGenerator can scan and the Config can inject the label at runtime.

Getting started

<template>
    <div>
        <TextLoader v-if="isLoading" data-sp="path.to.loader" />
        <div v-else>Content loaded</div>
    </div>
</template>

<script setup>
import { ref } from 'vue';
import { TextLoader } from '@bbc/front-end-kit/vue/showpad'

const isLoading = ref(true);
</script>

API

This component extends from TextLoader. All attributes will be passed on to that parent component unless documented here.

Properties

dataSp

The data-sp path used as the region and label path base. When set, the label span receives data-sp="{{ path }}.label" and data-sp-description automatically.

Values: String

Default: null

dataSpDescription

Description applied to the label span via data-sp-description.

Values: String

Default: 'Loader'

Slots

No additional slots next to TextLoader.