Financial Highlight

ข้อมูลสำคัญทางการเงินสไตล์ widget2

ข้อมูลสำคัญทางการเงินสไตล์ widget2 — การ์ดตัวเลขสำคัญ 4 รายการ (สินทรัพย์รวม / รายได้รวม / ส่วนของผู้ถือหุ้น / กำไรสุทธิ) กราฟแท่งซ้อนสินทรัพย์รวม-ส่วนของผู้ถือหุ้น-กำไรสุทธิ กราฟรายได้ (แท่ง+เส้นอัตรากำไรสุทธิ) ด้วย ECharts และการ์ดรายละเอียดหลักทรัพย์ มี 5 แบบเต็มความกว้าง ต่างกันที่การจัดวางคอลัมน์

Set widget2Category financialScope .stk-w2-financial-highlight

Examples

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

แบบที่ 1 (ตัวเลข 1/3 + กราฟ 2/3)

UI รูปแบบที่ 1

1 layout

PreviewOpen

col12-4-8เต็มความกว้าง แบบที่ 1 (ตัวเลข 1/3 + กราฟ 2/3)Grid 12/12 · Measuring UI… · JavaScript

แบบที่ 2 (เรียงลงมาเต็มแถวทุกการ์ด)

UI รูปแบบที่ 2

1 layout

PreviewOpen

col12-stackedเต็มความกว้าง แบบที่ 2 (เรียงลงมาเต็มแถวทุกการ์ด)Grid 12/12 · Measuring UI… · JavaScript

แบบที่ 3 (ครึ่ง-ครึ่ง 2 แถว)

UI รูปแบบที่ 3

1 layout

PreviewOpen

col12-6-6เต็มความกว้าง แบบที่ 3 (ครึ่ง-ครึ่ง 2 แถว)Grid 12/12 · Measuring UI… · JavaScript

แบบที่ 4 (การ์ดตัวเลขเต็มแถว + 3 คอลัมน์)

UI รูปแบบที่ 4

1 layout

PreviewOpen

col12-thirdsเต็มความกว้าง แบบที่ 4 (การ์ดตัวเลขเต็มแถว + 3 คอลัมน์)Grid 12/12 · Measuring UI… · JavaScript

แบบที่ 5 (การ์ดตัวเลข + กราฟกว้างเต็มแถว)

UI รูปแบบที่ 5

1 layout

PreviewOpen

col12-wide-chartเต็มความกว้าง แบบที่ 5 (การ์ดตัวเลข + กราฟกว้างเต็มแถว)Grid 12/12 · Measuring UI… · JavaScript

Composition

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

Variant

Loading composition…

Content Schema

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

title
cta_link
figures
financial_chart_title
financial_chart_unit
income_chart_title
income_chart_unit
security_title
securities

Asset URLs

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

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

Financial Highlight

Examples

แบบที่ 1 (ตัวเลข 1/3 + กราฟ 2/3)

แบบที่ 2 (เรียงลงมาเต็มแถวทุกการ์ด)

แบบที่ 3 (ครึ่ง-ครึ่ง 2 แถว)

แบบที่ 4 (การ์ดตัวเลขเต็มแถว + 3 คอลัมน์)

แบบที่ 5 (การ์ดตัวเลข + กราฟกว้างเต็มแถว)

Composition

Content Schema

Asset URLs

On this page