Noodl 2.0β기능 프레젠테이션을 해봤어요.

Noodl 2 Library Demo
작년 말부터 사용된 노들 버전.0β이것은 사용판으로 제작된 기능 시연이다.
현재는 UI/UX 디자인, 비코딩 기능만 사용합니다.
누드가 뭘 할 수 있는지 처음 파악했어.
목적은 각 기능을 어떻게 실현하는지 참고하는 것이다.
GiitHub의 사이트 제목에서 이미지 완성을 확인하십시오.
주의 사항
• 이번 시위는 Ver2입니다.0β판으로 제작 중입니다.Ver1.3 움직이지 않는다.
・Material UI Navigation 기능은 미리보기에서 동작이지만 디버깅 중에는 표시되지 않습니다.다른 내용 뒤에 숨어있는 것 같습니다.비록 예쁘지는 않지만, 위에 표시가 있다.
・각 기능에 대한 설치 방법도 글로 작성될 예정입니다.
설치 방법은 아래에 설명되어 있습니다.

시각적 상호작용

비주얼 인터랙티브2

탐색 및 구성 요소

단일 페이지 어플리케이션

사용법

Github ~/Noodl2libDemo 이하의 PC를 Clone하십시오.

프로젝트 >Import exsisting 프로젝트에서 Noodl2로 Noodl2 시작libDemo를 선택하십시오.

Library Add Material UI Kit에서 시작하십시오.

기능 설명
메인 화면
Text와 Group의 시위 행진입니다.Group은 별도의 배경을 지정하여 버튼과 카드로 사용할 수 있습니다.
중앙 오른쪽의 원은 Circle 버튼을 사용한 데모입니다.색상을 변경하려면 를 클릭합니다.

이미지 이동
드래그 시위야.Drag 아래에 배치하면 이미지를 이동할 수 있습니다.

노드의 순서에 따라 화면의 Z 방향을 제어할 수 있다.
손을 움직이면 주황색 BOX 앞에 빨간색 BOX 뒤쪽보다 숨겨진다.

카드 내용 및 스크롤
Material UI Kit를 사용하는 MuiCard의 예입니다.카드의 오른쪽 아래 구석에 있는 아이콘을 클릭합니다.
컨텐트를 표시합니다.MuiCollapse의 기능입니다.

누름단추
Group 및 Circle 버튼을 사용하여 프레젠테이션합니다.색상 변경, 각도 스위치, 스위치(표시/숨기기) 기능.

Counter:카운터
카운터 퍼레이드야.버튼을 누르면 아래의 숫자가 증가하고 감소합니다.

타이머
두 Timer 조합의 무한 순환의 실현1초 당 입력/출력
100까지 계산하다.

비디오
버튼 조작 영상의 시범.애니메이션의 소재는 Noodl의 폴더에서 읽는 것 외에 외부 URL을 지정하여 외부 애니메이션을 읽을 수 있습니다.

아이콘
MaterialUI Icon 데모입니다.아이콘 선택기의 버튼을 눌러 아이콘을 변경합니다.String Selector 표시 버튼을 누른 횟수에서 표시할 아이콘을 선택합니다.

탭
Material UI Tab 데모입니다.탭 아래의 문자가 변경됩니다.

내비게이션
머티리얼 버튼 네이비게이션의 시위 행진입니다.화면 아래에 보이는 내비게이션 버튼도 같은 기능으로 이루어진다.

애니메이션
애니메이션 시위 행진이야.버튼을 누르면 중심의 원을 열고 닫을 수 있습니다.

Drawer
Drawer의 시위.측면에서 빠르게 나타나는 메뉴 등을 나타내는 데 쓰인다.
또한 "Click Me"라고 적힌 버튼의 오른쪽 상단에 분할을 표시하려면 MuiBadge를 사용합니다.

총결산
Noodl은 IoT 제품의 UI/UX 제작 도구로 빠르게 사용할 수 있다.
버전 2도 발표됐는데 앞으로 더 활발해지길 바랍니다.
이 보도에 조금이라도 흥미가 있다면 나는 매우 기쁠 것이다.
소재를 사용하다
이미지가 표시한 샘플로 Yumehiko씨는 무료 소재화된 청수씨를 사용했다.