---
metaTitle: Dock component | AwesCode UI
meta:
  - name: description
    content: The <AwDock /> component is used to render Dock - UI Vue component for AwesCode UI.
title: Dock
---

# Dock

**Category:** Atom | **Import:** Global

The `AwDock` component is a slide-up panel that can be opened and closed with touch or mouse gestures.

## Overview

`AwDock` provides a bottom sheet/drawer component that slides up from the bottom of the screen. It supports touch and mouse interactions for opening/closing, and can prevent scrolling on specific elements.

## Usage

### Basic Example with Visible Slot

```markup
<AwDock>
    <AwDescription tag="div">
        Scrollable content
    </AwDescription>

    <template #visible>
        <AwButton
            color="accent"
            size="lg"
            icon-right="arrow-animated"
            highlight-icon
            class="w-full"
        >
            Action
        </AwButton>
    </template>
</AwDock>
```

### Prevent Slide on Specific Elements

```markup
<AwDock prevent-slide="a, button">
    <a href="#">Link</a>
    <button>Button</button>
</AwDock>
```

## API

### Props

| Name | Description | Type | Required | Default |
|------|-------------|------|----------|---------|
| preventSlide | Selector or boolean to prevent slide gesture | `String` / `Boolean` | `false` | `'a, button'` |
| duration | Animation duration in milliseconds | `Number` | `false` | `240` |
| togglable | Show toggle button | `Boolean` | `false` | `true` |

### Slots

| Name | Description | Props | Default Slot Content |
|------|-------------|-------|---------------------|
| default | Main dock content (scrollable when open) | - | - |
| visible | Content always visible at bottom | - | - |

### Events

| Name | Payload | Description |
|------|---------|-------------|
| open | - | Emitted when dock opens |
| close | - | Emitted when dock closes |

## Related Components

- `AwModal` - Modal dialog component
- `AwBottomBar` - Bottom bar component

## Notes

- **Import Method:** Global - Available as atom component
- **Primary Use:** Mobile/tablet component - designed for smaller screens with touch interactions
- Uses body-scroll-lock to prevent background scrolling when open
- Supports touch and mouse drag gestures
- Content in default slot becomes scrollable when dock is fully open
- Use `visible` slot for content that should always be visible (e.g., action buttons)
- **Important:** Only one AwDock component should be used per page due to fixed positioning