Web Components Series (10) - Implement the basic layout of MyCard

foreword

We have learned some basic theoretical knowledge for Web Components before. The concepts we have learned are:

• Custom Elements
• Shadow DOM
• Templates
• Slots

and sub-knowledge points related to these concepts.

Theoretical knowledge is basically enough. From now on, we need to apply theory to practice and let theory serve practice. Today, we will use the relevant knowledge of Web Components to realize the production of MyCard. The prototype is based on the ID card that we all have as a reference.

The final basic layout effect is as follows:

Layout with Templates

Here we use the HTML template to build the layout first. The code is as follows:

<template id="card_layout">
    <style>
        * {
            box-sizing: border-box;
        }

        :host {
            display: inline-block;
            width: 400px;
            height: 240px;
            border: 1px solid black;
            border-radius: 10px;
            box-shadow: -2px -2px 5px 0px #7a8489;
        }

        .container {
            display: flex;
            flex-direction: column;
            padding: 10px;
            height: 100%;
        }

        .card-body {
            flex: 1;
            display: flex;
        }

        .card-footer {
            padding: 10px 0;
        }

        .main-info {
            flex: 2;
        }

        .photo {
            flex: 1;
            display: flex;
            align-items: center;
        }

        .photo img{
            width: 100%;
        }

        .info-row {
            display: flex;
            padding-top: 15px;
        }

        .info-column {
            display: flex;
            align-items: center;
        }

        .info-title {
            padding: 0 10px;
            color: #0e5bd3;
            font-size: 12px;
            word-break: keep-all;
        }

        .info-content {
            letter-spacing: 2px;
        }
    </style>
    <div class="container">
        <div class="card-body">
            <div class="main-info">
                <div class="info-row">
                    <div class="info-column">
                        <div class="info-title">姓名</div>
                    </div>
                    <div class="info-content">编程三昧</div>
                </div>
                <div class="info-row">
                    <div class="info-column">
                        <div class="info-title">性别</div>
                        <div class="info-content">男</div>
                    </div>
                    <div class="info-column">
                        <div class="info-title">民族</div>
                        <div class="info-content">汉</div>
                    </div>
                </div>
                <div class="info-row">
                    <div class="info-column">
                        <div class="info-title">出生</div>
                        <div class="info-content">2022</div>
                    </div>
                    <div class="info-column">
                        <div class="info-title">年</div>
                        <div class="info-content">12</div>
                    </div>
                    <div class="info-column">
                        <div class="info-title">月</div>
                        <div class="info-content">12</div>
                    </div>
                    <div class="info-column">
                        <div class="info-title">日</div>
                    </div>
                </div>
                <div class="info-row">
                    <div class="info-column">
                        <div class="info-title">住址</div>
                    </div>
                    <div class="info-content">xx省xx市xx区xx街道xx小区xx楼xx单元xx楼xx室</div>
                </div>
            </div>
            <div class="photo">
                <img src="./static/photo.jpg">
            </div>
        </div>
        <div class="card-footer">
            <div class="info-row">
                <div class="info-column">
                    <div class="info-title">公民身份号码</div>
                </div>
                <div class="info-content">12345678901234567X</div>
            </div>
        </div>
    </div>

    </div>
</template>

Create custom elements

Using the method we learned earlier, create a basic custom element my-card , and introduce the Templates layout in the custom component. The code is as follows:

class MyCard extends HTMLElement {
    constructor () {
        super();
        this.shadow = this.attachShadow({mode: "open"});
        let tempEle = document.getElementById("card_layout");
        this.shadow.appendChild(tempEle.content);
    }
}
customElements.define("my-card", MyCard);

Use custom elements

Introduce the my-card tag in the HTML body:

<my-card></my-card>

Summarize

The final effect is shown at the beginning of the article.

In this article, we only used Custom Elements and Templates to implement the basic layout and styles, and the practical value is basically zero.

In the follow-up, Slots will be added to allow custom elements to achieve reusable effects.

~

~ This article is over, thanks for reading!

~

Learn interesting knowledge, meet interesting friends, and shape interesting souls!

Hello everyone, I'm King , the author of 〖 Programming Samadhi 〗, my official account is " Programming Samadhi ", welcome to pay attention, I hope you will give more advice!