모바일 장치에 대한 스와이프 및 삭제 작업

이것은 Codepen challenge Action!: Disappear의 두 번째 주입니다.

설명

데이터 목록에 대한 대화형 디자인의 예.

디자인은 최신 트렌드인 '글라스모피즘' 디자인을 기반으로 합니다.

이 디자인과 액션은 모바일 기기에 더 최적화되어 있습니다. 그러나 상호 작용은 마우스 클릭 이벤트에도 응답합니다.

데이터를 왼쪽이나 오른쪽으로 스와이프하면 삭제 버튼이 표시됩니다. 클릭하면 목록에서 데이터가 사라집니다(또는 삭제됨).

나는 '분산'효과가있는 실종을 만들려고했습니다.

opacity: 0;
그리고

filter: blur(5rem)
CSS에.

또한 작동하지 않지만 다른 요소에 대한 몇 가지 미세 상호 작용을 추가했습니다.

'메뉴' 버튼은 'x' 표시가 되며, 클릭 시 메뉴 목록이 나타납니다.

검색 아이콘이 확장되고 돋보기의 핸들이 'x' 표시가 됩니다. 'x' 표시를 클릭하면 데이터가 지워집니다.

탭 메뉴를 클릭하면 활성 상태가 변경됩니다.

이 모든 상호 작용을 생성하는 데 React JS을 사용했으므로 실제 디자인을 보려면 Javascript가 활성화되어 있어야 합니다.

React hooks 은 이번이 처음이라 사용법을 오용할 가능성이 있습니다. 진행하기 전에 Rules을 읽었지만.

내가 사용한 후크의 유일한 기능은 useState 후크입니다.

const [test, setTest] = useState("");

setTest("test");

하단 메뉴의 아이콘과 삭제 버튼은 Font Awesome을 사용했습니다.

자원

자바스크립트 라이브러리: ReactJS

글꼴: Open Sans('Assets/Fonts' 참조)

아이콘: Font Awesome

데모