nativeweb

ห้องสมุดเล็ก ๆ สำหรับส่วนประกอบเว็บง่าย ๆ
_1kB

 import { component , property , Element } from 'nativeweb' ;

@ component ( 'hey-internet' )
class Component extends Element {
    @ property ( ) emoji ;

    render ( ) {
        return `
            <h1>Hey Internet ${ this . emoji } </h1>
        ` ;
    }
} 

 < hey-internet emoji ="" > </ hey-internet >

ส่วนประกอบเว็บพื้นเมือง

สไตล์และสคริปต์ที่ห่อหุ้ม

ง่ายขึ้นด้วยนักตกแต่ง

รอยเท้าเล็ก ๆ

หนึ่งคำสั่งเริ่มต้น

npm init nativeweb

หรือเพิ่มลงในโครงการที่มีอยู่ของคุณ

npm install nativeweb

นักตกแต่ง

@component

@property

@event

@customEvent

@query

@queryAll

@component

กำหนดองค์ประกอบที่กำหนดเองและเพิ่มสไตล์ จากไฟล์ภายนอกหรือไฟล์เดียวกัน styles สามารถเป็น array ของสไตล์

 import { component , Element } from 'nativeweb' ;
import styles from './hey-styles.css.js' ;

@ component ( 'some-styles' , styles )
class Component extends Element {
    render ( ) {
        return `
            <h1>Some Styles</h1>
        ` ;
    }
} 

 import { css } from 'nativeweb' ;

export default css `
    h1 {
        color: orange;
    }
` ; 

 < hey-styles > </ hey-styles >

@property

รับแอตทริบิวต์ที่แปลงเป็นประเภทที่ระบุหรือกำหนดคุณสมบัติด้วยค่าเริ่มต้นที่เป็นตัวเลือก
String Boolean Number Array หรือ Object

 import { component , property , Element } from 'nativeweb' ;

@ component ( 'cool-property' )
class Component extends Element {
    @ property ( ) cool = 'Cool Prop' ;
    @ property ( String ) title = 'Default Title' ;
    @ property ( Number ) multiplier ;

    render ( ) {
        return `
            <h1> ${ this . title } </h1>
            <h2> ${ this . cool } ➡️ ${ 2 * this . multiplier } </h2>
        ` ;
    }
} 

 < cool-property title =" Cool Title ? " multiplier =" 3 " > </ cool-property >

@event

เพิ่มฟังเหตุการณ์ในส่วนประกอบองค์ประกอบลูกที่ชื่อ @name หรือเหตุการณ์ส่วนประกอบภายนอก

 import { component , event , Element } from 'nativeweb' ;

@ component ( 'easy-event' )
class Component extends Element {
    @ event ( ) mouseenter = this . onHover ( ) ;
    @ event ( ) click = {
        '@title' : this . onClick ( ) ,
        '@button' : this . onClick ( )
    } ;
    @ event ( ) ready = {
        'other-component' : this . onReady ( )
    } ;

    onHover ( ) {
        console . log ( 'Hover Component' ) ;
    }
    onClick ( e ) {
        console . log ( e . currentTarget ) ;
    }
    onReady ( { detail } ) {
        console . log ( detail ) ;
    }

    render ( ) {
        return `
            <h1 @title>Easy Event</h1>
            <button @button>Click Me</button>
        ` ;
    }
} 

 < easy-event > </ easy-event >

@customEvent

สร้างกิจกรรมทั่วโลกที่กำหนดเองโดยกำหนดชื่อด้วยชื่อส่วนประกอบ พร้อมที่จะถูกส่ง ผู้ฟังอยู่ในองค์ประกอบด้านบน

 import { component , customEvent , Element } from 'nativeweb' ;

@ component ( 'other-component' )
class Component extends Element {
    @ customEvent ( ) ready = 'Ready ' ;

    connected ( ) {
        dispatchEvent ( this . ready ) ;
    }

