Anuchit Chalothorn

มาทำ UI Component ให้ Jaspr กัน

---

31 Dec 2024, 09:15

จากที่เคยเล่าให้ฟังในโพสที่แล้วเรื่องไปทำ Jaspr UI Component มาเพิ่ม เนื่องจากออกแบบไม่ค่อยดีเลยทำให้การปรับแต่ง UI ทำได้ไม่ละเอียด ในเอกสารของ Jaspr แนะนำให้ส่งออก DomComponent อยากจะทำ Tag ใส่ stylesheet อะไรก็ใส่ไปได้เลย มีโปรเจคนึง (จำชื่อไม่ได้) ใช้ DomComponent แล้วทำเป็น Tag ที่ใช้งานประจำ เช่น H1, P, Img เป็นต้น ซึ่งก็น่าสนใจดี

Component div(List<Component> children,
            {Key? key,
            String? id,
            String? classes,
            Styles? styles,
            Map<String, String>? attributes,
            Map<String, EventCallback>? events}) {
          return DomComponent(
            tag: 'div',
            key: key,
            id: id,
            classes: classes,
            styles: styles,
            attributes: attributes,
            events: events,
            children: children,
          );
        }
        

ถ้าเทียบกับ Flutter Widget มันก็คนละเรื่อง แต่การออกแบบจะคล้ายๆ กัน Widget ใน Flutter จะเป็นการส่งไปวาดบน Skia แต่ Jaspr Component ส่ง Tag ไปวาดใน Browser ก็ขึ้นอยู่กับการออกแบบ Library ให้เหมาะกับการเรียกใช้งานละ