Class ThemeBorder

The theme border class provides style mixins for the border width and radius styling properties.

example: Using the mixins ```ts import { ViewStyle } from 'react-native'; import { Theme } from '@ef-carbon/react-native-style'; const theme = new Theme(); const style: ViewStyle = { ...theme.border.radius.topLeft.normal, ...theme.border.radius.right.large, ...theme.border.radius.bottomLeft.small, ...theme.border.width.normal, ...theme.border.width.bottom.largest, }; ```
example: Overriding the values ```ts import { Theme, ThemeBorder } from '@ef-carbon/react-native-style'; const border = new ThemeBorder({ width: { base: 2 }, radius: {url base: { 500: 32, 600: 40, 700: 45, 800: 50, 900: 60, } } }); const theme = new Theme({ border }); ```
see: Theme
see: BorderRadiusEdges
see: BorderWidthSides

Hierarchy

ThemeBorder

Implements

IThemeBorder

Index

Constructors

constructor

Properties

radius
width

Constructors

constructor

new ThemeBorder(__namedParameters: object): ThemeBorder

- Defined in theme/Border.ts:105
Parameters
- __namedParameters: object
  - radius: ILength<number> | IBorderRadiusEdgesOptions
  - width: ILength<number> | IBorderWidthSidesOptions
Returns ThemeBorder

Properties

radius

radius: Readonly<IRadius>

Provides mixins for styling the border radius

example: Using the mixins ```ts import { ViewStyle } from 'react-native'; import { Theme } from '@ef-carbon/react-native-style'; const theme = new Theme(); const style: ViewStyle = { ...theme.border.radius.topLeft.normal, ...theme.border.radius.right.large, ...theme.border.radius.bottomLeft.small, }; ```
see: BorderRadiusEdges

width

width: Readonly<IWidth>

Provides mixins for styling the border width

example: Using the mixins ```ts import { ViewStyle } from 'react-native'; import { Theme } from '@ef-carbon/react-native-style'; const theme = new Theme(); const style: ViewStyle = { ...theme.border.width.normal, ...theme.border.width.bottom.largest, }; ```
see: BorderWidthSides