@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 @contentful/f36-components @contentful/f36-card @contentful/f36-pill @contentful/f36-entity-list @zalastax/nolb-_cont

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

10 months ago

10 months ago

10 months ago

10 months ago

1 year ago

1 year ago

1 year ago

1 year ago

12 months ago

1 year ago

1 year ago

12 months ago

12 months ago

11 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

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

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4.0.1-next-v4-10675.2471

4 years ago

4.0.1-next-v4-10848.2476

4 years ago

4.0.1-next-v4-10715.2474

4 years ago

4.0.1-next-v4-10839.2475

4 years ago

4.0.1-next-v4-10916.2480

4 years ago

4.0.1-beta.2482

4 years ago

4.0.1-beta.2483

4 years ago

4.0.1-next-v4-10931.2481

4 years ago

4.0.1-beta.2489

4 years ago

4.0.1-beta1.2482

4 years ago

4.0.1-next-v4-10680.2472

4 years ago

4.0.1-next-v4-10623.2468

4 years ago

4.0.1-next-v4-10647.2470

4 years ago

4.0.1-next-v4-10633.2469

4 years ago

4.0.1-next-v4-10536.2462

4 years ago

4.0.1-next-v4-10542.2463

4 years ago

4.0.1-next-v4-10612.2466

4 years ago

4.0.1-next-v4-10595.2465

4 years ago

4.0.1-next-v4-10472.2461

4 years ago

4.0.1-next-v4-10564.2464

4 years ago

4.0.1-next-v4-10423.2460

4 years ago

4.0.1-next-v4-10118.2446

4 years ago

4.0.1-next-v4-10266.2451

4 years ago

4.0.1-next-v4-10292.2452

4 years ago

4.0.1-next-v4-10345.2455

4 years ago

4.0.1-next-v4-9745.2431

4 years ago

4.0.1-next-v4-9473.2426

4 years ago

4.0.1-next-v4-9468.2425

4 years ago

4.0.1-next-v4-9789.2434

4 years ago

4.0.1-next-v4-9961.2441

4 years ago

4.0.1-next-v4-10041.2444

4 years ago

4.0.1-next-v4-10373.2458

4 years ago

4.0.1-next-v4-10308.2453

4 years ago

4.0.1-next-v4-9971.2442

4 years ago

4.0.1-next-v4-9697.2430

4 years ago

4.0.1-next-v4-10223.2450

4 years ago

4.0.1-next-v4-10152.2447

4 years ago

4.0.1-next-v4-10330.2454

4 years ago

4.0.1-next-v4-10204.2448

4 years ago

4.0.1-next-v4-9780.2433

4 years ago

4.0.1-next-v4-9898.2438

4 years ago

4.0.1-next-v4-10363.2457

4 years ago

4.0.1-next-v4-10350.2456

4 years ago

4.0.1-next-v4-9766.2432

4 years ago

4.0.1-next-v4-9921.2439

4 years ago

4.0.1-next-v4-9502.2427

4 years ago

4.0.1-next-v4-10378.2459

4 years ago

4.0.1-next-v4-9547.2428

4 years ago

4.0.1-next-v4-9952.2440

4 years ago

4.0.1-next-v4-9335.2422

4 years ago

4.0.1-next-v4-9346.2423

4 years ago

4.0.1-next-v4-9281.2419

4 years ago

4.0.1-next-v4-9274.2418

4 years ago

4.0.1-next-v4-9248.2416

4 years ago

4.0.1-next-v4-9320.2421

4 years ago

4.0.1-next-v4-9287.2420

4 years ago

4.0.1-next-v4-9225.2415

4 years ago

4.0.1-next-v4-9200.2414

4 years ago

4.0.1-next-v4-9168.2413

4 years ago

4.0.1-next-v4-9155.2412

4 years ago

4.0.1-next-v4-9049.2406

4 years ago

4.0.1-next-v4-9126.2410

4 years ago

4.0.1-next-v4-9086.2408

