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

ผู้คัดค้าน

UI Framework และส่วนประกอบที่ดีที่สุด



ภาษาอังกฤษ·简体中文· Changelog รายงานข้อผิดพลาด·คุณลักษณะการร้องขอ

สารบัญ

TOC

  • - การติดตั้ง
    • รวบรวมด้วย next.js
  • - การใช้งาน
  • คุณสมบัติ
    • เสริมพลังคุณสมบัติของ ProEditor
    • สถาปัตยกรรมเฟรมเวิร์ก
  • - การแสดง
  • - ความเข้ากันได้ของเบราว์เซอร์
  • ⌨การพัฒนาในท้องถิ่น
  • - การบริจาค
  • ? ️ระบบนิเวศ

- การติดตั้ง

สำคัญ

แพ็คเกจนี้เป็น ESM เท่านั้น

ในการติดตั้ง @ant-design/pro-editor ให้เรียกใช้คำสั่งต่อไปนี้: 

$ pnpm install @ant-design/pro-editor

รวบรวมด้วย next.js

บันทึก

โดยการทำงานที่ถูกต้องด้วย next.js SSR เพิ่ม transpilePackages: ['@ant-design/pro-editor'] ไปยัง next.config.js ตัวอย่างเช่น: 

 const nextConfig = {
  transpilePackages : [ '@ant-design/pro-editor' , 'leva' , 'zustand' ] ,
} ;

- การใช้งาน 

 import { SmileOutlined } from '@ant-design/icons' ;
import { ActionIcon } from '@ant-design/pro-editor' ;

export default ( ) => (
  < ActionIcon
    title = { 'Function button description' }
    icon = { < SmileOutlined /> }
    onClick = { ( ) => {
      alert ( 'Trigger action' ) ;
    } }
  />
) ;

คุณสมบัติ

บันทึก

ห้องสมุดส่วนประกอบส่วนหน้าได้ปฏิวัติการพัฒนาเพิ่มประสิทธิภาพตามคำสั่งของขนาดและการยกระดับประสบการณ์ผู้ใช้ แต่เมื่อครบกำหนดเหมือนห้องสมุดเช่น Ant Design (ANTD) และ Procomponents อาจสงสัยว่ามีห้องใด ๆ ที่เหลือสำหรับนวัตกรรมหรือไม่


เสริมพลังคุณสมบัติของ ProEditor

บันทึก

เราจินตนาการว่า Proeditor เป็นห้องสมุดพื้นฐานสำหรับการแก้ไขส่วนประกอบคล้ายกับ Antd ทำให้นักพัฒนาสามารถสร้างส่วนประกอบเชิงโต้ตอบที่ซับซ้อนได้อย่างง่ายดายด้วยประสบการณ์ผู้ใช้ที่เหนือกว่าโดยเนื้อแท้ นี่คือเหตุผลที่อยู่เบื้องหลัง ProEditor

หลักการของเราสำหรับ proeditor:

  • ️ การแก้ไขที่ใช้งานง่าย : สนับสนุนการโต้ตอบของผู้ใช้ตามธรรมชาติเช่นการเลือกแบบหลายตัวเลือกการเลือกและแป้นพิมพ์ลัดเพื่อให้มั่นใจว่าประสบการณ์การแก้ไขที่ราบรื่น
  • ได้รับการปรับปรุงโดยค่าเริ่มต้น : เพิ่มส่วนประกอบการออกแบบมดเพื่อมอบประสบการณ์การใช้งานที่เหนือกว่าด้วยการขัดและการปรับแต่งมากขึ้น
  • - ความยืดหยุ่นแบบเปิด : ให้ความสามารถระดับอะตอมนำเสนอส่วนประกอบที่หลากหลายตะขอและฟังก์ชั่นยูทิลิตี้สำหรับการปรับแต่งและความยืดหยุ่นอย่างกว้างขวาง

UI Framework และ Frontend Component Solutions ในฟิลด์ Editor:

เคล็ดลับ

