Materialize CSS

https://materializecss.com/

遇到的问题：

1. because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

• 参考答案链接：
  https://stackoverflow.com/questions/48521971/mime-type-error-when-adding-a-css-file-to-angular/49269425#49269425
• 不需要修改 index.html，按照官网添加下面代码就会报上面的错

 <link type="text/css" rel="stylesheet" href="../node_modules/materialize-css/dist/css/materialize.min.css"
    media="screen,projection" />

• 只需要修改 angular.json
  "styles": [
  "src/styles.css",
  "node_modules/materialize-css/dist/css/materialize.min.css"
  ],

0. 总结： Class

1. set background color

1. class： card-panel
2. 使用方法：

• class="card-panel teal lighten-2"
• class="card-panel dark"

2. set text color

1. class： colorName-text
2. 使用方法： apply a text color ,just append -text to the color class

• class="teal-text text-lighten-2"
• class="dark-text text-darken-2"

3. set the body content's width

1. class： container
   set the body content's width to the window width of ~xxx%
   .s 90%
   .m 85%
   .l 70%
   .xl 70%
2. 使用方法：
   <div class="container"> ASD </div>

4. align your content

1. vertical align
   1.1 class: valign-wrapper
   1.2 使用方法: div class="valign-wrapper">
2. horizon text align
   2.1 class:
   left-align
right-align
center-align
   2.2 使用方法：

<div>
<h5 class="right-align">This should be right aligned</h5>
</div>

5. quickly float things

which is used to avoid specificity issues

1. class: left, right
2. 使用方法：
   div class="left">
div class="right">

6. navbar

6.1 设置 navbar 对齐

1. class:
   <nav><div class="nav-wrapper"></div></nav>
class="brand-logo center" 设置logo 居中
   <ul class="right"> 设置 navbar links 居中
2. 使用方法：

<nav>
  <div class="nav-wrapper">
    <a href="#" class="brand-logo center">Logo </a>
    <ul class="right">
        <li><a href="sass.html">Sass</a></li>
        <li><a href="badges.html">Components</a></li>
        <li><a href="collapsible.html">JavaScript</a></li>
    </ul>
  </div>
</nav>

6.2 Active Items

• 增加类active 到 li 标签表示当前页

1. class: class="active"
2. 使用方法：
   <li class="active"><a href="collapsible.html">JavaScript</a></li>

  <nav>
    <div class="nav-wrapper">
      <a href="#!" class="brand-logo center">Logo</a>
      <ul class="left hide-on-med-and-down">
        <li><a href="sass.html">Sass</a></li>
        <li><a href="badges.html">Components</a></li>
        <li class="active"><a href="collapsible.html">JavaScript</a></li>
      </ul>
    </div>
  </nav>

6.3 Extended Navbar with Tabs

要实现增加拓展的组件到 navbar，需要增加 类 nav-extended 到外层的nav tag

1. class: nav-extended
2. 使用方法：

<nav class="nav-extended">
    <div class="nav-wrapper">
      <a href="#" class="brand-logo">Logo</a>
</div>
 <div class="nav-content">
      <ul class="tabs tabs-transparent">
        <li class="tab"><a href="#test1">Test 1</a></li>
        <li class="tab"><a class="active" href="#test2">Test 2</a></li>
        <li class="tab disabled"><a href="#test3">Disabled Tab</a></li>
        <li class="tab"><a href="#test4">Test 4</a></li>
      </ul>
    </div>
</nav>

6.4 Fixed Navbar

1. To make the navbar fixed , you have to add an outer wrapping div with the class navbar-fixed.
2. This will offset your other content while making your nav fixed.
3. You can adjust the height of this outer div to change how much offset is on your content.
4. class: navbar-fixed
5. 使用方法：

<div class="navbar-fixed">
    <nav>
      <div class="nav-wrapper">
        <a href="#!" class="brand-logo">Logo</a>
        <ul class="right hide-on-med-and-down">
          <li><a href="sass.html">Sass</a></li>
          <li><a href="badges.html">Components</a></li>
        </ul>
      </div>
    </nav>
  </div>

6.5 Navbar 下拉菜单

1. To add a navbar dropdown menu, add the ul dropdown structure into the page.
2. Add an element to trigger the dropdown menu
3. Make sure to supply the id of the dropdown structure to the data-target attribute of the dropdown trigger.
4. class: navbar-fixed
5. 使用方法：

