@contentful/f36-drag-handle
v4.65.5
Published
Forma 36: DragHandle component
Downloads
82,868
Keywords
Readme
title: 'DragHandle' type: 'component' slug: /components/drag-handle/ github: 'https://github.com/contentful/forma-36/tree/main/packages/components/drag-handle' typescript: ./src/DragHandle.tsx storybook: 'https://f36-storybook.contentful.com/?path=/story/components-draghandle--default'
import { Heading, Stack, TextLink } from '@contentful/f36-components'; import { ExternalLinkIcon } from '@contentful/f36-icons';
DragHandle is a new component to make it easier when creating draggable elements. it contains the styling for focus, hover and dragging states. This component only needs to be used if you're creating a custom component with drag, some of our components already have this implemented, for example Card.
Import
import { DragHandle } from '@contentful/f36-components';
// or
import { DragHandle } from '@contentful/f36-drag-handle';
Examples
The DragHandle can be styled based on the props you pass to it:
Variants
DragHandle has 2 different variants:
- Secondary - Default variant.
- Transparent - For having an unstyled DragHandle.
States
Card example
<AssetCard title="Title" withDragHandle>
<Text>This is a card example with DragHandle</Text>
</AssetCard>
<Stack justifyContent="space-between" marginTop="spacing2Xl" marginBottom="spacingL"
<Heading id="props-api-reference" as="h2" marginTop="none" marginBottom="none"
Props (API reference)
Accessibility
- You should pass a relevant label to DragHandle for screen readers, the label is not rendered.