DocSpace-client/packages/asc-web-components/text
Viktor Fomin e879d94bff Merge branch 'develop' of github.com:ONLYOFFICE/AppServer into feature/sso
# Conflicts:
#	packages/asc-web-common/api/settings/index.js
#	packages/asc-web-components/checkbox/index.js
#	packages/asc-web-components/file-input/index.js
#	packages/asc-web-components/index.js
#	packages/asc-web-components/label/index.js
#	web/ASC.Web.Client/public/locales/en/Settings.json
#	web/ASC.Web.Client/public/locales/ru/Settings.json
#	web/ASC.Web.Client/src/components/pages/Settings/Layout/Article/Body/index.js
#	web/ASC.Web.Client/src/components/pages/Settings/index.js
2022-06-15 13:52:00 +03:00
..
common-text-styles.js Web: Components: changed component hierarchy 2021-02-24 17:42:09 +03:00
index.js Merge branch 'develop' of github.com:ONLYOFFICE/AppServer into feature/sso 2022-06-15 13:52:00 +03:00
README.md Web: Components/Common: fix imports 2021-02-26 00:19:45 +03:00
styled-text.js Web: Components: Text: Added lineHeight prop, sorted PropTypes 2022-01-27 17:00:31 +03:00
text.stories.js Web:Components:Text: remove from storybook default color 2021-12-14 12:01:51 +08:00
text.test.js Web: Components: changed component hierarchy 2021-02-24 17:42:09 +03:00

Text

Component that displays plain text

Usage

import  Text  from "@appserver/components/text";
<Text as="p" title="Some title">
  Some text
</Text>

If you need to override styles add forwardedAs instead of as

const StyledText = styled(Text)`
  &:hover {
    border-bottom: 1px dotted;
  }
`;
<StyledText forwardedAs="span" title="Some title">
  Some text
</StyledText>

Properties

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
fontSize string - - 13px Sets the font size
fontWeight oneOfType(number, string) - - - Sets the font weight
isBold bool - - false Sets font weight value to bold
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