Learn about our RFC process, Open RFC meetings & more.Join in the discussion! »

svelte-prose

0.2.0 • Public • Published

svelte-prose

NPM Build

Typography utilities for Svelte.

Inspired by the U.S. Web Design System Prose component, svelte-prose is a collection of components for long-form typography.

Install

yarn add -D svelte-prose

Usage

<script>
  import Prose, { T } from "svelte-prose";
</script> 
 
<Prose>
  <T.H1 text="Heading level 1" />
  <T.H2 text="Heading level 2" />
  <p>Some text content.</p>
</Prose>

Headings

A Heading component (T.H1, T.H2, T.H3, T.H4, T.H5, T.H6) automatically creates an id from the text prop.

<T.H1 text="Heading level 1" />
<!-- <h1 id="heading-level-1">Heading level 1</h1> -->

Table of Contents

The Prose component creates a two-tiered table of contents from headings.

Hide the default ToC to render your own:

<Prose hideToc let:toc>
  <nav>
    <ul>
      {#each toc as { id, text, children }}
      <li>
        <a href="#{id}">{text}</a>
        <ul>
          {#each children as child}
          <li>
            <a href="#{child.id}">{child.text}</a>
          </li>
          {/each}
        </ul>
      </li>
      {/each}
    </ul>
  </nav>
  <T.H1 text="Heading level 1" />
  <T.H2 text="Heading level 2" />
  <p>Some text content.</p>
</Prose>

API

Prose

Property name Value
hideToc boolean (default: false)

T.H{1-6}

Property name Value
text string (default: undefined)

Forwarded events

  • on:click
  • on:mouseover
  • on:mouseenter
  • on:mouseout

Changelog

License

MIT

Install

npm i svelte-prose

DownloadsWeekly Downloads

0

Version

0.2.0

License

MIT

Unpacked Size

99.1 kB

Total Files

18

Last publish

Collaborators

  • avatar