# `Expresso.Element.Toc`
[🔗](https://github.com/rellen/expresso/blob/main/lib/expresso/element/toc.ex#L1)

A table of contents: one entry for each section of the deck

A slide with the `section` option starts a section, and the section runs to
the next slide with a `section` option. `Expresso.SectionTransformer` puts
one `Expresso.Element.TocEntry` into the toc for each section, with a link
to the first slide of the section. The entries are the children of the toc,
so the `reveal` option gives each entry its own step, and the `dim` option
dims each entry when a later entry shows, as for the series of a chart.

The section of the slide of the toc is the current section. Its entry takes
the accent color. The `progress` option tells how the other entries look:

| Value | The other entries |
| --- | --- |
| `:dim_rest` | Each other entry dims. This is the default. |
| `:dim_earlier` | Each earlier entry dims. |
| `:check_earlier` | Each earlier entry gets a check mark. |
| `:strike_earlier` | A line goes through each earlier entry. |

A toc on a slide before the first section has no current section, and each
entry looks the same.

# `t`

```elixir
@type t() :: %Expresso.Element.Toc{
  __spark_metadata__: term(),
  at: term(),
  class: term(),
  dim: term(),
  easing: term(),
  effect: term(),
  el: term(),
  elements: term(),
  morph: term(),
  on: term(),
  progress: term(),
  reveal: term(),
  signature: term(),
  speed: term(),
  steps: term()
}
```

The struct of a table of contents

# `get_assigns`

```elixir
@spec get_assigns(t()) :: map()
```

Make the assigns of the render function from the struct

The key `overlay` holds the attributes of the overlay contract, from
`Expresso.Overlay.Render.attributes/1`. The key `entries` holds the
entries, each with its own attributes.

# `progress_values`

```elixir
@spec progress_values() :: [atom()]
```

Return the values of the `progress` option

    iex> Expresso.Element.Toc.progress_values()
    [:dim_rest, :dim_earlier, :check_earlier, :strike_earlier]

# `render`

```elixir
@spec render(map()) :: Phoenix.HTML.safe()
```

Make the HTML of a table of contents

The toc is a `nav` with an ordered list. The entry of the current section
has `aria-current="location"`, so a screen reader names it. Each entry is a
link of the `goto` option to the first slide of its section.

---

*Consult [api-reference.md](api-reference.md) for complete listing*