Vitral 0.2
Mensagens

BlockUI

Um véu sobre uma região, ou sobre a página inteira, enquanto ela está ocupada, deixando inerte o que fica por baixo e dizendo o porquê.

Testado com WAI-ARIA

Importação

main.ts
import { BlockUI } from '@vitral/vue';

Uma região

<script setup lang="ts">import { BlockUI, Button, InputText, ProgressSpinner } from '@vitral/vue';import { ref } from 'vue'; const blocked = ref(false);</script> <template>    <Button :label="blocked ? 'Unblock' : 'Block'" style="align-self: flex-start" @click="blocked = !blocked" />    <BlockUI :blocked="blocked" label="Saving the form">        <div style="display: flex; flex-direction: column; gap: 0.5rem; padding: 1rem; border: 1px solid var(--vt-content-border-color); border-radius: 8px">            <label for="block-name">Name</label>            <InputText id="block-name" />            <Button label="Save" style="align-self: flex-start" />        </div>        <template #mask><ProgressSpinner aria-hidden="true" /></template>    </BlockUI></template>

A página inteira

<script setup lang="ts">import { BlockUI, Button, ProgressSpinner } from '@vitral/vue';import { ref } from 'vue'; const page = ref(false); function blockPage() {    page.value = true;    setTimeout(() => (page.value = false), 2000);}</script> <template>    <Button label="Block for two seconds" @click="blockPage" />    <BlockUI :blocked="page" full-screen label="Please wait">        <template #mask><ProgressSpinner aria-hidden="true" /></template>    </BlockUI></template>

API

Lido de packages/vue/src/components/BlockUI/types.ts, então diz o que o componente aceita de fato.

Props

NomeTipoDescrição
blockedbooleanBloqueia a região: ela fica velada, ocupada e fora do alcance do ponteiro e do teclado.
fullScreenbooleanBloqueia a página inteira em vez da região envolvida.
labelstringO que o véu diz às tecnologias assistivas enquanto bloqueia. O padrão é o "Loading…" do locale.

Mais pt, dt e unstyled de BaseProps; veja pass-through e modo sem estilo.

Emits

EventoPayloadDescrição
block——
unblock——

Slots

NomeProps do slotDescrição
default—A região que pode ser bloqueada.
mask—Mostrado sobre o véu: um spinner, uma mensagem.