각도 재료 레이아웃 조건부 포함

Question

각도 재료 레이아웃을 이해하려고합니다. 항상 오른쪽으로 떠있는 HTML 섹션이 있고 열에 여러 줄이 포함되어 있습니다. 이 섹션은 작은 장치를 사용할 때 예상대로 렌더링됩니다. 그러나 기기가 소형 휴대 기기 인 경우 오른쪽 플로팅 섹션을 조정하는 것 외에도 일부 열을 해당 열에 포함시키지 않습니다.

예를 들면, 대형 스크린 장치에 레이아웃 될 것이다 :

left-panel middle-panel right-panel-line 1 
          right-panel-line 2 
          right-panel-line 3 

하고 작은 스크린 장치 상에 배치 될 것이다 :

left-panel 
middle-panel 
right-panel-line 1 

여기서 제 2 및 제 3 라인 오른쪽 부동 패널은 표시되지 않습니다.

질문 : 앵귤러 재질 레이아웃 지시문을 조건부로 사용하여 어떻게 설정합니까?

덕분에, -Andres 여기

Answer 1

가능한 Plunker here

, 당신은 조건부로 표시하고 화면의 크기에 따라 요소를 숨길 수 있습니다. 참조

코드, 전체 세부 사항에 대한 plunker를 참조하십시오

<div layout="row" layout-xs="column"> 
    <div flex>left-panel</div> 
    <div flex>middle-panel</div> 
    <div layout="column" flex> 
     <div flex>right-panel-line 1</div> 
     <div flex hide-xs>right-panel-line 2</div> 
     <div flex hide-xs>right-panel-line 3</div> 
    </div> 
    </div> 

는 도움이되기를 바랍니다.

Answer 2

당신은 갈 - CodePen

마크 업

<div ng-controller="AppCtrl" ng-cloak="" ng-app="MyApp" layout-fill layout-gt-xs="row" layout-xs="column"> 
    <div style="background:red" flex></div> 
    <div style="background:green" flex></div> 
    <div flex layout="column"> 
    <div style="background:purple" flex></div> 
    <div style="background:yellow" flex hide-xs></div> 
    <div style="background:cyan" flex hide-xs></div> 
    </div> 
</div> 

트릭은 화면의 크기에 따라 레이아웃 및 숨기기를 사용하는 것입니다. 당신이 angular-material 레이아웃 추가 옵션 documentation에서 볼 수 있듯이

https://material.angularjs.org/latest/layout/container https://material.angularjs.org/latest/layout/options