components
Input Phone
v.1.0.0 | SaturnUsage
The name of the object of tokens to style input phone is INPUT_PHONE_STYLES.
You can not change the name of the object of tokens.
The variant prop allows to modify different aspects of the component.
Variants
Variants can modify the styles for each inner state of the inputPhone. The inner states are the same as the InputState.
The tokens extends those associated to the input basic, InputBasicStateProps, and adds:
- inputVariant?: string; (It should go a valid variant from the Input component)
- affixContainer?: CommonStyleType;
- affixContainerPosition?: InputContentPosition;
- affix?: TypographyTypes;
- affixIcon?: IconTypes;
- affixIconContainer?: CommonStyleType;
- affixIconHighlighted?: { variant?: string; size?: IconHighlightedSizeType; backgroundColor?: string; };
- affixIconHighlightedContainer?: CommonStyleType;
- leftExtraStyles?: CSSProp;
- centerExtraStyles?: CSSProp;
- topExtraStyles?: CSSProp;
- bottomExtraStyles?: CSSProp;
12345678910
const INPUT_PHONE_STYLES = { [VARIANT]: { [STATE]: { inputVariant?: string; affixContainer? CommonStyleType; affixContainerPosition?: InputContentPosition; affix?: TypographyTypes; affixIcon?: IconTypes; affixIconContainer?: CommonStyleType; affixIconHighlighted?: {
Example
inputPhone theme object example:
12345678910
const INPUT_PHONE_STYLES = { [VARIANT]: { [STATE]: { inputVariant: 'DEFAULT' affixContainer: { display: 'display', justify_content: 'justify-content', width: 'width', height: 'auto', padding: 'padding',