Ripple

Ripple сигнализирует пользователю что его взаимодействие с компонентом было получено, используя эффект ряби в точке касания. Так же помогает понять с каким именно компонентом произошло взаимодействие если они расположены слишком близко друг к другу.

Base

Base

Color

Для лучшего визуального восприятия вы можете передать цвет фона в компонент Ripple чтобы он окрасился в контрастный цвет переданному цвету.

Color

Contrast

Цвет Ripple также может принимать свой изначальный цвет который ему был передан. Нужно выключить автоопределение контрастного цвета.

Contrast

States

Состояние Ripple эффекта подбирается автоматически в зависимости от цвета фона для лучшей видимости.

White

Enabled0%

Hover4%

Focus12%

Activated12%

Pressed12%

Contrast

Enabled0%

Hover12%

Focus36%

Activated36%

Pressed48%

Color

Enabled0%

Hover8%

Focus24%

Activated24%

Pressed32%

API

Name	Type	Default	Description
classes	object		Объект содержит jss стили компонента.
className	string		Чтобы указать CSS классы, используйте этот атрибут.
children	any		Это свойство не реализуется.
component	elementType		Корневой узел. Это HTML элемент или компонент.
rippleCenter	bool	false	Если true, Ripple эффект стартует в центре.
isFocus	bool	false	Если true, примет состояние для focus.
isPressed	bool	false	Если true, примет состояние для pressed.
isActive	bool	false	Если true, примет состояние для active.
color	string	'default'	Название цвета в разных форматах.
contrast	bool	true	Если true, цвет волны будет белым или серым автоматически. Для лучшего восприятия в зависимости от основного цвета.