Proeditor มุ่งเน้นไปที่การขยายขอบเขตของความเป็นไปได้และเพิ่มอาร์เรย์ของเครื่องมือที่มีให้สำหรับนักพัฒนาเพื่อการสร้างแอปพลิเคชันเว็บที่มีความซับซ้อนโต้ตอบและผู้ใช้เป็นศูนย์กลาง ตัวอย่างเช่น:

  • - DraggablePanel : ช่วยให้แผงที่ปรับขนาดได้และสามารถเคลื่อนย้ายได้เพิ่มการโต้ตอบของส่วนต่อประสานผู้ใช้
  • คอลัมน์ลิสต์ : เสนอรายการเรียงลำดับที่ใช้งานง่ายซึ่งสามารถจัดการได้ผ่านคำจำกัดความของคอลัมน์ทำให้การโต้ตอบรายการที่ซับซ้อนง่ายขึ้น
  • - FreeCanvas : ให้ผืนผ้าใบที่ซูมได้คล้ายกับแอปพลิเคชันเช่น Sketch หรือ Figma ทำให้ผู้ใช้มีพื้นที่กว้างใหญ่สำหรับการออกแบบที่สร้างสรรค์
  • - Iconpicker : เครื่องมือเลือกไอคอนที่เข้ากันได้กับ Iconfont ทำให้ง่ายต่อการรวมไอคอนที่หลากหลายเข้ากับการออกแบบ
  • การทำงานร่วมกันออนไลน์ : รวมความสามารถของผู้ใช้หลายคนโดยใช้เทคโนโลยีเช่น YJS และ Zustand Store ทำให้สามารถแก้ไขและโต้ตอบแบบเรียลไทม์ได้

สถาปัตยกรรมเฟรมเวิร์ก

Proeditor มีโครงสร้างเพื่ออำนวยความสะดวกในหลักการเหล่านี้อย่างมีประสิทธิภาพ


- การแสดง

มาแสดงส่วนประกอบลายเซ็นของ ProEditor บางส่วน:

DraggablePanel รายการคอลัมน์
สำหรับแผงที่ปรับขนาดได้และสามารถเคลื่อนย้ายได้ รายการเรียงลำดับที่ใช้งานง่ายตามคำจำกัดความของคอลัมน์
Freecanvas ไอคอน
ผืนผ้าใบที่ซูมได้ที่ไร้ขีด จำกัด คล้ายกับร่างหรือรูป เครื่องมือเลือกไอคอนที่เข้ากันได้กับ Iconfont
การทำงานร่วมกันออนไลน์
ความสามารถของผู้ใช้หลายคนห่อหุ้มด้วย YJS และ Zustand Store

- ความเข้ากันได้ของเบราว์เซอร์

บันทึก

  • เบราว์เซอร์ที่ทันสมัยและ Internet Explorer 11 (พร้อมโพลีฟิลด์)
  • อิเล็กตรอน

หรือโคลนเพื่อการพัฒนาในท้องถิ่น: 

$ git clone https://github.com/ant-design/pro-editor.git
$ cd pro-editor
$ pnpm install
$ pnpm dev

- การบริจาค

สำคัญ

เข้าร่วมระบบนิเวศการทำงานร่วมกันของเรา การมีส่วนร่วมของคุณคือการเต้นของหัวใจของโครงการของเรา นี่คือวิธีที่คุณสามารถเป็นส่วนหนึ่งของชุมชนที่มีชีวิตชีวาของเรา:

  • บูรณาการและสร้างสรรค์สิ่งใหม่ ๆ : รวม ANT Design Pro, UMI และ ProEditor เข้ากับโครงการของคุณ การใช้งานและข้อเสนอแนะในโลกแห่งความเป็นจริงของคุณนั้นมีค่าสำหรับเรา
  • ส่งเสียงข้อมูลเชิงลึกของคุณ : พบกับความผิดพลาด? มีคำถาม? มุมมองของคุณสำคัญ แบ่งปันพวกเขาโดยการส่งปัญหาและช่วยให้เราปรับปรุงประสบการณ์ผู้ใช้
  • กำหนดอนาคต : มีการปรับปรุงรหัสหรือแนวคิดคุณสมบัติหรือไม่? เราขอเชิญคุณเสนอคำขอดึงและมีส่วนร่วมโดยตรงกับวิวัฒนาการของ codebase ของเรา

การบริจาคทุกครั้งไม่ว่าเล็กหรือใหญ่มีการเฉลิมฉลอง เข้าร่วมกับเราในภารกิจของเราเพื่อปรับแต่งและยกระดับโลกของส่วนประกอบ UI ขององค์กรโอเพ่นซอร์ส -





? ️ระบบนิเวศ

  • ProMomponents - ออกแบบมาสำหรับแอปพลิเคชันระดับองค์กรใช้การออกแบบมดเหมือนมืออาชีพ!
  • Proeditor - UI Framework และส่วนประกอบของ Editor UI
  • Proflow - ฐานเฟรมเวิร์ก Editor Flow บน React -flow
  • Prochat - ไลบรารีส่วนประกอบสำหรับการสร้างอินเทอร์เฟซแชท LLM อย่างรวดเร็ว

ใบอนุญาต

ลิขสิทธิ์© 2023 - นำเสนอ AFX & Ant Digital
โครงการนี้ได้รับใบอนุญาต MIT

ขยาย
ข้อมูลเพิ่มเติม
แอปที่เกี่ยวข้อง
แนะนำสำหรับคุณ
ข้อมูลที่เกี่ยวข้อง ทั้งหมด