@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

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

11 months ago

11 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

12 months ago

12 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

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

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

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

3 years ago

3 years ago

3 years ago

4 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 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