---

\***** 分割线  \*****

---

## 1. Color
> 1. background color:    ``` class="card-panel teal lighten-2"```
> 2. text color:  ```class="blue-text text-darken-2"```

// Background Color
<div class="card-panel teal lighten-2">This is a card panel with a teal lighten-2 class</div>
<div class="card-panel">
// Text color ,To apply a text color, just append ' -text ' to the color class like this
<span class="blue-text text-darken-2">This is a card panel with dark blue text</span>
</div>

## 2. Grid   
> - standard 12 column fluid responsive grid system.
> 1. 用 grid 布局网页
> 2. container 设置为窗口宽度的 70% ，将网页内容居中。
The container class is set to ~70% of the window width. It helps you center and contain your page content. We use the container to contain our body content.
> 3.  grid 网页布局原理：
无论浏览器多大尺寸，一行grid 就是相同宽度的12 列
> 4. 所有的column 必须包含在同一个row 里面，且必须增加class       ```col ``` 到你内部的div 里面来增加这些 column。
> 5.  ```offset-s6``` 意思是偏移 6行
> 6. ```div class="col s7 push-s5"``` , ```class="col s5 pull-s7``` push 向右推，pull 向左拉
> 7.  ```class="section"``` used for simple top and bottom padding
> 8. ```class="divider"``` are 1 pixel lines that help break up your content.(水平分割线)
> 9. 

  





### 1.    columns contained inside a  row

<div class="row">
<div class="col s6 "> this div is 6-columns wide on all screen sizes</div>
</div>

### 2.   push and pull

<div class="row">
<div class="col s7 push-s5"><span class="flow-text">This div is 7-columns wide on pushed to the right by 5-columns.</span></div>
<div class="col s5 pull-s7"><span class="flow-text">5-columns wide pulled to the left by 7-columns.</span></div>
</div>

### 3.   offset

<div class="row">
<div class="col s3 offset-s6"> 6-columns</div>
<div class="col s3 offset-s6"> <span class="flow-text">6-columns</span></div>
</div>

### 4.   section and divider

<div class="divider"></div>
<div class="section">
<h2>section1<h2>
<p>stuff</p>
</div>
<div class="divider"></div>

### 5.  Promotion Table
3 个等尺寸的div， 定义每个div 的宽度为4-columns

<div class="row">
<div class="col s4">
Promo Content 1 goes heres
</div>
<div class="col s4">
Promo Content 2 goes heres
</div>
<div class="col s4">
Promo Content 3 goes heres
</div>
</div>

### 6.  Side Navigation Layout

<div class="row">
<div class="col s3">
Grey navigation panel
</div>
<div class="col s9">
Teal page content
</div>
</div>

### 7.  create responsive layouts
How to layout elements using our grid system. Show you how to design you layouts so that they look great on all screen sizes.
**Screen Sizes**
| | Mobile Devices | Tablet Devices | Desktop Devices  | Large Desktop Devices |
:-: | :-: | :-: | :-: | :-: |
|screen sizes|<= 600px |<= 600px | > 992px | > 1200px | 
class prefix | .s | .m | .l  | .xl 
container width| 90% | 85% | 70% | 70%
number of columns| 12 | 12 | 12 |12|
where s signifies the screen class-prefix (s = small, m = medium, l = large) 
#### 7.1 adding responsiveness
-  同时适用大屏幕和小屏幕

<div class="row">
<div class="grid-example col s12"><span class="flow-text">I am always full-width (col s12)</span></div>
<div class="grid-example col s12 m6"><span class="flow-text">I am full-width on mobile (col s12 m6)</span></div>
</div>

          
#### 7.2 Responsive Side Navigation Layout

<!-- Page Layout here -->
<div class="row">

  <div class="col s12 m4 l3"> <!-- Note that "m4 l3" was added -->
    <!-- Grey navigation panel

          This content will be:
      3-columns-wide on large screens,
      4-columns-wide on medium screens,
      12-columns-wide on small screens  -->

  </div>

  <div class="col s12 m8 l9"> <!-- Note that "m8 l9" was added -->
    <!-- Teal page content

          This content will be:
      9-columns-wide on large screens,
      8-columns-wide on medium screens,
      12-columns-wide on small screens  -->

  </div>

</div>

L