2019-09-08 16:10:03 +00:00
|
|
|
|
# Text
|
|
|
|
|
|
2019-11-21 13:32:56 +00:00
|
|
|
|
Component that displays plain text
|
|
|
|
|
|
2019-12-04 09:36:13 +00:00
|
|
|
|
## Usage
|
2019-09-08 16:10:03 +00:00
|
|
|
|
|
|
|
|
|
```js
|
2021-02-25 21:19:45 +00:00
|
|
|
|
import Text from "@appserver/components/text";
|
2019-09-08 16:10:03 +00:00
|
|
|
|
```
|
|
|
|
|
|
2019-11-21 13:32:56 +00:00
|
|
|
|
```jsx
|
2019-12-04 09:36:13 +00:00
|
|
|
|
<Text as="p" title="Some title">
|
2019-11-21 13:32:56 +00:00
|
|
|
|
Some text
|
2019-12-04 09:36:13 +00:00
|
|
|
|
</Text>
|
2019-11-21 13:32:56 +00:00
|
|
|
|
```
|
2019-09-08 16:10:03 +00:00
|
|
|
|
|
2019-12-04 09:36:13 +00:00
|
|
|
|
### If you need to override styles add forwardedAs instead of as
|
2019-09-08 16:10:03 +00:00
|
|
|
|
|
|
|
|
|
```js
|
2019-12-04 09:36:13 +00:00
|
|
|
|
const StyledText = styled(Text)`
|
2019-11-21 13:32:56 +00:00
|
|
|
|
&:hover {
|
|
|
|
|
border-bottom: 1px dotted;
|
|
|
|
|
}
|
|
|
|
|
`;
|
2019-09-08 16:10:03 +00:00
|
|
|
|
```
|
|
|
|
|
|
2019-11-21 13:32:56 +00:00
|
|
|
|
```jsx
|
|
|
|
|
<StyledText forwardedAs="span" title="Some title">
|
|
|
|
|
Some text
|
|
|
|
|
</StyledText>
|
|
|
|
|
```
|
2019-09-08 16:10:03 +00:00
|
|
|
|
|
2019-12-04 09:36:13 +00:00
|
|
|
|
### Properties
|
2019-11-21 13:32:56 +00:00
|
|
|
|
|
2019-12-10 06:44:18 +00:00
|
|
|
|
| Props | Type | Required | Values | Default | Description |
|
|
|
|
|
| ----------------- | :-------------------------: | :------: | :----: | :-------: | -------------------------------------------------- |
|
|
|
|
|
| `as` | `string` | - | - | `p` | Sets the tag through which to render the component |
|
|
|
|
|
| `backgroundColor` | `string` | - | - | - | Sets background color |
|
|
|
|
|
| `color` | `string` | - | - | `#333333` | Specifies the text color |
|
|
|
|
|
| `display` | `string` | - | - | - | Sets the 'display' property |
|
2020-10-16 13:16:01 +00:00
|
|
|
|
| `fontSize` | `string` | - | - | `13px` | Sets the font size |
|
2019-12-23 12:33:58 +00:00
|
|
|
|
| `fontWeight` | `oneOfType(number, string)` | - | - | - | Sets the font weight |
|
2020-10-16 13:16:01 +00:00
|
|
|
|
| `isBold` | `bool` | - | - | `false` | Sets font weight value to bold |
|
2019-12-10 06:44:18 +00:00
|
|
|
|
| `isInline` | `bool` | - | - | `false` | Sets the 'display: inline-block' property |
|
|
|
|
|
| `isItalic` | `bool` | - | - | `false` | Sets the font style |
|
|
|
|
|
| `title` | `bool` | - | - | - | Title |
|
|
|
|
|
| `truncate` | `bool` | - | - | `false` | Disables word wrapping |
|