หน้าแรก>แหล่งข้อมูลการสร้างเว็บไซต์>ดาวน์โหลดแบบอักษร
ดาวน์โหลด

ตัวเลือกแบบอักษร

ตัวเลือกแบบอักษรเป็นตัวเลือกแบบอักษรที่ใช้ง่ายซึ่งแทนที่ องค์ประกอบ Select ดั้งเดิม ของคุณด้วยการเลื่อนลงที่มี ฟังก์ชั่นตัวอย่างแบบอักษร

คุณสามารถโฮสต์แบบอักษรได้ทุกที่ที่คุณต้องการ ตัวเลือกแบบอักษรไม่ได้เชื่อมต่อกับ Google Fonts ดังนั้นคุณจะไม่มีปัญหาใด ๆ เกี่ยวกับ GDPR

ตัวเลือกแบบอักษรถูกเขียนใน SCSS และ Typeed Typeed อย่างเคร่งครัด

ดูการสาธิต : http://fontselector.cilb.de

เริ่มต้น

สร้างองค์ประกอบที่เลือกของคุณเหมือนที่คุณคุ้นเคย เพิ่ม URL แบบอักษรเป็นแอตทริบิวต์ข้อมูลในแต่ละตัวเลือก: 

 < select id =" my-font-select " >
    < option value =" Open Sans " data-font-url =" ./fonts/OpenSans-Regular.ttf " > Open Sans </ option >
</ select >

โปรดทราบ: หากคุณเก็บ URL ในโฮสต์ที่แตกต่างจากโฮสต์ของเว็บไซต์ของคุณ CORS จะต้องตั้งค่าอย่างถูกต้อง

ตอนนี้เพิ่ม CSS ลงในหัว HTML ของคุณ ... 

 < head >
    < link rel =" stylesheet " type =" text/css " href =" font-selector/styles.css " />
</ head >

... และเพิ่มรหัส JavaScript ที่ด้านล่างของร่างกาย: 

 < script type =" text/javascript " >
    new FontSelector ( '#my-font-select' ) ;
</ script >

นั่นคือทั้งหมด!

ตัวเลือก

คุณสามารถผ่านวัตถุตัวเลือกไปยังอาร์กิวเมนต์ที่สองของตัวสร้างตัวอักษร FontSelector เพื่อเปลี่ยนชื่อคลาสหรือฟังเหตุการณ์:

  • wrapperclassName: สตริง
  • DropdownClassName: String
  • DropDownSelectedFontClassName: String
  • DropDownSelectedFontnameclassName: String
  • DropDownFontListClassName: String
  • isexpandedClassName: สตริง
  • onexpanded: ฟังก์ชั่น
  • onSelected: ฟังก์ชั่น
  • oncollapsed: ฟังก์ชั่น

สร้าง

  • รัน npm install เพื่อติดตั้งการพึ่งพา
  • เรียกใช้ npm run dev เพื่อสร้าง JS และ CSS ในโหมดการพัฒนาหนึ่งครั้ง
  • เรียกใช้ npm run watch เพื่อสร้าง JS และ CSS ในโหมดการพัฒนาทุกครั้งที่มีการเปลี่ยนแปลงไฟล์ต้นฉบับ
  • เรียกใช้ npm run build เพื่อสร้าง JS และ CSS ในโหมดการผลิต (minified)
ขยาย
ข้อมูลเพิ่มเติม
แอปที่เกี่ยวข้อง
แนะนำสำหรับคุณ
ข้อมูลที่เกี่ยวข้อง ทั้งหมด