mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-18 11:36:36 +00:00
Code Issues Projects Releases Packages Wiki Activity

feat(truncate): add text truncation component and action

Browse source
This commit is contained in:
Eric Liu 2021-02-19 07:40:19 -08:00
commit a51c300a79
13 changed files with 161 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

37
docs/src/pages/components/Truncate.svx Normal file
View file

@ -0,0 +1,37 @@
<script>
import { Truncate } from "carbon-components-svelte";
import { truncate } from "carbon-components-svelte/actions";
import Preview from "../../components/Preview.svelte";
</script>
This is a utility component that wraps the `.bx--text-truncate--*` CSS selector from `carbon-components` for single line text truncation.
### Default
By default, text will be clamped at the end of the line. Text is wrapped with a paragraph (`p`) element. Use the [truncate action](#usetruncate) to truncate text in other elements.
<Truncate>
Carbon Components Svelte is a Svelte component library that implements the Carbon Design System, an open source design system by IBM.
</Truncate>
### Direction (front)
Set `direction` to `"front"` to clamp the text from the front.
<Truncate direction="front">
Carbon Components Svelte is a Svelte component library that implements the Carbon Design System, an open source design system by IBM.
</Truncate>
### use:truncate
The `truncate` action can be used on other HTML elements.
Import path: `import { truncate } from "carbon-components-svelte/actions";`
<h4 use:truncate>
Carbon Components Svelte is a Svelte component library that implements the Carbon Design System, an open source design system by IBM.
</h4>
<h4 use:truncate={{ direction: "front" }}>
Carbon Components Svelte is a Svelte component library that implements the Carbon Design System, an open source design system by IBM.
</h4>