Interaktionen 1.2.0

Steuere, wie Nutzer mit Elementen interagieren: Cursor-Stil, Pointer-Events, Textauswahl und Touch-Actions. English: Interactions

Reifegrad: Dokumentiert als stabil in VelinStyle 1.2.0. Studio und die vollstaendige Utility Engine bleiben geplant — ausgelieferte Utilities werden manuell unter @layer utilities, kein vollstaendiger Variantengenerator.

Wann verwenden

Steuere Pointer Events, User Select und Cursor mit Interaktions-Utilities.
See also state helpers in state.css.

Wann nicht

Deaktiviere Pointer Events auf fokussierbaren Controls nicht ohne barrierefreie Alternative.

Cursor

<div class="velin-cursor-auto">Auto cursor</div>
<div class="velin-cursor-pointer">Pointer cursor</div>
<div class="velin-cursor-wait">Wait cursor</div>
<div class="velin-cursor-text">Text cursor</div>
<div class="velin-cursor-move">Move cursor</div>
<div class="velin-cursor-not-allowed">Not allowed cursor</div>
<div class="velin-cursor-grab">Grab cursor</div>
<div class="velin-cursor-grabbing">Grabbing cursor</div>

Auto cursor

Pointer cursor

Wait cursor

Text cursor

Move cursor

Not allowed cursor

Grab cursor

Grabbing cursor

Pointer Events

<a class="velin-pe-none" href="#">This link is not clickable</a>
<a class="velin-pe-auto" href="#">This link is clickable (default)</a>

This link is not clickable This link is clickable (default)

User Select

<p class="velin-user-select-all">Click to select all text at once.</p>
<p class="velin-user-select-auto">Default selection behavior.</p>
<p class="velin-user-select-none">This text cannot be selected.</p>

Click to select all text at once.

Default selection behavior.

This text cannot be selected.

Touch Action

<div class="velin-touch-action-none">Disable all gestures</div>
<div class="velin-touch-action-auto">Default touch handling</div>
<div class="velin-touch-action-pan-x">Horizontal pan only</div>
<div class="velin-touch-action-pan-y">Vertical pan only</div>
<div class="velin-touch-action-manipulation">Pan + pinch zoom only</div>

Disable all gestures

Default touch handling

Horizontal pan only

Vertical pan only

Pan + pinch zoom only