play with MDC

NOTES.md

@@ -0,0 +1,34 @@
+### Resources
+- [material-components-web](https://material.io/develop/web/components/)
+- [TS handbook](https://typescript.bootcss.com/)
+- [SASS hankbook](https://www.sasscss.com/docs/)
+
+### MDC 
+#### 输入框样式 
+
+```scss
+.commit-button {
+  @include mdc-button-ink-color($orange);
+  @include mdc-states($orange);
+}
+
+.user-info {
+  @include mdc-text-field-focused-outline-color($orange);
+  @include mdc-text-field-hover-outline-color($orange);
+  @include mdc-text-field-outline-color($black);
+  @include mdc-text-field-caret-color($orange);
+  @include mdc-text-field-label-color($black);
+}
+*/
+/*
+.mdc-text-field--focused:not(.mdc-text-field--disabled) .mdc-floating-label {
+  color: orange;
+}
+.mdc-text-field--focused .mdc-text-field__input:required ~ .mdc-floating-label::after,
+.mdc-text-field--focused .mdc-text-field__input:required ~ .mdc-notched-outline .mdc-floating-label::after {
+  color: orange;
+}
+```
+
+### Linux 相关
+Ctrl-Z -> `jobs` -> `fg 1`

README.md

@@ -11,4 +11,6 @@ npm start
 npm run build
 ```
 
-Test server on <http://localhost:8080/>
+Test server on <http://localhost:8080/>
+
+[Notes](./NOTES.md)

index.html

@@ -15,30 +15,23 @@
       <div class="page-main"><!--page main content (async container)-->
         <header class="site-header"></header> <!--nav mune-->
         <div class="site-content">
-          <button class="foo-button mdc-button">
-            Button
+
+
+          <div class="user-info mdc-text-field mdc-text-field--outlined">
+            <input type="text" id="tf-outlined" class="mdc-text-field__input">
+            <div class="mdc-notched-outline">
+              <div class="mdc-notched-outline__leading"></div>
+              <div class="mdc-notched-outline__notch">
+                <label for="tf-outlined" class="mdc-floating-label">Your Name</label>
+              </div>
+              <div class="mdc-notched-outline__trailing"></div>
+            </div>
+          </div>
+          
+          <button class="commit-button mdc-button mdc-button--outlined">
+            <span class="mdc-button__label">BuiBuiBui~</span>
           </button>
-          <p>
-            (CNN)Las Vegas is home to high rollers and risk takers -- but when Formula One rode into America's playground in the early Eighties, the stakes got even higher.
-          </p>
-          <p>
-            For two strange seasons, in 1981 and 1982, the world championship was decided by the Caesars Palace Grand Prix.
-          </p>
-          <p>
-            It sounded opulent and grand and, for once, the roulette tables weren't the only fortune-makers -- or fortune-breakers -- spinning round and round the famous hotel and casino.
-          </p>
-          <p>
-            "It was great to be in Vegas," America's 1978 F1 world champion Mario Andretti tells CNN. "Because of what Vegas has to offer as far as extravagance outside the race.
-          </p>
-          <p>
-            "It became a nice event per se because of all the amenities that the city has to offer."
-          </p>
-          <p>
-            Hot, hedonistic and high-flying, there was plenty to entertain the traveling F1 community as they arrived in Vegas after a long and fractious season on and off the track.
-          </p>
-          <p>
-            The teams were booked into Caesars Palace Hotel where they could lounge by the pool or gaze into the mirrored ceilings above the beds.
-          </p>
+          
         </div>
       </div>
     </section>

package.json

@@ -4,8 +4,11 @@
   "description": "",
   "main": "index.js",
   "dependencies": {
+    "@material/animation": "^3.1.0",
     "@material/button": "^3.2.0",
+    "@material/line-ripple": "^3.1.0",
     "@material/ripple": "^3.2.0",
+    "@material/theme": "^3.1.0",
     "css-loader": "^3.2.0",
     "extract-loader": "^3.1.0",
     "file-loader": "^4.2.0",

src/scss/index.scss

@@ -1,9 +1,2 @@
-@import "./scheme.scss";
-@import "./size.scss";
-
-@import "@material/button/mdc-button";
-
-.foo-button {
-  @include mdc-button-ink-color(teal);
-  @include mdc-states(teal);
-}
+@import "./variables.scss";
+@import "./mdc.scss";

src/scss/mdc.scss

@@ -0,0 +1,2 @@
+@import "@material/button/mdc-button";
+@import "@material/textfield/mdc-text-field";

src/scss/scheme.scss

@@ -1,5 +0,0 @@
-$orange:        #fe9600;
-$white:         #ffffff;
-$gray:          #cfcfcf;
-$dark:          #4f4f4f;
-$black:         #000000;

src/scss/size.scss

@@ -1,2 +0,0 @@
-// Font size
-$base: 1em;

src/scss/variables.scss

@@ -0,0 +1,12 @@
+/*
+ * MDC varibles
+ * must using before import
+ */
+ $mdc-theme-primary: #fcb8ab;
+ $mdc-theme-secondary: #feeae6;
+ $mdc-theme-on-primary: #442b2d;
+ $mdc-theme-on-secondary: #442b2d;
+ $mdc-theme-surface: #fedbd0;
+ $mdc-theme-background: #feeae6;
+ $mdc-theme-on-surface: #442c2e;
+ $mdc-theme-on-background: #442c2e;

src/ts/index.ts

@@ -1,6 +1,12 @@
 //MDC按键波纹
 import {MDCRipple} from '@material/ripple/index';
-const ripple = new MDCRipple(document.querySelector('.foo-button'));
+const ripple = new MDCRipple(document.querySelector('.mdc-button'));
+
+import {MDCTextField} from '@material/textfield';
+const textField = new MDCTextField(document.querySelector('.mdc-text-field'));
+
+const username = new MDCTextField(document.querySelector('.username'));
+const password = new MDCTextField(document.querySelector('.password'));
 
 import hello from "./components/function";
 
@@ -11,4 +17,4 @@ words.forEach((wordd: string) => {
 });
 
 console.log('hello 1');
-console.log(`hello 2`);
+console.log(`hello 2`);