@cheaaa/input v1.33.0
Input Component
Компоненты
- Input
- CodeInpit (для ввода числовых кодов)
Пропс onChange
принимает callback, который первым параметром принимает новый value, вторым сам event
Для эмулирования состояния focused из приложения, можно передать isActive
свойство.
Сама передача его вне зависимости от значения меняет стили компонента.
Jss theme namespaces:
INPUT_COMPONENT_NAMESPACE
CODE_INPUT_COMPONENT_NAMESPACE
const theme = {
components: {
[INPUT_COMPONENT_NAMESPACE]: {
base: {
// Меняем глобальные стили для всех инпутов
[INPUT_COMPONENTS_NAMES.wrapper]: {},
[INPUT_COMPONENTS_NAMES.input]: {},
[INPUT_COMPONENTS_NAMES.prefixWrapper]: {},
[INPUT_COMPONENTS_NAMES.postfixWrapper]: {},
[INPUT_COMPONENTS_NAMES.clearIcon]: {},
[INPUT_COMPONENTS_NAMES.label]: {},
},
appearanceName: {
[INPUT_COMPONENTS_NAMES.wrapper]: {
'&[data-focused="true"]': {
alignItems: "center",
},
'&[data-hasvalue="true"]': {
alignItems: "center",
},
},
[INPUT_COMPONENTS_NAMES.input]: {
padding: "12px",
'&[data-focused="true"]': {
padding: "12px",
},
'&[data-hasvalue="true"]': {
padding: "12px",
},
"&:not(:focus)::placeholder": {
opacity: 1,
},
},
},
},
},
}
Использование:
<Input
value={value}
onChange={setValue}
baseAppearance="appearanceName"
appearance="appearanceName"
/>
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago