kątowy Materiał Projekt układ

Jak mogę zaprojektować układ z kątową układu materialnego jak: enter image description here kątowy Materiał Projekt układ

Wziąłem przykład z material design

Opis: Skrzynka md-content z cień unosi się nad MD- pasek narzędzi.

Źródło

2015-03-16 zero_coding

Nie sądzę, że można to zrobić wyłącznie w materiałach kątowych, ale można to zrobić głównie w materiale, a następnie dodać prostą klasę css. Zakładając, że masz wszystkie wymagane skrypt i css zależności, Twój html będzie wyglądać następująco:

<body ng-app="materialDesignApp" ng-controller="MainCtrl" layout="column"> 

    <md-toolbar flex="33"> 

    </md-toolbar> 

    <div layout-align="center start" layout="row"> 
     <md-content class="md-whiteframe-z2 move-up" flex="66"> 
     <p layout-margin> 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer quis varius nibh, eget fringilla massa. Phasellus sollicitudin, tellus vel hendrerit commodo, eros purus placerat mi, a tristique orci lacus egestas lectus. Aenean congue rutrum suscipit. Aliquam erat volutpat. Sed sollicitudin dui sit amet sapien luctus tincidunt. In eu ipsum lectus. Duis bibendum auctor lorem hendrerit tempor. Aenean rhoncus, dui in mattis interdum, ex erat ultricies libero, ut tincidunt lectus ex finibus lacus. Integer iaculis, nunc tempus finibus cursus, elit eros dictum dolor, et dapibus lectus sapien at risus. Quisque ac metus in turpis malesuada rutrum sed quis quam. Mauris pulvinar dignissim nunc a laoreet. Nam a arcu at sem imperdiet iaculis. 
     </p> 
     </md-content> 
    </div> 

    </body>

A twój CSS będzie wyglądać następująco:

.move-up { 
    position: relative; 
    top: -60px; 
    z-index: 99; 
}

Oto roboczego upadać:

http://plnkr.co/edit/6lHVbV?p=preview

Klucze tutaj używają layout-align="center start", która centruje div poziomo na stronie (używając flexbox) i umieszcza ja t tuż pod paskiem narzędzi md. layout="row" jest również niezbędny, aby upewnić się, że używamy układu flexbox na zawartości div.

Stamtąd flex="66" daje pudełko o szerokości 66%, .md-whiteframe-z2 dodaje tło, a następnie nasz .move-up klasa tylko przenosi go do góry o 60 pikseli wykorzystujących position: relative; top: -60px i umieszcza go nad paskiem narzędzi przy użyciu z-index.

Źródło

2015-03-16 17:53:20

@zero_coding: Czy możesz dodać opis obrazu do pytania, aby ludzie mogli go łatwiej znaleźć w przyszłości? –

Oczywiście, spróbuję. Czasami trudno jest zrobić wrażenie na sobie. bardzo dziękuję za pomoc. –

Cieszę się, że mogłem pomóc –

kątowy Materiał Projekt układ

Odpowiedz

Powiązane problemy