Pointer Event Classes #
<div class="d-p-200 d-bgc-moderate d-code--sm d-pe-auto">.d-pe-auto</div> <div class="d-p-200 d-bgc-moderate d-code--sm d-pe-inherit">.d-pe-inherit</div> <div class="d-p-200 d-bgc-moderate d-code--sm d-pe-none">.d-pe-none</div>
User Select Classes #
Use the user-select property to control whether the user can select text.
<div class="d-p-200 d-bgc-moderate d-code--sm d-us-all"> <dt-stack gap="100" class="d-ta-center"> <div>.d-us-all</div> <div>Try to select my text.</div> </dt-stack> </div> <div class="d-p-200 d-bgc-moderate d-code--sm d-us-auto"> <dt-stack gap="100" class="d-ta-center"> <div>.d-us-auto</div> <div>Try to select my text.</div> </dt-stack> </div> <div class="d-p-200 d-bgc-moderate d-code--sm d-us-none"> <dt-stack gap="100" class="d-ta-center"> <div>.d-us-none</div> <div>Try to select my text.</div> </dt-stack> </div>
Classes #
Class
|
Output
|
|---|---|
| .d-pe-auto | pointer-events: auto !important; |
| .d-pe-inherit | pointer-events: inherit !important; |
| .d-pe-none | pointer-events: none !important; |
| .d-us-all | user-select: all !important; |
| .d-us-auto | user-select: auto !important; |
| .d-us-none | user-select: none !important; |