Utilities: Interactivity

Cursor

pointer wait text move not-allowed grab zoom-in help

<div class="lp-d-flex lp-gap-3 lp-flex-wrap">
    <span class="lp-demo-box lp-demo-box--pill lp-cursor-pointer">pointer</span>
    <span class="lp-demo-box lp-demo-box--pill lp-cursor-wait">wait</span>
    <span class="lp-demo-box lp-demo-box--pill lp-cursor-text">text</span>
    <span class="lp-demo-box lp-demo-box--pill lp-cursor-move">move</span>
    <span class="lp-demo-box lp-demo-box--pill lp-cursor-not-allowed">not-allowed</span>
    <span class="lp-demo-box lp-demo-box--pill lp-cursor-grab">grab</span>
    <span class="lp-demo-box lp-demo-box--pill lp-cursor-zoom-in">zoom-in</span>
    <span class="lp-demo-box lp-demo-box--pill lp-cursor-help">help</span>
</div>

User Select

select-none — try to select this

select-all — click to select entirely

select-text — normal text selection

<p class="lp-select-none lp-demo-box lp-w-full">select-none — try to select this</p>
<p class="lp-select-all lp-demo-box lp-w-full lp-mt-2">select-all — click to select entirely</p>
<p class="lp-select-text lp-demo-box lp-w-full lp-mt-2">select-text — normal text selection</p>

Pointer Events

<div class="lp-demo-frame">
    <button class="lp-btn lp-btn-primary lp-pe-none">pe-none (clicks pass through)</button>
    <button class="lp-btn lp-btn-secondary lp-pe-auto lp-ml-2">pe-auto</button>
</div>

Resize

<textarea class="lp-input lp-resize lp-w-full" rows="3">resize (both — drag bottom-right corner)</textarea>
<textarea class="lp-input lp-resize-y lp-w-full lp-mt-2" rows="3">resize-y (vertical only)</textarea>
<textarea class="lp-input lp-resize-x lp-w-full lp-mt-2" rows="3">resize-x (horizontal only)</textarea>
<textarea class="lp-input lp-resize-none lp-w-full lp-mt-2" rows="3">resize-none</textarea>

Scroll Snap

Horizontal scroll with snap points — scroll with mouse wheel, touchpad, or touch. Items snap to center when you stop. (For click-drag sortable lists see the Drag & Drop plugin.)

1

2

3

4

5

<p class="lp-text-xs lp-text-muted lp-mb-2">Horizontal scroll with snap points — scroll with mouse wheel, touchpad, or touch. Items snap to center when you stop. (For click-drag sortable lists see the <a href="/plugins/dragdrop">Drag &amp; Drop plugin</a>.)</p>
<div class="lp-d-flex lp-overflow-x-auto lp-snap-x lp-snap-mandatory lp-gap-3 lp-p-3 lp-demo-frame" style="max-width: 480px;">
    <div class="lp-snap-center lp-demo-box lp-flex-shrink-0 lp-wf-80 lp-hf-32 lp-bg-primary lp-text-white lp-d-flex lp-items-center lp-justify-center">1</div>
    <div class="lp-snap-center lp-demo-box lp-flex-shrink-0 lp-wf-80 lp-hf-32 lp-bg-success lp-text-white lp-d-flex lp-items-center lp-justify-center">2</div>
    <div class="lp-snap-center lp-demo-box lp-flex-shrink-0 lp-wf-80 lp-hf-32 lp-bg-danger lp-text-white lp-d-flex lp-items-center lp-justify-center">3</div>
    <div class="lp-snap-center lp-demo-box lp-flex-shrink-0 lp-wf-80 lp-hf-32 lp-bg-warning lp-text-black lp-d-flex lp-items-center lp-justify-center">4</div>
    <div class="lp-snap-center lp-demo-box lp-flex-shrink-0 lp-wf-80 lp-hf-32 lp-bg-info lp-text-white lp-d-flex lp-items-center lp-justify-center">5</div>
</div>

Skeleton Loading

<div class="lp-max-w-md lp-d-flex lp-gap-3 lp-items-start">
    <div class="lp-skeleton lp-skeleton-avatar"></div>
    <div class="lp-flex-1">
        <div class="lp-skeleton lp-skeleton-title lp-mb-2"></div>
        <div class="lp-skeleton lp-skeleton-text lp-mb-1"></div>
        <div class="lp-skeleton lp-skeleton-text lp-w-3-4"></div>
    </div>
</div>

CSS Reference

Class	Description
`.lp-cursor-{auto\|default\|pointer\|wait\|text\|move\|not-allowed\|grab\|grabbing\|zoom-in\|zoom-out\|help\|progress\|crosshair\|copy}`	Cursor style
`.lp-select-{none\|text\|all\|auto}`	User select
`.lp-pe-{none\|auto}`	Pointer events
`.lp-resize-{none\|x\|y\|both}`	Resize handle
`.lp-scroll-{auto\|smooth}`	Scroll behavior
`.lp-snap-{x\|y\|both\|none}`	Scroll-snap type
`.lp-snap-{start\|center\|end\|none}`	Snap alignment
`.lp-snap-{mandatory\|proximity}`	Snap strictness
`.lp-touch-{auto\|none\|pan-x\|pan-y\|pinch-zoom\|manipulation}`	Touch action
`.lp-appearance-{none\|auto}`	Appearance
`.lp-will-change-{auto\|scroll\|contents\|transform}`	Will change hint
`.lp-skeleton` + `.lp-skeleton-{text\|title\|avatar\|img\|btn}`	Skeleton loading