4.74.1 • Published 9 months ago

@contentful/f36-drag-handle v4.74.1

Weekly downloads
-
License
MIT
Repository
github
Last release
9 months ago

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)
Open in Storybook

Accessibility

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

9 months ago

4.74.0

9 months ago

4.71.0

9 months ago

4.71.1

9 months ago

4.71.2

9 months ago

4.73.0

9 months ago

4.72.0

9 months ago

4.70.0

10 months ago

4.69.0

10 months ago

4.69.1

10 months ago

4.69.2

10 months ago

4.65.7

1 year ago

4.65.8

1 year ago

4.65.9

1 year ago

4.67.1

1 year ago

4.67.2

12 months ago

4.67.0

1 year ago

4.66.0

1 year ago

4.67.3

12 months ago

4.67.4

12 months ago

4.68.0

11 months ago

4.68.1

11 months ago

4.65.6

1 year ago

4.65.5

1 year ago

4.65.4

1 year ago

4.65.3

1 year ago

4.65.2

1 year ago

4.65.1

1 year ago

4.65.0

1 year ago

4.63.0

1 year ago

4.64.0

1 year ago

4.62.0

1 year ago

4.61.0

1 year ago

4.60.3

1 year ago

4.60.2

1 year ago

4.60.1

1 year ago

4.60.0

1 year ago

4.59.3

1 year ago

4.59.2

1 year ago

4.59.1

1 year ago

4.59.0

1 year ago

4.58.4

1 year ago

4.58.3

1 year ago

4.58.2

1 year ago

4.58.1

1 year ago

4.58.0

2 years ago

4.57.0

2 years ago

4.56.1

2 years ago

4.56.2

2 years ago

4.56.0

2 years ago

4.55.1

2 years ago

4.55.0

2 years ago

4.54.5

2 years ago

4.54.4

2 years ago

4.49.1

2 years ago

4.49.0

2 years ago

4.52.1

2 years ago

4.52.2

2 years ago

4.52.0

2 years ago

4.52.3

2 years ago

4.47.0

2 years ago

4.48.2

2 years ago

4.48.1

2 years ago

4.48.0

2 years ago

4.51.0

2 years ago

4.54.0

2 years ago

4.54.3

2 years ago

4.54.1

2 years ago

4.54.2

2 years ago

4.53.0

2 years ago

4.46.0

2 years ago

4.47.3

2 years ago

4.47.2

2 years ago

4.47.1

2 years ago

4.50.0

2 years ago

4.50.1

2 years ago

4.50.2

2 years ago

4.45.0

2 years ago

4.44.0

2 years ago

4.37.1

2 years ago

4.37.0

2 years ago

4.40.3

2 years ago

4.40.2

2 years ago

4.40.1

2 years ago

4.40.0

2 years ago

4.40.7

2 years ago

4.40.6

2 years ago

4.40.5

2 years ago

4.40.4

2 years ago

4.36.0

2 years ago

4.39.0

2 years ago

4.42.0

2 years ago

4.38.1

2 years ago

4.38.0

2 years ago

4.41.1

2 years ago

4.41.0

2 years ago

4.43.0

2 years ago

4.35.0

2 years ago

4.31.0

2 years ago

4.30.2

2 years ago

4.30.1

2 years ago

4.30.0

2 years ago

4.30.3

2 years ago

4.33.0

2 years ago

4.29.0

2 years ago

4.32.0

2 years ago

4.34.1

2 years ago

4.34.0

2 years ago

4.28.0

2 years ago

4.27.0

2 years ago

4.25.0

2 years ago

4.26.0

2 years ago

4.24.1

2 years ago

4.25.1

2 years ago

4.25.2

2 years ago

4.24.0

3 years ago

4.21.4

3 years ago

4.21.5

3 years ago

4.21.6

3 years ago

4.21.7

3 years ago

4.21.8

3 years ago

4.23.0

3 years ago

4.23.1

3 years ago

4.23.2

3 years ago

4.22.0

3 years ago

4.23.3

3 years ago

5.0.0

3 years ago

4.21.1

3 years ago

4.21.2

3 years ago

4.21.3

3 years ago

4.21.0

3 years ago

4.20.9

3 years ago

4.16.0

3 years ago

4.20.6

3 years ago

4.20.7

3 years ago

4.20.8

3 years ago

4.15.1

3 years ago

4.18.0

3 years ago

4.17.0

3 years ago

4.20.2

3 years ago

4.20.3

3 years ago

4.20.4

3 years ago

4.20.5

3 years ago

4.20.0

3 years ago

4.20.1

3 years ago

4.19.0

3 years ago

4.19.1

3 years ago

4.19.2

3 years ago

4.15.0

3 years ago

4.14.0

3 years ago

4.13.0

3 years ago

4.11.0-beta.0

3 years ago

4.10.5

3 years ago

4.10.1

3 years ago

4.10.2

3 years ago

4.10.3

3 years ago

4.10.4

3 years ago

4.12.0

3 years ago

4.11.0

3 years ago

4.10.0

3 years ago

4.9.0

3 years ago

4.8.1

3 years ago

4.8.2

3 years ago

4.4.1

3 years ago

4.8.0

3 years ago

4.7.0

3 years ago

4.7.1

3 years ago

4.6.1

3 years ago

4.6.0

3 years ago

4.6.2

3 years ago

4.5.0

3 years ago

4.4.0

3 years ago

4.3.11

3 years ago

4.3.10

3 years ago

4.1.9

3 years ago

4.3.9

3 years ago

4.1.8

3 years ago

4.1.7

3 years ago

4.1.6

3 years ago

4.0.1

3 years ago

4.0.0

4 years ago

4.0.1-beta.2705

4 years ago

4.0.1-beta.2590

4 years ago

4.0.1-beta.2595

4 years ago

4.0.1-beta.2696

4 years ago

4.0.1-beta.2694

4 years ago

4.1.4

3 years ago

4.1.3

3 years ago

4.1.5

3 years ago

4.1.0

3 years ago

4.1.2

3 years ago

4.1.1

3 years ago

4.0.1-beta.2555

4 years ago

4.0.1-beta.2550

4 years ago

4.0.1-beta.2558

4 years ago

4.0.1-beta.2543

4 years ago

4.0.1-beta.2542

4 years ago

4.0.1-beta.2540

4 years ago

4.0.1-beta.2534

4 years ago

4.0.1-beta.2533

4 years ago

4.0.1-beta.2530

4 years ago

4.0.1-beta.2531

4 years ago

4.0.1-beta.2496

4 years ago

4.0.1-beta.2538

4 years ago

4.0.1-beta.2539

4 years ago

4.0.1-beta.2536

4 years ago

4.0.1-beta.2524

4 years ago

4.0.1-beta.2522

4 years ago

4.0.1-beta.2529

4 years ago

4.0.1-beta.2527

4 years ago

4.0.1-beta.2515

4 years ago

4.0.1-beta.2500

4 years ago

4.0.1-beta.2505

4 years ago

4.0.1-beta.2506

4 years ago

4.0.1-beta.2482

4 years ago

4.0.1-beta.2483

4 years ago

4.0.1-beta.2489

4 years ago

4.0.1-beta1.2482

4 years ago