@contentful/f36-drag-handle NPM

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.

@contentful/f36-core @contentful/f36-icons @contentful/f36-utils @contentful/f36-tokens emotion

@infinitebrahmanuniverse/nolb-_cont @everything-registry/sub-chunk-196 @zalastax/nolb-_cont @contentful/f36-entity-list @contentful/f36-pill @contentful/f36-card @contentful/f36-components

10 days ago

12 days ago

13 days ago

13 days ago

16 days ago

19 days ago

1 month ago

1 month ago

1 month ago

2 months ago

2 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

9 months ago

9 months ago

8 months ago

7 months ago

8 months ago

7 months ago

10 months ago

9 months ago

9 months ago

10 months ago

8 months ago

6 months ago

6 months ago

6 months ago

6 months ago

7 months ago

10 months ago

10 months ago

10 months ago

10 months ago

9 months ago

8 months ago

8 months ago

11 months ago

11 months ago

1 year ago

1 year ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

1 year ago

1 year ago

11 months ago

1 year ago

1 year ago

12 months ago

12 months ago

11 months ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

2 years ago

2 years ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

3 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

3 years ago

3 years ago

3 years ago

4.0.1-next-v4-10675.2471

3 years ago

4.0.1-next-v4-10848.2476

3 years ago

4.0.1-next-v4-10715.2474

3 years ago

4.0.1-next-v4-10839.2475

3 years ago

4.0.1-next-v4-10916.2480

3 years ago

4.0.1-beta.2482

3 years ago

4.0.1-beta.2483

3 years ago

4.0.1-next-v4-10931.2481

3 years ago

4.0.1-beta.2489

3 years ago

4.0.1-beta1.2482

3 years ago

4.0.1-next-v4-10680.2472

3 years ago

4.0.1-next-v4-10623.2468

3 years ago

4.0.1-next-v4-10647.2470

3 years ago

4.0.1-next-v4-10633.2469

3 years ago

4.0.1-next-v4-10536.2462

3 years ago

4.0.1-next-v4-10542.2463

3 years ago

4.0.1-next-v4-10612.2466

3 years ago

4.0.1-next-v4-10595.2465

3 years ago

4.0.1-next-v4-10472.2461

3 years ago

4.0.1-next-v4-10564.2464

3 years ago

4.0.1-next-v4-10423.2460

3 years ago

4.0.1-next-v4-10118.2446

3 years ago

4.0.1-next-v4-10266.2451

3 years ago

4.0.1-next-v4-10292.2452

3 years ago

4.0.1-next-v4-10345.2455

3 years ago

4.0.1-next-v4-9745.2431

3 years ago

4.0.1-next-v4-9473.2426

3 years ago

4.0.1-next-v4-9468.2425

3 years ago

4.0.1-next-v4-9789.2434

3 years ago

4.0.1-next-v4-9961.2441

3 years ago

4.0.1-next-v4-10041.2444

3 years ago

4.0.1-next-v4-10373.2458

3 years ago

4.0.1-next-v4-10308.2453

3 years ago

4.0.1-next-v4-9971.2442

3 years ago

4.0.1-next-v4-9697.2430

3 years ago

4.0.1-next-v4-10223.2450

3 years ago

4.0.1-next-v4-10152.2447

3 years ago

4.0.1-next-v4-10330.2454

3 years ago

4.0.1-next-v4-10204.2448

3 years ago

4.0.1-next-v4-9780.2433

3 years ago

4.0.1-next-v4-9898.2438

3 years ago

4.0.1-next-v4-10363.2457

3 years ago

4.0.1-next-v4-10350.2456

3 years ago

4.0.1-next-v4-9766.2432

3 years ago

4.0.1-next-v4-9921.2439

3 years ago

4.0.1-next-v4-9502.2427

3 years ago

4.0.1-next-v4-10378.2459

3 years ago

4.0.1-next-v4-9547.2428

3 years ago

4.0.1-next-v4-9952.2440

3 years ago

4.0.1-next-v4-9335.2422

3 years ago

4.0.1-next-v4-9346.2423

3 years ago

4.0.1-next-v4-9281.2419

3 years ago

4.0.1-next-v4-9274.2418

3 years ago

4.0.1-next-v4-9248.2416

3 years ago

4.0.1-next-v4-9320.2421

3 years ago

4.0.1-next-v4-9287.2420

