StackUI
Widget 3

Investor Tools

การ์ดทางลัดข้อมูลสำหรับนักลงทุนสไตล์ widget3

การ์ดทางลัดข้อมูลสำหรับนักลงทุนสไตล์ widget3 — 6 ช่องเรียงกริด แต่ละช่องมีไอคอน Material Symbols หัวข้อ คำอธิบาย และปุ่มลิงก์ hover แล้วพื้นการ์ดเปลี่ยนเป็นรูปประกอบซ้อน gradient น้ำเงินและตัวอักษรกลับเป็นสีขาว

Set widget3Category investor-servicesScope .stk-w3-investor-toolsSet base widget3

Examples

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

การ์ดทางลัด 6 เครื่องมือ

UI รูปแบบที่ 1

1 layout
PreviewOpen
กำลังโหลด Preview
defaultการ์ดทางลัด 6 เครื่องมือGrid 12/12 · Measuring UI… · JavaScript

Composition

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

Variantdefault
Loading composition…

Content Schema

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

  • title
  • tool1_icon
  • tool1_title
  • tool1_desc
  • tool1_link
  • tool2_icon
  • tool2_title
  • tool2_desc
  • tool2_link
  • tool3_icon
  • tool3_title
  • tool3_desc
  • tool3_link
  • tool4_icon
  • tool4_title
  • tool4_desc
  • tool4_link
  • tool5_icon
  • tool5_title
  • tool5_desc
  • tool5_link
  • tool6_icon
  • tool6_title
  • tool6_desc
  • tool6_link

Asset URLs

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

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

On this page