mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-16 02:41:05 +00:00
Alignment with Carbon version 10.29 (#529)
* chore: patch prettier-plugin-svelte * docs(tag): add filterable small tag example * feat(ui-shell): add SideNavDivider * feat(combo-box): support warning state * docs(combo-box): add invalid state example * fix(progress-step): add title to warning icon * docs(progress-indicator): add invalid step example * docs(progress-indicator): add disabled steps example * feat(truncate): add text truncation component and action * docs(radio-tile): fix light variant example * fix(side-effects): add pre-compiled CSS to library side effects * refactor(css): use shorthand scss imports, add comments * refactor(truncate): rename "direction" prop to "clamp" * chore(deps-dev): bump carbon-components to v10.29.0 * feat(combo-box): add direction prop * feat(dropdown): add direction prop * feat(multi-select): add direction prop
This commit is contained in:
parent
827a9822e7
commit
14e714fa61
48 changed files with 729 additions and 277 deletions
37
docs/src/pages/components/Truncate.svx
Normal file
37
docs/src/pages/components/Truncate.svx
Normal 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 utility component wraps the `.bx--text-truncate--*` CSS selectors from [carbon-components](https://github.com/carbon-design-system/carbon/blob/master/packages/components/src/globals/scss/_helper-classes.scss#L11) 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>
|
||||
|
||||
### Clamp front
|
||||
|
||||
Set `clamp` to `"front"` to clamp the text from the front.
|
||||
|
||||
<Truncate clamp="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={{ clamp: "front" }}>
|
||||
Carbon Components Svelte is a Svelte component library that implements the Carbon Design System, an open source design system by IBM.
|
||||
</h4>
|
Loading…
Add table
Add a link
Reference in a new issue