2019-07-02 11:22:48 +00:00
|
|
|
# Text
|
|
|
|
|
|
|
|
## Usage
|
|
|
|
|
|
|
|
```js
|
|
|
|
import { Text } from 'asc-web-components';
|
|
|
|
```
|
|
|
|
|
|
|
|
### <Text.Body>
|
|
|
|
|
2019-08-06 14:31:52 +00:00
|
|
|
Component that displays plain text
|
2019-07-02 11:22:48 +00:00
|
|
|
|
|
|
|
#### Usage
|
|
|
|
|
|
|
|
```js
|
2019-08-06 14:31:52 +00:00
|
|
|
<Text.Body as='p' title='Some title'>
|
2019-07-02 11:22:48 +00:00
|
|
|
Some text
|
|
|
|
</Text.Body>
|
2019-08-06 14:31:52 +00:00
|
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
##### If you need to override styles
|
|
|
|
|
|
|
|
```js
|
|
|
|
|
|
|
|
const StyledText = styled(Text.Body)`
|
|
|
|
&:hover{
|
|
|
|
border-bottom: 1px dotted;
|
|
|
|
}
|
|
|
|
`;
|
|
|
|
|
|
|
|
<StyledText forwardedAs='p' title='Some title'>
|
|
|
|
Some text
|
|
|
|
</StyledText>
|
|
|
|
|
2019-07-02 11:22:48 +00:00
|
|
|
```
|
|
|
|
|
|
|
|
#### Properties
|
|
|
|
|
|
|
|
| Props | Type | Required | Values | Default | Description |
|
|
|
|
| ------------------ | -------- | :------: | --------------------------- | --------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
|
|
| `isDisabled` | `bool` | - | - | false | Marks text as disabled |
|
2019-08-06 14:31:52 +00:00
|
|
|
| `as` | `string` | - | - | `p` | Sets the tag through which to render the component |
|
2019-07-02 11:22:48 +00:00
|
|
|
| `title` | `bool` | - | - | - | Title |
|
|
|
|
| `truncate` | `bool` | - | - | false | Disables word wrapping |
|
|
|
|
| `isInline` | `bool` | - | - | false | Sets the 'display: inline-block' property |
|
|
|
|
| `color` | `oneOf` | - | `black`, `gray`, `lightGray` | `black` | Sets the text color |
|
2019-08-06 14:31:52 +00:00
|
|
|
| `disableColor` | `string` | - | | `lightGray` | Sets the text disabled color |
|
2019-07-02 11:22:48 +00:00
|
|
|
| `isBold` | `bool` | - | - | false | Sets the font weight |
|
|
|
|
| `isItalic` | `bool` | - | - | false | Sets the font style |
|
|
|
|
| `backgroundColor` | `bool` | - | - | false | Sets background color |
|
|
|
|
|