@spectrum-web-components/truncated v1.7.0
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>
4 months ago
26 days ago
2 months ago
5 months ago
7 months ago
2 months ago
8 months ago
8 months ago
7 months ago
8 months ago
7 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
4 months ago
8 months ago
8 months ago
7 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
3 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
5 months ago
5 months ago
5 months ago
3 months ago
5 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
7 months ago
8 months ago
8 months ago
7 months ago
7 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
4 months ago
7 months ago
4 months ago
5 months ago
8 months ago
2 months ago
5 months ago
3 months ago
7 months ago
7 months ago
3 months ago
7 months ago
7 months ago
5 months ago
7 months ago
7 months ago
7 months ago
7 months ago
5 months ago
7 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
3 months ago
4 months ago
5 months ago
2 months ago
7 months ago
5 months ago
7 months ago
4 months ago
24 days ago
4 months ago
3 months ago
7 months ago
2 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
2 months ago
3 months ago
5 months ago
4 months ago
3 months ago
3 months ago
4 months ago
5 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
1 year ago
10 months ago
10 months ago
10 months ago
11 months ago
11 months ago
1 year ago
12 months ago
11 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago