각도 재질을 사용하여 Google+와 같은 탐색 바를 디자인하는 방법

Question

Google+가 각 재료를 사용하는 것과 같은 스타일의 탐색 바를 디자인하려면 어떻게해야하나요?

이 탐색 막대를 얻는 방법을 모르며 검색 상자를 이와 같이 스타일링하면 Google에서 만든 소재 디자인이이 소재로 사용 된 것으로 생각했지만 각도 소재 구현에서는 이러한 것을 볼 수 없습니다. .

나는 아주 좋은 하나에 적합 사촌, 앱에 대해 G + 비슷한 스타일을 만들고 싶었다.

Answer 1

우선 각도 재료는 특정 스타일의 입력을 넣을 방법을 제공하지 않습니다. 재질 사양을 구현합니다. 그것이 밝혀지면서, 심지어 구글은 그것을 완전히 따르지 않습니다. navbar는 Google + 다른 다양한 Google 앱에 존재하지 않습니다. This

<md-toolbar ng-show="!showSearch"> 
    <div class="md-toolbar-tools"> 
     <md-button ng-click="toggleSidenav('left')" hide-gt-md aria-label="Menu"> 
     <ng-md-icon icon="menu"></ng-md-icon> 
     </md-button> 
     <h3> 
     Dashboard 
     </h3> 
     <span flex></span> 
     <md-button aria-label="Search" ng-click="showSearch = !showSearch"> 
     <ng-md-icon icon="search"></ng-md-icon> 
     </md-button> 
     <md-button aria-label="Open Settings" ng-click="showListBottomSheet($event)"> 
     <ng-md-icon icon="more_vert"></ng-md-icon> 
     </md-button> 
    </div> 
    <md-tabs md-stretch-tabs class="md-primary" md-selected="data.selectedIndex"> 
     <md-tab id="tab1" aria-controls="tab1-content"> 
     Latest 
     </md-tab> 
     <md-tab id="tab2" aria-controls="tab2-content"> 
     Favorites 
     </md-tab> 
    </md-tabs> 
    </md-toolbar> 

은 재료 도구 모음의 좋은 예입니다.

또한 입력에는 도구 모음과의 특별한 통합이 없으므로 몇 가지 문제가있을 수 있습니다.

Answer 2

여기 있습니다. 정확히 디자인 그러나 당신을위한 좋은 출발점을 키우면 오기 '에 .. http://codepen.io/mackelito/pen/VKxGmR

참고 : 키우면 단지 자리는 그래서 기능 아직 .. 재미가 없다! :) 아이콘을 위해 나는 머리 태그 다음