Webcast

การ์ดเว็บแคสต์สไตล์ widget3 — แบ่งภายในเป็นสองฝั่ง ซ้ายเป็นหน้าปกเว็บแคสต์ล่าสุด (snip h-max blue-alpha-cover) พร้อมป้าย "ล่าสุด" ปุ่มเล่น/ดาวน์โหลด และแถบชื่อไฟล์ ขวาเป็นรายการเว็บแคสต์ย้อนหลังแบบการ์ดเรียงเต็มความสูง (hug link-ndownload wrap) แต่ละรายการมีไอคอนวิดีโอ/เอกสาร ชื่อเรื่อง ข้อมูลไฟล์ และปุ่มเล่น/ดาวน์โหลด

Set widget3Category newsScope .stk-w3-webcastSet base widget3

Examples

แต่ละหัวข้อคือ UI คนละรูปแบบ ส่วนขนาดคอลัมน์เป็น layout ของรูปแบบเดียวกัน

การ์ดเว็บแคสต์ หน้าปก + รายการย้อนหลัง

UI รูปแบบที่ 1

1 layout

PreviewOpen

defaultการ์ดเว็บแคสต์ หน้าปก + รายการย้อนหลังGrid 12/12 · Measuring UI… · JavaScript

Composition

โครงสร้างส่วนประกอบหลักที่สรุปจาก HTML ของแต่ละ variant โดยตัด layout wrappers ออก

Variantdefault

Loading composition…

Content Schema

อ่าน schema เต็มและตัวอย่างค่าจาก get_widget ฟิลด์หลัก:

title
cover_image
cover_image_alt
latest_badge_text
file_title
file_meta
file_video_link
file_download_link
webcasts

Asset URLs

CSS: https://stackui-cdn.intern-studio.com/widgets/widget3/webcast/webcast.css
JS:  https://stackui-cdn.intern-studio.com/widgets/widget3/webcast/webcast.js
Preview: https://stackui-cdn.intern-studio.com/widgets/widget3/webcast/preview.html
Set base: ดู dependencies.setBase จาก get_widget และโหลดก่อน widget CSS

ใช้ get_core ก่อนหนึ่งครั้ง จากนั้นเรียก get_widget โดยส่ง id="webcast" และ set="widget3" เพื่อรับ HTML, CSS, JavaScript, dependencies และ URL ของ asset ที่ตรงกับ environment