שימוש בקומפוננטים ב-HTML

קומפוננטים הם יחידות עצמאיות של קוד שניתן להשתמש בהם שוב ושוב. הם עוזרים לארגן ולהתמקד בחלקים קטנים יותר של דף ה-HTML.

יצירת קומפוננט פשוט

ניתן ליצור קומפוננט ב-HTML על ידי שימוש בתגיות מותאמות אישית.


        <!DOCTYPE html>
        <html lang="en">
          <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title>קומפוננט</title>
          </head>
          <body>
            <my-component>
              <h2>כותרת קומפוננט</h2>
              <p>תוכן הקומפוננט</p>
            </my-component>
        
            <script>
              class MyComponent extends HTMLElement {
                constructor() {
                  super();
                  this.innerHTML = '
                    <style>
                      my-component {
                        display: block;
                        padding: 16px;
                        border: 1px solid #ddd;
                      }
                    </style>
                    <h2>כותרת קומפוננט</h2>
                    <p>תוכן הקומפוננט</p>
                  ';
                }
              }
              customElements.define('my-component', MyComponent);
            </script>
          </body>
        </html>

כאן יצרנו קומפוננט פשוט בשם my-component שמכיל כותרת ותוכן.

שימוש בקומפוננטים עם פרמטרים

ניתן להעביר פרמטרים לקומפוננט כדי לשנות את התוכן שלו.


        <!DOCTYPE html>
        <html lang="en">
          <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title>קומפוננט עם פרמטרים</title>
          </head>
          <body>
            <my-component message="שלום עולם"></my-component>
        
            <script>
              class MyComponent extends HTMLElement {
                constructor() {
                  super();
                  const message = this.getAttribute('message') || 'ברוך הבא';
                  this.innerHTML = '
                    <style>
                      my-component {
                        display: block;
                        padding: 16px;
                        border: 1px solid #ddd;
                      }
                    </style>
                    <h2>message</h2>
                  ';
                }
              }
              customElements.define('my-component', MyComponent);
            </script>
          </body>
        </html>

כאן השתמשנו בפרמטר בשם message כדי לשנות את התוכן של הקומפוננט.

שימוש בקומפוננטים ב-HTML

יצירת קומפוננט פשוט

שימוש בקומפוננטים עם פרמטרים

תגובות

מאמרים אחרונים