@contentful/f36-drag-handle

Forma 36: DragHandle component

Usage no npm install needed!

<script type="module">
  import contentfulF36DragHandle from 'https://cdn.skypack.dev/@contentful/f36-drag-handle';
</script>

README

title: 'DragHandle' type: 'component' slug: /components/drag-handle/ github: 'https://github.com/contentful/forma-36/tree/master/packages/components/drag-handle' typescript: ./src/DragHandle.tsx storybook: 'https://v4-f36-storybook.netlify.app/?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:

Base:

<DragHandle label="Drag handle" />

Active:

<DragHandle isActive label="Active drag handle" />

Focused:

<DragHandle isFocused label="Focus drag handle" />

Hovered:

<DragHandle isHovered label="Hovered drag handle" />

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)

} > Open in Storybook

Accessibility

You should pass a relevant label to DragHandle for screen readers, the label is not rendered.