mdl(material desing lite) 레이아웃 구성옵션

(mds)material desing lite 레이아웃 구성옵션

MDL CSS 클래스는 레이아웃에 미리 정의 된 다양한 비주얼 및 비헤이비어 향상 기능을 적용합니다. 아래의 표는 사용 가능한 클래스와 그 효과를 나열합니다.

MDL 클래스	효과	비고
mdl-layout	컨테이너를 MDL 구성 요소로 정의합니다.	외부 div 요소에 필요
mdl-js-layout	레이아웃에 기본 MDL 비헤이비어 지정	외부 div 요소에 필요
mdl-layout__header	컨테이너를 MDL 구성 요소로 정의합니다.	헤더 요소에 필수
mdl-layout-icon	응용 프로그램 아이콘을 추가하는 데 사용됩니다. 둘 다 표시되면 메뉴 아이콘으로 감추어집니다.	선택적 아이콘 요소로 이동
mdl-layout__header-row	컨테이너를 MDL 헤더 행으로 정의합니다.	헤더 콘텐츠 div에 필요
mdl-layout__title	레이아웃 제목 텍스트 정의	레이아웃 제목 범위에 필요
mdl-layout-spacer	나머지 공간을 채우기 위해 머리글이나 서랍 안의 요소를 정렬하는 데 사용됩니다. 일반적으로 요소를 오른쪽으로 정렬하는 데 사용됩니다.	레이아웃 제목 다음의 선택적 div 이동
mdl-navigation	컨테이너를 MDL 탐색 그룹으로 정의합니다.	탐색 요소에 필요
mdl-navigation__link	MDL 탐색 링크로 앵커를 정의합니다.	머리글 및 / 또는 서랍 앵커 요소에 필수
mdl-layout__drawer	컨테이너를 MDL 레이아웃 서랍으로 정의합니다.	서랍 div 요소에 필요합니다.
mdl-layout__content	컨테이너를 MDL 레이아웃 내용으로 정의합니다.	주요 요소에 필수
mdl-layout__header--scroll	헤더를 내용과 함께 스크롤합니다.	선택 과목; 머리말을 붙이다
mdl-layout--fixed-drawer	큰 화면에서 서랍을 항상 보이게하고여십시오.	선택 과목; 바깥 div 요소 (서랍 div 요소 아님)로 이동합니다.
mdl-layout--fixed-header	작은 화면에서도 헤더를 항상 볼 수있게합니다.	선택 과목; 바깥 쪽 div 요소로 간다.
mdl-layout--no-drawer-button	서랍 버튼을 표시하지 않습니다.	선택 과목; mdl-layout요소를간다.
mdl-layout--no-desktop-drawer-button	바탕 화면 모드에서 서랍 단추를 표시하지 않습니다.	선택 과목; mdl-layout요소를간다.
mdl-layout--large-screen-only	작은 화면에 요소를 숨 깁니다.	선택 과목; ~의 자손을 잇다mdl-layout
mdl-layout--small-screen-only	큰 화면에 요소를 숨 깁니다.	선택 과목; ~의 자손을 잇다mdl-layout
mdl-layout__header--waterfall	여러 헤더 줄이있는 "폭포"효과를 허용합니다.	선택 과목; 머리말을 붙이다
mdl-layout__header--waterfall-hide-top	폭포수 헤더의 맨 아래 행이 아닌 맨 위를 숨 깁니다.	선택 과목; 헤더 요소를 사용합니다. 요구 사항mdl-layout__header--waterfall
mdl-layout__header--transparent	헤더를 투명하게 만듭니다 (레이아웃 배경 위에 그립니다).	선택 과목; 머리말을 붙이다
mdl-layout__header--seamed	그림자가없는 헤더를 사용합니다.	선택 과목; 머리말을 붙이다
mdl-layout__tab-bar	컨테이너를 MDL 탭 막대로 정의합니다.	헤더 안의 div 요소에 필요 (탭 레이아웃)
mdl-layout__tab	MDL 탭 링크로 앵커를 정의합니다.	탭 바 앵커 요소에 필수
is-active	탭을 기본 활성 탭으로 정의합니다.	선택 과목; 탭 표시 줄 앵커 요소와 관련 탭 섹션 요소로 이동합니다.
mdl-layout__tab-panel	컨테이너를 탭 내용 패널로 정의합니다.	탭 섹션 요소에 필수
mdl-layout__tab-manual-switch	탭 구분 기호를 클릭 할 때 탭 전환을 비활성화합니다. 기본 동작을 비활성화하고 고유 한 이벤트 리스너를 설정하는 데 유용합니다.	선택 과목; 탭 표시 줄 요소를 사용합니다.
mdl-layout--fixed-tabs	기본 스크롤 가능 탭 대신 고정 탭 사용	선택 과목; 외부 div 요소로 이동 (헤더 안의 div가 아닌 경우)