Foundation
Main View
Components
Charts
Dialogs
Framer Animations
Forms
Grids
Typography
Tools
UiText
Package: @uireact/text
Component to render texts
1. Make sure you install peer dependencies first:
2. Install package:
npm i -S @uireact/text
npm i -S @uireact/text
<UiText>Some text</UiText>
By default the text is rendered inside a p tag
UiText inline
<UiText inline>Some text</UiText>
When using inline the text will be rendered in a Span tag
UiText centered
<UiText align="center">Some text</UiText>
UiText aligned right
<UiText align="right">Some text</UiText>
UiText wrapped
<UiText wrap='normal'> Long text that needs to be wrapped so it doesn't overflow to other areas of the content where we wouldn't like it </UiText>
UiText with color category
<> <UiText category="error">Some text </UiText> <UiText category="positive" fontStyle="bold"> Some text </UiText> <UiText category="negative">Some text</UiText> </>
UiText with inverse coloration
<UiText inverseColoration>Some text </UiText>
UiText with default coloration
<> <UiText coloration="dark">Will always show DARK coloration</UiText> <UiText coloration="light">Will always show LIGHT coloration</UiText> </>
UiText with spacing
<UiText padding={{all: 'five'}}>Some text </UiText>