Materialise CSS의 대화 상자 설명

Materialize에 내장된 반응형 디자인 덕분에 이 디자인으로 만든 웹사이트는 다양한 기기 유형에 맞게 자동으로 크기가 조정됩니다. Materialise 클래스는 웹사이트를 모든 화면 크기에 맞게 개발되었습니다. Materialise로 구축된 웹사이트는 모든 PC, 태블릿, 모바일 기기에서 접근 가능합니다.

Materialize의 디자인은 평면적이고 매우 단순합니다. 새로운 CSS 규칙을 추가하는 것이 기존 규칙을 변경하는 것보다 훨씬 간단하다는 점을 이해하여 만들어졌습니다. 그림자와 생생한 톤을 지원합니다. 톤과 톤은 모든 플랫폼과 장치에서 일관됩니다. 아마도 가장 좋은 점은 완전히 무료로 사용할 수 있다는 것입니다.

이 글에서는 Materialise CSS의 대화 상자에 대해 논의하겠습니다.

Materialize CSS란 무엇인가요?

Materialize CSS는 CSS, JavaScript 및 HTML을 사용하여 개발된 사용자 인터페이스 구성 요소 라이브러리입니다. Google은 이를 설계한 회사입니다. 머티리얼 디자인은 CSS의 또 다른 이름입니다. 좋은 디자인의 고전적인 원칙에 혁신과 기술을 결합한 디자인 언어입니다. Google은 모든 플랫폼의 모든 제품에서 일관된 사용자 경험을 제공하는 디자인 프레임워크를 만들고 싶었습니다.

Google에서 만든 UI 구성 요소 집합으로, 브라우저 이식성, 장치 독립성 및 온화한 성능 저하와 같은 현대적인 웹 디자인 개념을 준수하면서 미학적으로 보기 좋고 일관되며 유용한 온라인 페이지와 웹 앱을 구축하는 데 사용됩니다.

작은 공간을 차지하는 일반적인 CSS입니다.

오픈 소스이며 올바르게 작동하려면 jQuery JavaScript 라이브러리가 필요합니다. 재사용 가능한 웹 구성 요소를 구축하는 데 사용될 수 있으며 브라우저 간 호환 가능하며 카드, 탭, 탐색 모음, 토스트 및 더 업그레이드되고 사용자 정의된 기능이 포함되어 있습니다. . 머티리얼 디자인 원칙을 준수하도록 수정된 버튼, 체크박스, 텍스트 필드와 같은 일반적인 사용자 인터페이스 요소의 업데이트된 변형을 제공합니다.

대화상자란 무엇인가요?

대화 상자는 작은 창 형태로 나타나며 사용자에게 반응을 요구하면서 사용자에게 정보를 전달하는 그래픽 제어 요소입니다.

대화 상자를 연 소프트웨어와의 통신을 차단하는지 여부에 따라 대화 상자는 "modal" 또는 "modeless"으로 분류됩니다. 원하는 사용자 상호 작용에 따라 표시되는 대화 상자 유형이 결정됩니다.

HTML 요소 "dialog"는 ​​대화 상자 또는 하위 창, 검사기 또는 닫을 수 있는 경고와 같은 기타 대화형 요소를 나타냅니다.

Materialize CSS의 대화 상자

Materialize CSS의 대화 상자는 사용자에게 필요에 따라 더 많은 정보에 대한 액세스를 제공합니다. 이러한 정보는 웹 사이트에 즉시 표시되지 않습니다. 특정 시간에 필요한 정보는 대화 상자 전환과 관련되어 있습니다. 대화 상자는 일반적으로 페이지에 숨겨져 있지만 필요할 때 더 많은 정보가 표시되는 자료입니다. 사용자는 변경 사항에 놀라서는 안 됩니다. 이는 대화 상자의 모양에서 알 수 있듯이 간단한 방법을 제공합니다. 사용자에게 신중한 알림을 제공하세요. 다양한 기기 크기에서 아래 버튼을 클릭하여 이러한 알림 메시지가 얼마나 반응적으로 표시되는지 테스트할 수 있습니다. JavaScript 코드를 사용하여

Materialize.toast()

함수를 호출하면 HTML 문자열이 첫 번째 인수로 제공될 수도 있습니다. 토스트가 해제되면 특정 함수를 다시 호출할 수 있습니다. CSS 스타일 클래스를 쉽게 사용자 정의하고 이를 선택적 매개변수로 토스트에 추가할 수 있습니다. 문법

으아악

매개변수

• Content- 사용자 화면에 표시할 콘텐츠를 지정하는 데 사용됩니다.

• timeDuration- 화면에 메시지를 표시하는 시간을 지정하는 데 사용됩니다.

• Class- 툴팁에 적용할 스타일 클래스 유형을 지정하는 데 사용됩니다.

• Callback- 토스트가 해제된 후 호출될 콜백 메서드를 지정하는 데 사용됩니다.

다음 Materialise 및 CDN 링크는 태그 내에 작성되어야 합니다. 으아악

Example

의 중국어 번역은

Example

입니다.

아래 예제는 Materialise CSS를 사용하여 웹 페이지에 다양한 유형의 대화 상자를 추가하는 방법을 보여줍니다.

으아악

굵고 둥근 경고 상자 버튼을 클릭하면 굵은 텍스트가 있는 둥근 모양의 경고 상자가 화면에 표시됩니다. 강조된 경고 상자 버튼을 클릭하면 강조된 텍스트가 있는 직사각형 경고 상자가 표시됩니다. , 밑줄이 그어진 텍스트가 있는 직사각형 경고 상자가 표시됩니다.

결론

이 기사에서는 Materialise CSS를 사용하여 대화 상자를 만듭니다. 우리는 맞춤형 토스트 상자를 만들 수 있는 Materialize toast() 함수에 대해 배웠습니다. 또한 onclick() 함수와 같은 몇 가지 JavaScript 개념도 배웠습니다.

위 내용은 Materialise CSS의 대화 상자 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!