Annual Report (56-1 One Report)

การ์ดแบบ 56-1 One Report สไตล์ widget3 — หน้าปกรายงานเรียงเป็น accordion แนวนอน ใบที่ hover จะกางเต็มพร้อมแคปชัน ปุ่มดู/ดาวน์โหลด และป้าย "ล่าสุด" ที่ใบแรก

Set widget3Category investorScope .stk-w3-annual-report-56-1Set base widget3

Examples

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

การ์ด accordion หน้าปกรายงาน

UI รูปแบบที่ 1

1 layout

PreviewOpen

defaultการ์ด accordion หน้าปกรายงานGrid 12/12 · Measuring UI… · JavaScript

Composition

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

Variantdefault

Loading composition…

Content Schema

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

title
view_all_link
latest_badge_text
report1_link
report1_cover_image
report1_cover_alt
report1_caption
report1_view_link
report1_download_link
report2_link
report2_cover_image
report2_cover_alt
report2_caption
report2_view_link
report2_download_link
report3_link
report3_cover_image
report3_cover_alt
report3_caption
report3_view_link
report3_download_link

Asset URLs

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

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