자습서: UI Builder에서 스키마를 만드는 방법

모드는 페이지를 덮어쓰면서 사용자의 주의를 끌 수 있는 일반적인 UI 요소입니다.이 단계별 자습서에서는 UI Builder에서 스타일링을 구현하고 설정하며 modals와 상호 작용하는 방법을 보여 줍니다.
modals는 덮어쓰기 또는 대화상자 창이라고도 불리며 사용자가 정보를 받거나 원하는 행동을 취할 수 있도록 하는 간단한 방법입니다.사용자와modal의 상호작용을 확보하기 위해 대부분의modal은 사용자와 밑바닥 페이지의 상호작용을 막는다.
이 기능은 적은 용량으로 유효할 수 있지만 모드 UI 요소는 사용자 환경을 해치는 경우가 많기 때문에 적절히 사용해야 합니다.
이 구성 요소의 예in this demo를 보십시오.
이 자습서에서는 BackEndounced의 내장 UI Builder에서 모드를 구현하는 과정을 안내합니다.다음은 로그인하거나 무료 백엔드 계정을 만들기만 하면 된다.
작성자 참고: 예를 들어, 어셈블리의 클래스 및 요소 이름이 사용됩니다.너는 네가 좋아하는 어떤 것도 선택할 수 있다.

UI-Builder의 모드 구조

사용자 인터페이스 옵션 카드에 구성 요소 구조를 만들어서 조립 모드 창을 시작합니다.

이 구성 요소의 전체 구조는 다음과 같다.명확히 보기 위해 원소 ID는 클래스의 이름과 같다.

묘사

*modal__open – 모드 창을 여는 버튼(모든 맞춤형 솔루션이 가능)
*modal - 모드의 루트 요소(필수)
* modal__card - 컨텐츠의 루트,이 원소에 필요한 것을 넣으세요.
*modal__close - 모드 창을 닫는 버튼(필요에 따라 작동 가능)
*modal__shadow - 모드 창 뒤의 섀도우로 인해 페이지의 다른 요소에 대한 액세스가 제한됩니다(필수).
어셈블리의 모든 요소(버튼 제외)는 블록 어셈블리를 사용합니다.

단추에 대해서는 단추 요소를 사용하지만 원하는 것을 사용할 수 있습니다.

요소를 만들 때 ID 및 클래스는 다음 구조에 따라 즉시 할당됩니다.

따라서 비슷한 결과를 얻어야 한다.

위젯의 전체 구조를 작성한 후 블록 요소의 모든 설정을 재설정해야 합니다.이렇게 하려면 선택한 모든 속성을 삭제해야 합니다.잠시 후, 우리는 스타일을 통해 필요한 스타일을 지시할 것이다.Padding 속성을 0으로 설정한 다음 같은 방법으로 재설정합니다.

콘셉트

스타일을 작성하려면 주제 탭으로 전환합니다.페이지에서 편집기 탭을 선택하고 확장을 선택합니다.

이제 확장자를 만들 것입니다.너는 마음대로 이름을 바꿀 수 있다.

ExtensionMxModal은 여러 번 사용하기 편리하도록 구성 요소의 기본 스타일을 제거하는 비교적 적은 혼합 구성 요소입니다.네가 무엇을 하고 있는지 알 때만 편집할 수 있다.
Learn more about CSS LESS in UI Themes.

.mx-modal {
    display: none !important;
    position: fixed !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 1000 !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    height: 100% !important;
    padding: 0 15px !important;

    &.open {
        display: flex !important;
    }

    @media (min-width: 768px) {
        padding: 0 !important;
    }
}

.mx-modal__curtain {
    position: fixed !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: -1 !important;
    background-color: rgba(0, 0, 0, 0.7);
    width: 100% !important;
    height: 100% !important;
}
.mx-modal__card {
    width: 100% !important;

    @media (min-width: 768px) {
        width: 600px !important;
    }
}

확장자Modal는 페이지에 있는 구성 요소의 일반적인 스타일(항목에 따라)을 포함합니다.가장 중요한 것은 수입 조미료이다.다른 모든 속성은 필요에 따라 조정할 수 있다.

.modal__open {
    width: 200px !important;
}
.modal {
    .mx-modal();
}
.modal__card {
    .mx-modal__card();

    flex-direction: column !important;
    justify-content: flex-end !important;
    align-items: flex-end !important;
    background-color: #fff;
    height: 300px !important;
    border-radius: 5px;
    box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.20), 
                0px 2px 2px 0px rgba(0, 0, 0, 0.14), 
                0px 1px 5px 0px rgba(0, 0, 0, 0.12);
}
.modal__close {
    width: 200px !important;
}
.modal__shadow {
    .mx-modal__curtain();
}

논리학

루트 페이지 요소부터 추가Codeless logic하겠습니다.이를 위해 우리는 사용자 인터페이스 옵션 카드로 돌아가서 페이지 요소를 선택하고 화면 캡처의 퍼즐 아이콘을 클릭합니다.

페이지 요소에 대해 열린 Logic 탭에서는 화면 캡처와 같이 on Page Enter 이벤트에 로직을 걸었습니다.이것은 전체 페이지에 전역 모드 상태 변수 isOpenModal 를 만들 것입니다.이 값을 false 로 설정하면, 논리에서 닫힌 모드 창을 정의합니다.
여러 가지 다른 모드를 사용하고 싶으면 창마다 유일한 변수를 추가하십시오.

다음 항목을 선택하기 위해 탭 사이를 전환하는 것을 피하기 위해서navigator를 사용합니다.이렇게 하려면 버튼 아이콘을 클릭하여 페이지 요소의 바인딩을 취소합니다.

이제 나머지 요소에 논리를 추가합니다.
[윈도우 열기] 버튼에서 를 사용하여 이벤트를 클릭합니다.isOpenModal 변수를 true로 설정합니다.

예를 들어 '닫기' 단추의 '클릭' 이벤트에 처리 프로그램을 추가하고 커튼을 착색합니다.


이제 남은 것은 modal류로 원소에 논리를 추가하는 것이다.이를 위해, 우리는 클래스 목록 논리 이벤트를 사용합니다.여기서 isOpenModal 변수의 값에 따라 오픈 클래스를 추가하거나 삭제할 수 있습니다.

이게 다야!우리는 네가 이것이 유용하고 예전과 다름없이 즐거운 무코드 인코딩이라는 것을 발견할 수 있기를 바란다.