Info alert:Beta feature
This beta component is currently under review and is still open for further evolution. It is available for use in product. Beta components are considered for promotion on a quarterly basis. Please join in and give us your feedback or submit any questions on the PatternFly forum or via Slack. To learn more about the process, visit our about page or our Beta components page on GitHub.
Examples
Documentation
Usage
Class | Applied to | Outcome |
|---|---|---|
.pf-v5-c-draggable | * | Initiates a draggable element. |
.pf-v5-c-droppable | * | Initiates a droppable element. |
.pf-m-dragging | .pf-v5-c-draggable, .pf-v5-c-droppable | Indicates a draggable and droppable element are in the dragging state. |
.pf-m-drag-outside | .pf-v5-c-draggable, .pf-v5-c-droppable | Indicates a draggable element is dragged outside of a droppable element. |
CSS variables
| Expand or collapse column | Selector | Variable | Value | |
|---|---|---|---|---|
| .pf-v5-c-draggable | --pf-v5-c-draggable--Cursor | auto | ||
| .pf-v5-c-draggable | --pf-v5-c-draggable--m-dragging--Cursor | grabbing | ||
| .pf-v5-c-draggable | --pf-v5-c-draggable--m-dragging--BoxShadow | 0 0.25rem 0.5rem 0rem rgba(3, 3, 3, 0.12), 0 0 0.25rem 0 rgba(3, 3, 3, 0.06) | ||
--pf-v5-c-draggable--m-dragging--BoxShadow --pf-v5-global--BoxShadow--md $pf-v5-global--BoxShadow--md 0 pf-size-prem(4px) pf-size-prem(8px) pf-size-prem(0) rgba($pf-v5-color-black-1000, .12), 0 0 pf-size-prem(4px) 0 rgba($pf-v5-color-black-1000, .06) 0 pf-size-prem(4px) pf-size-prem(8px) pf-size-prem(0) rgba(#030303, .12), 0 0 pf-size-prem(4px) 0 rgba(#030303, .06) 0 0.25rem 0.5rem 0rem rgba(3, 3, 3, 0.12), 0 0 0.25rem 0 rgba(3, 3, 3, 0.06) | ||||
| .pf-v5-c-draggable | --pf-v5-c-draggable--m-dragging--after--BorderWidth | 1px | ||
--pf-v5-c-draggable--m-dragging--after--BorderWidth --pf-v5-global--BorderWidth--sm $pf-v5-global--BorderWidth--sm 1px | ||||
| .pf-v5-c-draggable | --pf-v5-c-draggable--m-dragging--after--BorderColor | #06c | ||
--pf-v5-c-draggable--m-dragging--after--BorderColor --pf-v5-global--active-color--100 $pf-v5-global--active-color--100 $pf-v5-color-blue-400 #06c | ||||
| .pf-v5-c-draggable | --pf-v5-c-draggable--m-drag-outside--Cursor | not-allowed | ||
| .pf-v5-c-draggable | --pf-v5-c-draggable--m-drag-outside--after--BorderColor | #c9190b | ||
--pf-v5-c-draggable--m-drag-outside--after--BorderColor --pf-v5-global--danger-color--100 $pf-v5-global--danger-color--100 $pf-v5-color-red-100 #c9190b | ||||
| .pf-v5-c-draggable.pf-m-dragging | --pf-v5-c-draggable--Cursor | grabbing | ||
--pf-v5-c-draggable--Cursor --pf-v5-c-draggable--m-dragging--Cursor grabbing | ||||
| .pf-v5-c-draggable.pf-m-drag-outside | --pf-v5-c-draggable--m-dragging--Cursor | not-allowed | ||
--pf-v5-c-draggable--m-dragging--Cursor --pf-v5-c-draggable--m-drag-outside--Cursor not-allowed | ||||
| .pf-v5-c-draggable.pf-m-drag-outside | --pf-v5-c-draggable--m-dragging--after--BorderColor | #c9190b | ||
--pf-v5-c-draggable--m-dragging--after--BorderColor --pf-v5-c-draggable--m-drag-outside--after--BorderColor --pf-v5-global--danger-color--100 $pf-v5-global--danger-color--100 $pf-v5-color-red-100 #c9190b | ||||
| .pf-v5-c-droppable | --pf-v5-c-droppable--before--BackgroundColor | transparent | ||
| .pf-v5-c-droppable | --pf-v5-c-droppable--before--Opacity | 0 | ||
| .pf-v5-c-droppable | --pf-v5-c-droppable--after--BorderWidth | 0 | ||
| .pf-v5-c-droppable | --pf-v5-c-droppable--after--BorderColor | transparent | ||
| .pf-v5-c-droppable | --pf-v5-c-droppable--m-dragging--before--BackgroundColor | #fff | ||
--pf-v5-c-droppable--m-dragging--before--BackgroundColor --pf-v5-global--palette--white $pf-v5-color-white #fff | ||||
| .pf-v5-c-droppable | --pf-v5-c-droppable--m-dragging--before--Opacity | .6 | ||
| .pf-v5-c-droppable | --pf-v5-c-droppable--m-dragging--after--BorderWidth | 1px | ||
--pf-v5-c-droppable--m-dragging--after--BorderWidth --pf-v5-global--BorderWidth--sm $pf-v5-global--BorderWidth--sm 1px | ||||
| .pf-v5-c-droppable | --pf-v5-c-droppable--m-dragging--after--BorderColor | #06c | ||
--pf-v5-c-droppable--m-dragging--after--BorderColor --pf-v5-global--active-color--100 $pf-v5-global--active-color--100 $pf-v5-color-blue-400 #06c | ||||
| .pf-v5-c-droppable | --pf-v5-c-droppable--m-drag-outside--after--BorderColor | #c9190b | ||
--pf-v5-c-droppable--m-drag-outside--after--BorderColor --pf-v5-global--danger-color--100 $pf-v5-global--danger-color--100 $pf-v5-color-red-100 #c9190b | ||||
| .pf-v5-c-droppable.pf-m-dragging | --pf-v5-c-droppable--before--BackgroundColor | #fff | ||
--pf-v5-c-droppable--before--BackgroundColor --pf-v5-c-droppable--m-dragging--before--BackgroundColor --pf-v5-global--palette--white $pf-v5-color-white #fff | ||||
| .pf-v5-c-droppable.pf-m-dragging | --pf-v5-c-droppable--before--Opacity | .6 | ||
--pf-v5-c-droppable--before--Opacity --pf-v5-c-droppable--m-dragging--before--Opacity .6 | ||||
| .pf-v5-c-droppable.pf-m-dragging | --pf-v5-c-droppable--after--BorderWidth | 1px | ||
--pf-v5-c-droppable--after--BorderWidth --pf-v5-c-droppable--m-dragging--after--BorderWidth --pf-v5-global--BorderWidth--sm $pf-v5-global--BorderWidth--sm 1px | ||||
| .pf-v5-c-droppable.pf-m-dragging | --pf-v5-c-droppable--after--BorderColor | #06c | ||
--pf-v5-c-droppable--after--BorderColor --pf-v5-c-droppable--m-dragging--after--BorderColor --pf-v5-global--active-color--100 $pf-v5-global--active-color--100 $pf-v5-color-blue-400 #06c | ||||
| .pf-v5-c-droppable.pf-m-drag-outside | --pf-v5-c-droppable--m-dragging--after--BorderColor | #c9190b | ||
--pf-v5-c-droppable--m-dragging--after--BorderColor --pf-v5-c-droppable--m-drag-outside--after--BorderColor --pf-v5-global--danger-color--100 $pf-v5-global--danger-color--100 $pf-v5-color-red-100 #c9190b | ||||
View source on GitHub
