timmy ha revisionato questo gist 10 months ago. Vai alla revisione
Nessuna modifica
timmy ha revisionato questo gist 10 months ago. Vai alla revisione
1 file changed, 2 insertions, 1 deletion
lit_card_example.html
| @@ -21,7 +21,8 @@ | |||
| 21 | 21 | <p>這是頁面上的一般段落，樣式不會影響到卡片內容。</p> | |
| 22 | 22 | ||
| 23 | 23 | <script type="module"> | |
| 24 | - | import { LitElement, html, css } from 'lit'; | |
| 24 | + | import { LitElement, html, css } from 'https://unpkg.com/lit@2.0.0?module'; | |
| 25 | + | ||
| 25 | 26 | ||
| 26 | 27 | class MyCard extends LitElement { | |
| 27 | 28 | // 定義樣式 | |
timmy ha revisionato questo gist 10 months ago. Vai alla revisione
Nessuna modifica
timmy ha revisionato questo gist 1 year ago. Vai alla revisione
1 file changed, 67 insertions
lit_card_example.html(file creato)
| @@ -0,0 +1,67 @@ | |||
| 1 | + | <!DOCTYPE html> | |
| 2 | + | <html lang="zh-TW"> | |
| 3 | + | <head> | |
| 4 | + | <meta charset="UTF-8"> | |
| 5 | + | <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| 6 | + | <title>Lit 模組範例</title> | |
| 7 | + | <script type="module" src="https://unpkg.com/lit@2.0.0/lit.min.js"></script> | |
| 8 | + | </head> | |
| 9 | + | <body> | |
| 10 | + | ||
| 11 | + | <my-card title="歡迎訊息" content="這是一張使用 Shadow DOM 的卡片。"></my-card> | |
| 12 | + | ||
| 13 | + | <style> | |
| 14 | + | /* 這個樣式不會影響 Shadow DOM 內的元素 */ | |
| 15 | + | p { | |
| 16 | + | color: red; | |
| 17 | + | font-size: 24px; | |
| 18 | + | } | |
| 19 | + | </style> | |
| 20 | + | ||
| 21 | + | <p>這是頁面上的一般段落，樣式不會影響到卡片內容。</p> | |
| 22 | + | ||
| 23 | + | <script type="module"> | |
| 24 | + | import { LitElement, html, css } from 'lit'; | |
| 25 | + | ||
| 26 | + | class MyCard extends LitElement { | |
| 27 | + | // 定義樣式 | |
| 28 | + | static styles = css` | |
| 29 | + | .card { | |
| 30 | + | border: 1px solid #ccc; | |
| 31 | + | border-radius: 4px; | |
| 32 | + | padding: 16px; | |
| 33 | + | margin: 16px; | |
| 34 | + | font-family: Arial, sans-serif; | |
| 35 | + | } | |
| 36 | + | h2 { | |
| 37 | + | color: #333; | |
| 38 | + | font-size: 18px; | |
| 39 | + | } | |
| 40 | + | p { | |
| 41 | + | color: #666; | |
| 42 | + | font-size: 14px; | |
| 43 | + | } | |
| 44 | + | `; | |
| 45 | + | ||
| 46 | + | // 定義屬性 | |
| 47 | + | static properties = { | |
| 48 | + | title: { type: String }, | |
| 49 | + | content: { type: String }, | |
| 50 | + | }; | |
| 51 | + | ||
| 52 | + | // 元件渲染模板 | |
| 53 | + | render() { | |
| 54 | + | return html` | |
| 55 | + | <div class="card"> | |
| 56 | + | <h2>${this.title}</h2> | |
| 57 | + | <p>${this.content}</p> | |
| 58 | + | </div> | |
| 59 | + | `; | |
| 60 | + | } | |
| 61 | + | } | |
| 62 | + | ||
| 63 | + | customElements.define('my-card', MyCard); | |
| 64 | + | </script> | |
| 65 | + | ||
| 66 | + | </body> | |
| 67 | + | </html> | |
Più nuovi
Più vecchi