This is for the second week of Codepen challenge Action!: Disappear
Example interactive design for data list.
The design is based on the latest trend 'glassmorphism' design.
This design and action is more optimized for mobile devices. Although, the interactivity will also respond to mouse click event.
When you swipe a data to left or right, you would be able to see the delete button. When you click on it, the data will be disappear from the list (or deleted).
I tried to make the disappearance having a 'dispersed' effect, by adding
to the CSS.
I also added some micro interactions on the other elements, although they're not working.
The 'menu' button will be a 'x' mark, and menu list will appear when clicked.
The search icon will extend, and then the handle of magnifier will be a 'x' mark. Clicking the 'x' mark will clear the data.
The tabs menu will change its active state when clicked.
The only function of the hook I used is the useState hook.
const [test, setTest] = useState(""); setTest("test");
I used Font Awesome for the icons at the bottom menu, and the delete button.
Fonts: Open Sans (Look at 'Assets/Fonts')
Icons: Font Awesome