sp-truncated

NPM 1.9.0

View Storybook

Overview

API

Changelog

Description

<sp-truncated> renders a line of text, truncating it if it overflows its container. When overflowing, a tooltip is automatically created that renders the entire non-truncated content.

It is used like a <span> to contain potentially-long strings that are important for users to see, even when in small containers, like full names and email addresses.

Usage

yarn add @spectrum-web-components/truncated

Import the side effectful registration of <sp-truncated> via:

import '@spectrum-web-components/truncated/sp-truncated.js';

When looking to leverage the Truncated base class as a type and/or for extension purposes, do so via:

import { Truncated } from '@spectrum-web-components/truncated';

Example

<sp-truncated>
    This will truncate into a tooltip if there isn't enough space for it.
</sp-truncated>

With specific overflow content

By default, tooltip text will be extracted from overflowing content. To provide your own overflow content, slot it into "overflow":

<sp-truncated placement="right">
    This is the inline content
    <span slot="overflow">
        And this overflow content will go into the tooltip, on the right
    </span>
</sp-truncated>

Patch Changes

Updated dependencies []:
- @spectrum-web-components/overlay@1.9.0
- @spectrum-web-components/tooltip@1.9.0
- @spectrum-web-components/base@1.9.0
- @spectrum-web-components/styles@1.9.0

1.8.0

Patch Changes

Updated dependencies [77bdef6, 14486d6, ee1bae6, 15be17d, 14486d6]:
- @spectrum-web-components/styles@1.8.0
- @spectrum-web-components/overlay@1.8.0
- @spectrum-web-components/tooltip@1.8.0
- @spectrum-web-components/base@1.8.0

1.7.0

Patch Changes

Updated dependencies [1126cf2, a646ae8, cde976d]:
- @spectrum-web-components/styles@1.7.0
- @spectrum-web-components/overlay@1.7.0
- @spectrum-web-components/tooltip@1.7.0
- @spectrum-web-components/base@1.7.0

1.6.0

Patch Changes

Updated dependencies [700489f, 9e15a66, a9727d2, 53f3769]:
- @spectrum-web-components/tooltip@1.6.0
- @spectrum-web-components/styles@1.6.0
- @spectrum-web-components/overlay@1.6.0
- @spectrum-web-components/base@1.6.0

1.5.0

Patch Changes

Updated dependencies [165a904, 4e06533, fa4be70, daeb11f, 8f8735c, 6c58f50, fa4be70]:
- @spectrum-web-components/styles@1.5.0
- @spectrum-web-components/overlay@1.5.0
- @spectrum-web-components/tooltip@1.5.0
- @spectrum-web-components/base@1.5.0

1.4.0

Patch Changes

Updated dependencies [3cca7ea, 46cd782, 70f5f6f]:
- @spectrum-web-components/styles@1.4.0
- @spectrum-web-components/overlay@1.4.0
- @spectrum-web-components/tooltip@1.4.0
- @spectrum-web-components/base@1.4.0

1.3.0

Patch Changes

Updated dependencies [468314f]:
- @spectrum-web-components/overlay@1.3.0
- @spectrum-web-components/tooltip@1.3.0
- @spectrum-web-components/base@1.3.0
- @spectrum-web-components/styles@1.3.0

All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.