4 years ago

4.0.1-next-v4-9075.2407

4 years ago

4.0.1-next-v4-9019.2404

4 years ago

4.0.1-next-v4-8971.2401

4 years ago

4.0.1-next-v4-8986.2402

4 years ago

4.0.1-next-v4-8879.2361

4 years ago

4.0.1-next-v4-8833.2358

4 years ago

4.0.1-next-v4-8904.2363

4 years ago

4.0.1-next-v4-8955.2400

4 years ago

4.0.1-next-v4-8942.2365

4 years ago

4.0.1-next-v4-8846.2359

4 years ago

4.0.1-next-v4-8947.2366

4 years ago

4.0.1-next-v4-8753.2355

4 years ago

4.0.1-next-v4-8804.2357

4 years ago

4.0.1-next-v4-8514.2351

4 years ago

4.0.1-next-v4-8739.2354

4 years ago

4.0.1-next-v4-8733.2353

4 years ago

4.0.1-next-v4-8499.2349

4 years ago

4.0.1-next-v4-8377.2344

4 years ago

4.0.1-next-v4-8455.2348

4 years ago

4.0.1-next-v4-8286.2343

4 years ago

4.0.1-next-v4-8206.2342

4 years ago

4.0.1-next-v4-8093.2338

4 years ago

4.0.1-next-v4-8101.2339

4 years ago

4.0.1-next-v4-8125.2340

4 years ago

4.0.1-next-v4-8053.2336

4 years ago

4.0.1-next-v4-8006.2334

4 years ago

4.0.1-next-v4-8039.2335

4 years ago

4.0.1-next-v4-7963.2332

4 years ago

4.0.1-next-v4-8060.2337

4 years ago

4.0.1-next-v4-7985.2333

4 years ago

4.0.1-next-v4-7936.2331

4 years ago

4.0.1-next-v4-7911.2329

4 years ago

4.0.1-next-v4-7926.2330

4 years ago

4.0.1-next-v4-7774.2326

4 years ago

4.0.1-next-v4-7712.2324

4 years ago

4.0.1-next-v4-7888.2327

4 years ago

4.0.1-next-v4-7654.2323

4 years ago

4.0.1-next-v4-7604.2322

4 years ago

4.0.1-next-v4-6754.2279

4 years ago

4.0.1-next-v4-6859.2287

4 years ago

4.0.1-next-v4-6811.2284

4 years ago

4.0.1-next-v4-6748.2278

4 years ago

4.0.1-next-v4-6854.2286

4 years ago

4.0.1-next-v4-6831.2285

4 years ago

4.0.1-next-v4-6763.2280

4 years ago

4.0.1-next-v4-6795.2281

4 years ago

4.0.1-next-v4-6652.2269

4 years ago

4.0.1-next-v4-6660.2272

4 years ago

4.0.1-next-v4-6682.2274

4 years ago

4.0.1-next-v4-6664.2273

4 years ago

4.0.1-next-v4-6714.2276

4 years ago

4.0.1-next-v4-6685.2275

4 years ago

4.0.1-next-v4-6548.2251

4 years ago

4.0.1-next-v4-6507.2250

4 years ago

4.0.1-next-v4-6436.2246

4 years ago

4.0.1-next-v4-6471.2249

4 years ago

4.0.1-next-v4-6465.2248

4 years ago

4.0.1-next-v4-6423.2245

4 years ago

4.0.1-next-v4-6408.2244

4 years ago

4.0.1-next-v4-6443.2247

4 years ago

4.0.1-next-v4-6391.2243

4 years ago

4.0.1-next-v4-6381.2242

4 years ago

4.0.1-next-v4-6330.2234

4 years ago

4.0.1-next-v4-6321.2232

4 years ago

4.0.1-next-v4-6317.2231

4 years ago

4.0.1-next-v4-6313.2230

4 years ago

4.0.1-next-v4-6289.2215

4 years ago

4.0.1-next-v4-6282.2214

4 years ago