-
Notifications
You must be signed in to change notification settings - Fork 969
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
6cc95c5
commit 055c6e3
Showing
3 changed files
with
45 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,27 @@ | ||
# Ripple | ||
|
||
The ripple is a surface reaction that happens when the user interacts with the component. It's useful to provide feedback about a click or touch action. In React Toolbox it's implemented as an higher order component (HOC) being a requirement for the child to implement `children` and `onMouseDown` props. Also it should be placed as relative. Hiding the overflow is up to you. | ||
|
||
<!-- example --> | ||
```jsx | ||
import Ripple from 'react-toolbox/lib/ripple'; | ||
|
||
const Link = (props) => ( | ||
<a {...props} style={{position: 'relative'}}> | ||
{props.children} | ||
</a> | ||
); | ||
|
||
const RippleLink = Ripple({spread: 3})(Link); | ||
const RippleTest = () => <RippleLink href='#'>Test</RippleLink>; | ||
``` | ||
|
||
## Properties | ||
|
||
In any component you decorate with the Ripple you'd get some additional props: | ||
|
||
| Name | Type | Default | Description| | ||
|:-----|:-----|:-----|:-----| | ||
| `centered` | `Boolean` | `false` | True in case you want a centered ripple.| | ||
| `className` | `String` | `''` | String to customize appearance (color and opacity for example).| | ||
| `spread` | `Number` | `2` | Factor to indicate how much should the ripple spread under the component. | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
10 changes: 10 additions & 0 deletions
10
docs/app/components/layout/main/modules/examples/ripple_example_1.txt
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,10 @@ | ||
const CustomLink = (props) => ( | ||
<a {...props} style={{position: 'relative'}}> | ||
{props.children} | ||
</a> | ||
); | ||
|
||
const RippleLink = Ripple({spread: 3})(CustomLink); | ||
const RippleTest = () => <RippleLink>Test</RippleLink>; | ||
|
||
return <RippleTest />; |