@eisgs/toggle-button
v3.0.0
Published
Передача значения `true` меняет внешний вид компонента. Изменять состояние можно с помощью параметра `onClick`
Downloads
20
Readme
Active
Передача значения true
меняет внешний вид компонента. Изменять состояние можно с помощью параметра onClick
const [active, setActive] = React.useState(true);
const handleClick = () => setActive(!active);
<ToggleButton active={active} onClick={handleClick}>
Текст
</ToggleButton>
Disabled
При передаче флага disabled
кнопка будет заблокирована.
<ToggleButton disabled>
Текст
</ToggleButton>
Loading (ЕИСЖС)
Состояние loading
добавляет лоадер поверх кнопки. Текст в данном состоянии скрывается.
<ToggleButton loading>
Текст
</ToggleButton>
Иконка (ИЖС)
При передаче Icon
будет отображена иконка, положением которой можно управлять с помощью параметра iconAlign
import { PrintIcon } from '@eisgs/icon';
<ToggleButton Icon={PrintIcon}>
Текст
</ToggleButton>
Размеры (ИЖС)
const sizes = ['large', 'medium', 'small'];
<div style={{display: 'flex', marginBottom: 16}}>
{sizes.map(size => <ToggleButton size={size} key={size} styles={{marginRight: 16}}>{size.toUpperCase()}</ToggleButton>)}
</div>