Documentation/API

makeSelectionArea

Un rectangle de sélection qui sélectionne les éléments déplaçables qu'il touche — faites glisser l'un d'eux, et toute la sélection se déplace.

Modifier cette page

Cette page a été traduite par IA et peut contenir des inexactitudes. Lire l'original en anglais

function makeSelectionArea(  target: MaybeElementRef,  options?: SelectionAreaOptions,): SelectionAreaReturn;

Fait d'un élément une zone de sélection au rectangle pour les éléments déplaçables qu'il contient. Rendez le rectangle vous-même : <div v-if="isSelecting" class="band" :style="style" />.

<script setup lang="ts">
const area = useTemplateRef<HTMLElement>('area');
const { isSelecting, style } = makeSelectionArea(area);
</script>

<template>
  <div ref="area" class="area">
    <!-- items -->
    <div v-if="isSelecting" class="band" :style="style" />
  </div>
</template>

Un appui sur l'espace vide de la zone lance le rectangle. Voir Multi-drag et sélection.

Live Tracez un rectangle sur l'espace vide, puis faites glisser une forme sélectionnée

Chargement de la démo…

<script setup lang="ts">
import { DnDProvider } from '@vue-dnd-kit/core';
import ShapeBoard from './ShapeBoard.vue';
</script>

<template>
  <DnDProvider>
    <ShapeBoard />
  </DnDProvider>
</template>

Options

Options de makeSelectionArea. Le rectangle sélectionne dans la sélection du provider, celle que lisent le multi-drag et selected (useDnD().selection). modifier, strategy, accept et disabled acceptent une valeur, une ref ou un getter (accept : une valeur ou une ref, une fonction est une règle) et sont lues quand un appui lance un rectangle ; activer disabled annule aussi un rectangle en cours.

modifier?

SelectionModifiervaleur · ref · getter

Les touches à maintenir pour qu'un appui dessine un rectangle. Par défaut : aucune, tout appui sur l'espace vide dessine.

strategy?

SelectionStrategyvaleur · ref · getter

'toggle' par défaut.

accept?

AcceptRulevaleur · ref

Les éléments déplaçables que le rectangle sélectionne ; le même mécanisme de correspondance que pour les cibles de dépôt.

disabled?

booleanvaleur · ref · getter

true : les appuis ne dessinent aucun rectangle.

onSelected?

(ids: Key[]) => void

Le rectangle est terminé : reçoit tous les ids sélectionnés à présent.

Valeur de retour

Ce que renvoie makeSelectionArea.

isSelecting

ComputedRef<boolean>

Un rectangle est en train d'être dessiné : rendez-le à ce moment-là.

style

ComputedRef<Record<string, string>>

Style de l'élément du rectangle de sélection (absolu, relatif au conteneur).

Valeurs

'toggle' : les items que le rectangle traverse inversent l'état qu'ils avaient avant le rectangle ;
'select' : seuls les items à l'intérieur du rectangle sont sélectionnés.

type SelectionStrategy = 'toggle' | 'select'

Les touches (KeyboardEvent.key ou .code) à maintenir pour qu'un appui trace un rectangle : toutes, ou seulement certaines ('some').

keys

string[]

Les touches, sous forme de KeyboardEvent.key ('Shift') ou de .code ('KeyA'). Aucune : tout appui dessine.

method

'every' | 'some'

'every' : toutes les keys doivent être maintenues ; 'some' : l'une d'elles suffit.