@eisgs/button
v3.0.0
Published
```jsx import { PrintIcon } from '@eisgs/icon';
Downloads
84
Readme
Типы (ЕИСЖС)
import { PrintIcon } from '@eisgs/icon';
const types = ['primary', 'secondary', 'destructive', 'textButton', 'icon'];
const styles = {
marginBottom: 16
};
types.map(type => (
<Button
{...type.includes('icon') && {Icon: PrintIcon}}
key={type}
type={type}
styles={styles}
>
{type}
</Button>
))
Типы (ИЖС)
import { PrintIcon } from '@eisgs/icon';
const types = ['primary', 'secondary', 'ordinary', 'destructive', 'textButton', 'iconPrimary', 'iconSecondary', 'iconOrdinary', 'floating'];
const styles = {
marginBottom: 16
};
types.map(type => (
<Button
{...type.includes('icon') && {Icon: PrintIcon}}
key={type}
styles={styles}
type={type}
>
{type}
</Button>
))
Цвет (ЕИСЖС)
Кастомный цвет кнопке можно задавать в параметре color.
<Button type="primary" color="red">
Primary
</Button>
Кнопка с иконкой (ЕИСЖС)
Иконка передается как компонент Icon
. Дополнительно можно передать параметры iconSize
, iconColor
.
По умолчанию иконка располагается слева от текста внутри кнопки.
Управлять положением иконки можно с помощью параметра iconAlign
.
import { EditIcon } from '@eisgs/icon';
const types = ['primary', 'secondary', 'destructive', 'textButton'];
const styles = {
marginBottom: 16
};
types.map(type => (
<Button
key={type}
type={type}
Icon={EditIcon}
styles={styles}
>
{type}
</Button>
))
Кнопка с иконкой (ИЖС)
Иконка передается как компонент Icon
. Дополнительно можно передать iconColor
.
По умолчанию иконка располагается слева от текста внутри кнопки.
Управлять положением иконки можно с помощью параметра iconAlign
.
import { EditIcon } from '@eisgs/icon';
const types = ['primary', 'secondary', 'ordinary', 'destructive', 'textButton', 'iconPrimary', 'iconSecondary', 'iconOrdinary'];
const styles = {
marginBottom: 16
};
types.map(type => (
<Button
key={type}
type={type}
Icon={EditIcon}
styles={styles}
>
{type}
</Button>
))
Disabled (ЕИСЖС)
При передаче флага disabled
кнопка будет заблокирована.
import { PrintIcon } from '@eisgs/icon';
const types = ['primary', 'secondary', 'destructive', 'textButton', 'icon'];
const styles = {
marginBottom: 16
};
types.map(type => (
<Button
{...type.includes('icon') && {Icon: PrintIcon}}
key={type}
styles={styles}
type={type}
disabled
>
{type}
</Button>
))
Disabled (ИЖС)
При передаче флага disabled
кнопка будет заблокирована.
import { PrintIcon } from '@eisgs/icon';
const types = ['primary', 'secondary', 'ordinary', 'destructive', 'textButton', 'iconPrimary', 'iconSecondary', 'iconOrdinary', 'floating'];
const styles = {
marginBottom: 16
};
types.map(type => (
<Button
{...type.includes('icon') && {Icon: PrintIcon}}
key={type}
styles={styles}
type={type}
disabled
>
{type}
</Button>
))
Loading (ЕИСЖС)
Состояние loading
добавляет лоадер поверх кнопки. Текст в данном состоянии скрывается.
import { PrintIcon } from '@eisgs/icon';
const types = ['primary', 'secondary', 'destructive', 'textButton', 'icon'];
const styles = {
marginBottom: 16
};
types.map(type => (
<Button
{...type.includes('icon') && {Icon: PrintIcon}}
key={type}
styles={styles}
type={type}
loading
>
{type}
</Button>
))
Поведение в форме
Для того чтобы задать у кнопки type="submit"
, необходимо передать флаг isSubmit
.
const handleSubmit = (e) => {
e.preventDefault();
alert('Submit');
};
<form onSubmit={handleSubmit}>
<Button isSubmit type="primary">
Отправить
</Button>
</form>
Размеры (ИЖС)
Все типы, кроме textButton
и floating
имеют 3 размера - small
, medium
, large
. Значение по умолчанию medium
.
import { PrintIcon } from '@eisgs/icon';
const sizes = ['large', 'medium', 'small'];
const twoSizesTypes = ['textButton', 'floating'];
const types = ['primary', 'secondary', 'ordinary', 'destructive', 'iconPrimary', 'iconSecondary', 'iconOrdinary', ...twoSizesTypes];
const styles = {
display: 'flex',
marginBottom: 16
};
const buttonStyles = {
marginRight: 16
};
types.map(type => (
<div style={styles} key={type}>
{(twoSizesTypes.includes(type) ? sizes.slice(0, 2) : sizes).map(size => (
<Button
{...type.includes('icon') && {Icon: PrintIcon}}
styles={{marginRight: 16}}
key={`${type}-${size}`}
type={type}
size={size}
>
{type}
</Button>
))}
</div>
))
Счетчик (ИЖС)
Типы iconPrimary
, iconSecondary
, iconOrdinary
поддерживают отображение счетчика.
При передаче значения больше 100, счетчик отображается со значением 99+
.
import { PrintIcon } from '@eisgs/icon';
const types = ['iconPrimary', 'iconSecondary', 'iconOrdinary'];
const styles = {
marginBottom: 16
};
types.map((type, index) => (
<Button
key={type}
styles={styles}
Icon={PrintIcon}
type={type}
count={Math.pow(10, index)}
>
{type}
</Button>
))
Selected (ИЖС)
Для типа textButton
можно указать параметр selected
.
const [isSelected, setIsSelected] = React.useState(true);
<Button type="textButton" selected={isSelected} onClick={() => setIsSelected(prev => !prev)}>{isSelected ? 'Selected' : 'Default'}</Button>