[Day03] - 第一个 WebComponent 元件

昨天借用了 Wired Elements 来说明什麽是 WebComponent 跟它有什麽特点

今天我们来制作一个 MyElement 吧 !

素材准备

我们利用 font-awesome 制作一个 拟物型按钮(neuomorphic button) 吧 (￣︶￣*))


[ 图片来源 : youtube 影片 - CSS3 Neumorphism ]

首先 , 当然是建立一个 JS 档案 , 我们叫做 neuomorphic-button.js 吧 !

// neuomorphic-button.js

建立一下我们的 Custom Html Tag

// neuomorphic-button.js
class NeuomorphicButton extends HTMLElement {

  // as Component mounted to page 
  constructor() {

    // Always call super first in constructor
    super();

    // Element functionality written in here
  }
}

window.customElements.define('neuomorphic-button', NeuomorphicButton);

跟昨天一样 , 在 Html 中引用自制的 Tag

<!-- use-wc.html -->
<!DOCTYPE html>
<html lang="zh-TW">
<head>
  <meta charset="UTF-8">
  <script src="./neuomorphic-button.js"></script>
</head>
<body>

<neuomorphic-button></neuomorphic-button>
</body>
</html>

我们先塞一些东西到 看看吧 !

// neuomorphic-button.js
class NeuomorphicButton extends HTMLElement {

  // as Component mounted to page 
  constructor() {

    // Always call super first in constructor
    super();

    // Element functionality written in here
    const img = document.createElement('img')
    img.src = 'https://raw.githubusercontent.com/andrew781026/ithome_ironman_2021/master/day-03/cat.png'
    
    this.append(img)
  }
}

window.customElements.define('neuomorphic-button', NeuomorphicButton);

回到 use-wc.html 我们可以看到一只可爱的小猫咪 (*￣3￣)╭

之後 , 我们将 img 改成 font-awesome 的 icon

// neuomorphic-button.js
class NeuomorphicButton extends HTMLElement {

  // as Component mounted to page 
  constructor() {

    // Always call super first in constructor
    super();

    // Element functionality written in here
    const div = document.createElement('div')
    div.innerHTML = `<i class="fas fa-wifi"></i>`
    
    this.append(div)
  }
}

window.customElements.define('neuomorphic-button', NeuomorphicButton);

别忘了在 use-wc.html 中引入 font-awesome 的样式档

<!-- use-wc.html -->
<!DOCTYPE html>
<html lang="zh-TW">
<head>
  <meta charset="UTF-8">
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">
  <script src="./neuomorphic-button.js"></script>
</head>
<body>

<neuomorphic-button></neuomorphic-button>
</body>
</html>

之後再补上 NeuomorphicButton 的边框样式 . 底色...等

<!-- use-wc.html -->
<!DOCTYPE html>
<html lang="zh-TW">
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">

  <style>
 
      .icon-box {
       width: 60px;
       height: 60px;
       position:relative;
       background-color: #ebf5fc;
       box-shadow:  8px 8px 16px #bcbcbc,
                   0 0 8px 20px #dfe9f3,
                   -8px -8px 16px #ffffff;
       display: flex;
       justify-content: center;
       align-items: center;
       border-radius: 10px;
       cursor: pointer;
     }
 
      .icon-box i {
       font-size: 2em;
       color: #6a9bd8;
     }
 
   </style>

  <script src="./neuomorphic-button.js"></script>
</head>
<body>

<neuomorphic-button></neuomorphic-button>
</body>
</html>

我们的 neuomorphic-button 就显示出来啦

如果想查看实际页面 , 请到 first-web-component.html 查看

如果你想替换里面的 icon , 可用下方 JS 做置换

var myTagName = 'neuomorphic-button';
document.querySelector(`${myTagName} .icon-box i`).className = 'fas fa-lightbulb'

参考资料 :


<<:  [Day07] JavaScript - 回圈_part 1

>>:  #7 Web Layout: CSS Fundamentals

【D9】取得加权指数历史资料

前言 认为整体环境看多，优秀的个股不会太差；大环境不好，优秀的股票也会被拖累。有这个概念後我们取得三...

Day05 - 随意玩之 OrderCreate API

在昨天我们度过最大难关加密了，之後应该会轻松许多吧？ API 呼叫流程如下 步骤 1, 2, 3 目...

[10] [Flask 快速上手笔记] 09.心得

经过前面几篇，我们已经对 flask 的基本专案结构有了认识 知道怎麽建立开发环境和专案 [02] ...

Day 2 驼峰式命名法

第二天，我们在讲解基本语法之前，先讲一下我们变数在命名的时候会遇到的"驼峰式命名法&quo...

测试网路两端点频宽效能AB甲乙地，电脑对电脑，网路频宽，iperf jperf

测试网路两端点频宽效能AB甲乙地，电脑对电脑，网路频宽，iperf jperf 工程师常用的应该是 ...