Company Background

บล็อกข้อมูลบริษัทสไตล์ widget2 — ภาพบริษัท ลักษณะธุรกิจ และรายการข้อมูลติดต่อ (ชื่อบริษัท / โทรศัพท์ / ที่ตั้งสำนักงานใหญ่ / เว็บไซต์) พร้อมไอคอนวงกลม มี 6 แบบ: เต็มความกว้าง, ครึ่งคอลัมน์ และหนึ่งในสามอีก 4 แบบ (สไลด์ข้อมูลด้วย Swiper แบบการ์ดแยก / การ์ดฝ้าทับภาพ / ไม่มีคำอธิบาย / จุดสไลด์สีขาว)

Set widget2Category aboutScope .stk-w2-company-background

Examples

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

รูปแบบมาตรฐาน

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

2 layouts

Layout

PreviewOpen

col12เต็มความกว้าง (ภาพซ้าย / ข้อมูลขวา)Grid 12/12 · Measuring UI…

หนึ่งในสาม แบบที่ 1 (ภาพบน / สไลด์การ์ดข้อมูล)

UI รูปแบบที่ 2

1 layout

PreviewOpen

col4-1หนึ่งในสาม แบบที่ 1 (ภาพบน / สไลด์การ์ดข้อมูล)Grid 4/12 · Measuring UI… · JavaScript

หนึ่งในสาม แบบที่ 2 (ภาพสูง + การ์ดฝ้าทับภาพ)

UI รูปแบบที่ 3

1 layout

PreviewOpen

col4-2หนึ่งในสาม แบบที่ 2 (ภาพสูง + การ์ดฝ้าทับภาพ)Grid 4/12 · Measuring UI… · JavaScript

หนึ่งในสาม แบบที่ 3 (การ์ดฝ้า ไม่มีคำอธิบาย)

UI รูปแบบที่ 4

1 layout

PreviewOpen

col4-3หนึ่งในสาม แบบที่ 3 (การ์ดฝ้า ไม่มีคำอธิบาย)Grid 4/12 · Measuring UI… · JavaScript

หนึ่งในสาม แบบที่ 4 (ทับภาพตรงๆ จุดสไลด์สีขาว)

UI รูปแบบที่ 5

1 layout

PreviewOpen

col4-4หนึ่งในสาม แบบที่ 4 (ทับภาพตรงๆ จุดสไลด์สีขาว)Grid 4/12 · Measuring UI… · JavaScript

Composition

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

Variant

Loading composition…

Content Schema

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

title
cta_label
cta_link
image
business_label
business_text
items

Asset URLs

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

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

Company Background

Examples

รูปแบบมาตรฐาน

หนึ่งในสาม แบบที่ 1 (ภาพบน / สไลด์การ์ดข้อมูล)

หนึ่งในสาม แบบที่ 2 (ภาพสูง + การ์ดฝ้าทับภาพ)

หนึ่งในสาม แบบที่ 3 (การ์ดฝ้า ไม่มีคำอธิบาย)

หนึ่งในสาม แบบที่ 4 (ทับภาพตรงๆ จุดสไลด์สีขาว)

Composition

Content Schema

Asset URLs

On this page