Name EN
Component checklist
Usage
<dsa-split-panel>
<div slot="start">Start </div>
<div slot="end">End</div>
</dsa-split-panel>
<script type="text/typescript">
import '@ds-autonomie/web-components/dist/components/split-panel/split-panel.js';
import type { DSASplitPanel } from '@ds-autonomie/web-components';
</script>
Code HTML à implémenter pour utiliser l'alerte
Les tailles minimale et maximale du panneau principal sont ajustables via les variables CSS --min (défaut : 0 px) et --max (défaut : 100%).
API
Attributs et propriétés
|
Propriété attribut |
Description |
Type |
Valeur par défaut |
|---|---|---|---|
|
position |
La position actuelle du séparateur par rapport au bord du panneau principal, exprimée en pourcentage de 0 à 100. Par défaut, elle est définie à 50 % de la taille initiale du conteneur. |
number |
50 |
|
positionInPixels position-in-pixels |
La position actuelle du séparateur par rapport au bord du panneau principal, en pixels. |
number |
- |
|
disabled |
Désactive le redimensionnement. Notez que la position peut encore changer en raison du redimensionnement de l'élément hôte. |
boolean |
false |
|
vertical |
Affiche le split panel dans une orientation verticale avec les panneaux de début et de fin empilés. |
boolean |
false |
|
primary |
Si aucun panneau principal n'est désigné, les deux panneaux seront redimensionnés proportionnellement lorsque l'élément hôte est redimensionné. Si un panneau principal est désigné, il conservera sa taille et l'autre panneau s'agrandira ou rétrécira selon les besoins lorsque l'élément hôte est redimensionné. |
'start' | 'end' |
- |
|
snap |
Un ou plusieurs valeurs séparées par des espaces auxquelles le séparateur doit s'aligner. Les valeurs peuvent être en pixels ou en pourcentages, par exemple : "100px 50%" |
string |
- |
|
snapThreshold snap-threshold |
quelle distance le séparateur doit se trouver d'un point d'ancrage pour que l'alignement se produise. |
number |
12 |