3 years ago

4.0.1-next-v4-9225.2415

3 years ago

4.0.1-next-v4-9200.2414

3 years ago

4.0.1-next-v4-9168.2413

3 years ago

4.0.1-next-v4-9155.2412

3 years ago

4.0.1-next-v4-9049.2406

3 years ago

4.0.1-next-v4-9126.2410

3 years ago

4.0.1-next-v4-9086.2408

3 years ago

4.0.1-next-v4-9075.2407

3 years ago

4.0.1-next-v4-9019.2404

3 years ago

4.0.1-next-v4-8971.2401

3 years ago

4.0.1-next-v4-8986.2402

3 years ago

4.0.1-next-v4-8879.2361

3 years ago

4.0.1-next-v4-8833.2358

3 years ago

4.0.1-next-v4-8904.2363

3 years ago

4.0.1-next-v4-8955.2400

3 years ago

4.0.1-next-v4-8942.2365

3 years ago

4.0.1-next-v4-8846.2359

3 years ago

4.0.1-next-v4-8947.2366

3 years ago

4.0.1-next-v4-8753.2355

3 years ago

4.0.1-next-v4-8804.2357

3 years ago

4.0.1-next-v4-8514.2351

3 years ago

4.0.1-next-v4-8739.2354

3 years ago

4.0.1-next-v4-8733.2353

3 years ago

4.0.1-next-v4-8499.2349

3 years ago

4.0.1-next-v4-8377.2344

3 years ago

4.0.1-next-v4-8455.2348

3 years ago

4.0.1-next-v4-8286.2343

3 years ago

4.0.1-next-v4-8206.2342

3 years ago

4.0.1-next-v4-8093.2338

3 years ago

4.0.1-next-v4-8101.2339

3 years ago

4.0.1-next-v4-8125.2340

3 years ago

4.0.1-next-v4-8053.2336

3 years ago

4.0.1-next-v4-8006.2334

3 years ago

4.0.1-next-v4-8039.2335

3 years ago

4.0.1-next-v4-7963.2332

3 years ago

4.0.1-next-v4-8060.2337

3 years ago

4.0.1-next-v4-7985.2333

3 years ago

4.0.1-next-v4-7936.2331

3 years ago

4.0.1-next-v4-7911.2329

3 years ago

4.0.1-next-v4-7926.2330

3 years ago

4.0.1-next-v4-7774.2326

3 years ago

4.0.1-next-v4-7712.2324

3 years ago

4.0.1-next-v4-7888.2327

3 years ago

4.0.1-next-v4-7654.2323

3 years ago

4.0.1-next-v4-7604.2322

3 years ago

4.0.1-next-v4-6754.2279

3 years ago

4.0.1-next-v4-6859.2287

3 years ago

4.0.1-next-v4-6811.2284

3 years ago

4.0.1-next-v4-6748.2278

3 years ago

4.0.1-next-v4-6854.2286

3 years ago

4.0.1-next-v4-6831.2285

3 years ago

4.0.1-next-v4-6763.2280

3 years ago

4.0.1-next-v4-6795.2281

3 years ago

4.0.1-next-v4-6652.2269

3 years ago

4.0.1-next-v4-6660.2272

3 years ago

4.0.1-next-v4-6682.2274

3 years ago

4.0.1-next-v4-6664.2273

3 years ago

4.0.1-next-v4-6714.2276

3 years ago

4.0.1-next-v4-6685.2275

3 years ago

4.0.1-next-v4-6548.2251

3 years ago

4.0.1-next-v4-6507.2250

3 years ago

4.0.1-next-v4-6436.2246

3 years ago

4.0.1-next-v4-6471.2249

3 years ago

4.0.1-next-v4-6465.2248

3 years ago

4.0.1-next-v4-6423.2245

3 years ago

4.0.1-next-v4-6408.2244

3 years ago

4.0.1-next-v4-6443.2247

3 years ago

4.0.1-next-v4-6391.2243

3 years ago

4.0.1-next-v4-6381.2242

3 years ago

4.0.1-next-v4-6330.2234

3 years ago

4.0.1-next-v4-6321.2232

3 years ago

4.0.1-next-v4-6317.2231

3 years ago

4.0.1-next-v4-6313.2230

3 years ago

4.0.1-next-v4-6289.2215

3 years ago

4.0.1-next-v4-6282.2214

3 years ago