Examples
Basic
Click and drag on the background to draw a selection rectangle. Items that overlap will be highlighted. Drag to the bottom or top edge of the browser window to auto-scroll.
Shirt 1 ($10)
Shirt 2 ($20)
Shirt 3 ($30)
Shirt 4 ($40)
Shirt 5 ($50)
Shirt 6 ($60)
Shirt 7 ($10)
Shirt 8 ($20)
Shirt 9 ($30)
Shirt 10 ($40)
Shirt 11 ($50)
Shirt 12 ($60)
Shirt 13 ($10)
Shirt 14 ($20)
Shirt 15 ($30)
Shirt 16 ($40)
Shirt 17 ($50)
Shirt 18 ($60)
Shirt 19 ($10)
Shirt 20 ($20)
Shirt 21 ($30)
Shirt 22 ($40)
Shirt 23 ($50)
Shirt 24 ($60)
Shirt 25 ($10)
Shirt 26 ($20)
Shirt 27 ($30)
Shirt 28 ($40)
Shirt 29 ($50)
Shirt 30 ($60)
Shirt 31 ($10)
Shirt 32 ($20)
Shirt 33 ($30)
Shirt 34 ($40)
Shirt 35 ($50)
Shirt 36 ($60)
Shirt 37 ($10)
Shirt 38 ($20)
Shirt 39 ($30)
Shirt 40 ($40)
Shirt 41 ($50)
Shirt 42 ($60)
Shirt 43 ($10)
Shirt 44 ($20)
Shirt 45 ($30)
Shirt 46 ($40)
Shirt 47 ($50)
Shirt 48 ($60)
Shirt 49 ($10)
Shirt 50 ($20)
Shirt 51 ($30)
Shirt 52 ($40)
Shirt 53 ($50)
Shirt 54 ($60)
Shirt 55 ($10)
Shirt 56 ($20)
Shirt 57 ($30)
Shirt 58 ($40)
Shirt 59 ($50)
Shirt 60 ($60)
With PatternFly cards
Rectangle selection over a PatternFly gallery of cards.
Server A
Running
Server B
Stopped
Server C
Running
Server D
Running
Server E
Stopped
Server F
Running
Server G
Running
Server H
Stopped
Documentation
Usage
Mark items with data-selectable. The component wraps its content slot
and tracks any descendant carrying the attribute; items overlapped by the drag rectangle are highlighted and
reported. Listen for the rectangle-selected /
rectangle-deselected window events (the counter in the basic example does exactly that)
to react to selection changes.
Required assets. /web/css/components/rectangle-selection.css and
/web/js/alpine/components/rectangle-selection.js (before Alpine).