import {Meta} from '@storybook/addon-docs/blocks';

<Meta title="Deck/Actions" />

# Actions

A [DeckDeckGo] deck also contains an additional slot `actions`. In the starter kit, this slot is use to add a `social share` action for your presentation.

## Table of contents

- [Introduction](#introduction)
- [Theming](#theming)
- [Example](#example)

## Introduction

The slot `actions` provided for the deck will be cloned into each slides of your presentation. Therefore this slot will follow the swiping.

Also worth to notice, this slot will be `hidden` when the presentation will be displayed full screen.

## Theming

The following theming options will affect the slot `actions` if set on the `deckgo-deck` or any slides.

| CSS4 variable         | Default | Note                |
| --------------------- | ------- | ------------------- |
| --slide-actions-top   | 32px    | Top value           |
| --slide-actions-end   | 32px    | In LTR, right value |
| --slide-actions-start |         | In LTR, left value  |

## Example

```
<deckgo-deck>
  <deckgo-slide-title>
    <h1 slot="title">My presentation title</h1>
    <p slot="content">
      Hello World 🚀
    </p>
  </deckgo-slide-title>

  <a href="#" onclick="share()" slot="actions" style="color: inherit;"><ion-icon name="share"></ion-icon></a>
</deckgo-deck>
```

[deckdeckgo]: https://deckdeckgo.com