    render ( ) {
        return `
            <h1>Other Component</h1>
        ` ;
    }
} 

 < other-component > </ other-component >

@query

ตัวเลือกแบบสอบถามองค์ประกอบลูก @name

 import { component , query , Element } from 'nativeweb' ;

@ component ( 'simple-query' )
class Component extends Element {
    @ query ( ) title ;

    connected ( ) {
        this . title . innerText = 'Better Title ?' ;
    }

    render ( ) {
        return `
            <h1 @title>Good Title</h1>
        ` ;
    }
} 

 < simple-query > </ simple-query >

@queryAll

ตัวเลือกแบบสอบถามองค์ประกอบลูก @name ทั้งหมด

 import { component , queryAll , Element } from 'nativeweb' ;

@ component ( 'all-query' )
class Component extends Element {
    @ queryAll ( ) title ;

    connected ( ) {
        this . title . forEach ( el => ( el . style . color = 'lightgreen' ) ) ;
    }

    render ( ) {
        return `
            <h1 @title>One Title</h1>
            <h2 @title>Other Title</h2>
        ` ;
    }
} 

 < all-query > </ all-query >

วงจรชีวิต

render() →แสดงส่วนประกอบ

connected() →เรียกว่าเมื่อส่วนประกอบถูกแทรกใน DOM

disconnected() →เรียกว่าเมื่อส่วนประกอบถูกลบออกจาก DOM

adopted() →เรียกเมื่อส่วนประกอบถูกย้ายไปยังเอกสารใหม่

attributeChanged() →เรียกเมื่อแอตทริบิวต์ที่สังเกตได้เปลี่ยนแปลง

วิธีการ

this.update() → Rerenders ส่วนประกอบ

คุณสมบัติ

this.properties →รับคุณลักษณะทั้งหมด

เคล็ดลับ

สไตล์ที่ใช้ร่วมกัน

องค์ประกอบ

ตามเงื่อนไข

วง

องค์ประกอบตัวแปร

สไตล์ที่ใช้ร่วมกัน

รวมสไตล์ระดับโลกในส่วนประกอบ

 import { css } from 'nativeweb' ;
import global from '../global-style.css.js' ;

export default [
    global ,
    css `
        h1 {
            color: orange;
        }
    `
] ;

องค์ประกอบ

องค์ประกอบส่วนประกอบที่มีสล็อตเริ่มต้นและสล็อตชื่อ

 import { component , Element } from 'nativeweb' ;

@ component ( 'slot-example' )
class Component extends Element {
    render ( ) {
        return `
            <header>
                <h1><slot name="title"></slot></h1>
                <slot></slot>
            </header>
        ` ;
    }
} 

 < slot-example >
    < span slot =" title " > Named slot </ span >
    < p > Default slot </ p >
</ slot-example >

ตามเงื่อนไข

การเรนเดอร์แบบมีเงื่อนไขในวานิลลา JS

 import { component , property , Element } from 'nativeweb' ;

@ component ( 'condition-example' )
class Component extends Element {
    @ property ( ) isGood = false ;

    render ( ) {
        return `
            ${ this . isGood ? `<h1>Good</h1>` : `` }
        ` ;
    }
}

วง

Render Loop ในวานิลลา JS

 import { component , property , Element } from 'nativeweb' ;

@ component ( 'loop-example' )
class Component extends Element {
    @ property ( ) emojis = [ '?' , '?' , '?' ] ;

    render ( ) {
        return `
            ${ this . emojis . map ( item => `<span> ${ item } </span>` ) . join ( '' ) }
        ` ;
    }
}

องค์ประกอบตัวแปร

แสดงองค์ประกอบจากทรัพย์สิน

 import { component , property , Element } from 'nativeweb' ;

@ component ( 'element-example' )
class Component extends Element {
    @ property ( ) as = 'p' ;

    render ( ) {
        return `
            < ${ this . as } >Heading 1</ ${ this . as } >
        ` ;
    }
} 

 < element-example as =" h1 " > </ element-example >