News & Announcements

บล็อกข่าวสารและประกาศสไตล์ widget2

บล็อกข่าวสารและประกาศสไตล์ widget2 — การ์ดพื้นเทาอ่อน หัวข้อ 2 บรรทัด (line-clamp) พร้อมลิงก์ดูข่าวทั้งหมด มี 2 แนวทาง: แบบการ์ดเดียวแบ่งซีกด้วยเส้นคั่น (ป้ายหมวดข่าว) และแบบแท็บสลับข่าวตลาดหลักทรัพย์ / ข่าวบริษัท ทั้งขนาดเต็มความกว้างและครึ่งคอลัมน์

Set widget2Category newsScope .stk-w2-news

Examples

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

การ์ดเดียวแบ่งซีก

UI รูปแบบเดียวกัน มี 2 layout ให้เลือก

2 layouts

Layout

PreviewOpen

col12-splitเต็มความกว้าง · การ์ดเดียวแบ่งซีกGrid 12/12 · Measuring UI… · JavaScript

แท็บข่าว

UI รูปแบบเดียวกัน มี 2 layout ให้เลือก

2 layouts

Layout

PreviewOpen

col12-tabsเต็มความกว้าง · แท็บข่าวGrid 12/12 · Measuring UI… · JavaScript

Composition

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

Variant

Loading composition…

Content Schema

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

title
cta_label
news
tab_market_label
tab_company_label
market_news
company_news
market_cta_link
company_cta_link

Asset URLs

CSS: https://stackui-cdn.intern-studio.com/widgets/widget2/news/news.css
JS:  https://stackui-cdn.intern-studio.com/widgets/widget2/news/news.js
Preview: https://stackui-cdn.intern-studio.com/widgets/widget2/news/preview.html
Vendor: ดู dependencies.vendor จาก get_widget

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