@element-public/react-divider
v1.0.0
Published
Divider component for Element React
Downloads
4
Keywords
Readme
Divider
Description
Dividers are horizontal lines. Add them to divide sections of content and splash in some color.
See live demos on storybook
Install bundle from npm-e
npm i @element-public/react-components @element-public/themes
Optional: install the component individually
npm i @element-public/react-divider @element-public/themes
Open ~/.npmrc
in an editor and add the following line to enable the @element-public
scope:
@element-public:registry=https://npm.platforms.engineering
Troubleshooting
See below if you have never installed a package from Bayer's npm-enterprise or run into the following error:
npm ERR! code E401
npm ERR! Unable to authenticate, your authentication token seems to be invalid.
npm ERR! To correct this please trying logging in again with:
npm ERR! npm login
Setup an access token
See the
devtools npm-e guide
to learn how to create an access token if this is the first time you are using a
npm-e package at Bayer or you do not have a line that starts with the following
in your ~/.npmrc
file:
//npm.platforms.engineering/:_authToken=
Notes
A notable prop for Divider is the variant
prop, which determines the thickness of the divider. The two options for variant are dense
, which makes the Divider thinner/shorter, and tall
, which increases the Divider's thickness.
Usage
Dividers can be used to organize information on a webpage into distinct sections and improve readability for users.
Divider Props
| Name | Type | Default | Required | Description | | -------------- | ------ | ------------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | className | string | undefined | false | The css class name to be passed through to the component markup. | | dividerStyle | string | empty string | false | Set the border-style with default browser styles. In general, avoid using. | | themeColor | string | 'on-surface-stroke' | false | The name of the desired Element color like 'primary'Accepted Values: primary, primary-variant, primary-50, primary-100, primary-200, primary-300, primary-400, primary-500, primary-600, primary-700, primary-800, primary-900, secondary, secondary-variant, secondary-50, secondary-100, secondary-200, secondary-300, secondary-400, secondary-500, secondary-600, secondary-700, secondary-800, secondary-900, danger, danger-variant, danger-50, danger-100, danger-200, danger-300, danger-400, danger-500, danger-600, danger-700, danger-800, danger-900, success, success-variant, success-50, success-100, success-200, success-300, success-400, success-500, success-600, success-700, success-800, success-900, ancillary-100, ancillary-200, ancillary-300, ancillary-400, ancillary-500, ancillary-600, ancillary-700, ancillary-800, ancillary-900, on-surface-stroke | | variant | string | 'dense' | false | Choose between dense and tall variants.Accepted Values: dense, tall | | verticalMargin | string | 'none' | false | Adds top and bottom margin.Accepted Values: none, dense, standard, airy |
Divider Deprecated Props
| Name | Type | Default | Required | Deprecated | Description |
| --------------------- | ------- | --------- | -------- | ---------------------------------- | ---------------------------------------------------------------------------------------------------------------------------- |
| dividerColor | string | undefined | false | Use themeColor
instead. | The name of the desired Element color like 'primary' |
| dividerColorImportant | boolean | undefined | false | Use themeColorImportant
instead. | If the border-color should be set with !important |
| dividerHeight | string | undefined | false | Use variant
instead. | Choose between dense and tall variants. |
| themeColorImportant | boolean | undefined | false | No longer needed. | In some cases themeColor
may be inadvertently overridden by another style, this will ensure the selected color is applied. |