หน้าแรก>การเขียนโปรแกรมที่เกี่ยวข้อง>ส่วนประกอบของบุคคลที่สาม
ดาวน์โหลด

Neetoui เป็นห้องสมุดที่ขับเคลื่อนประสบการณ์ในผลิตภัณฑ์ Neeto ทั้งหมดที่ Bigbinary

การติดตั้ง 

 yarn add @bigbinary/neetoui

สิ่งนี้จะติดตั้งแพ็คเกจ neetoui ภายในแอปพลิเคชันของคุณ เริ่มต้น 3.0.x , Neetoui Stylesheet ถูกแยกออกจากชุด เพื่อให้สไตล์ที่ใช้งานได้โปรดนำเข้าสไตล์ชีท neetoui ไปยังจุดเริ่มต้น scss หลักของคุณ 

 @import " @bigbinary/neetoui " ;

การพึ่งพาอาศัยกัน

Neetoui มีการพึ่งพาเพียร์ไม่กี่คนซึ่งจำเป็นต้องใช้ neetoui อย่างเหมาะสม ตรวจสอบให้แน่ใจว่าคุณติดตั้ง peerdependencies ทั้งหมดที่กล่าวถึงใน package.json

react-toastify

Neetoui ขึ้นอยู่กับ react-toastify สำหรับเครื่องปิ้งขนมปังดังนั้นรูปแบบสำหรับเครื่องปิ้งขนมปังจะต้องนำเข้าไปยังจุดเริ่มต้น scss หลักของคุณ 

 @import " react-toastify/dist/ReactToastify.min.css " ;

ตรวจสอบให้แน่ใจว่าได้รวม <ToastContainer /> ในแอปพลิเคชันของคุณ 

 import React from "react" ;

import { ToastContainer } from "react-toastify" ;

const App = ( ) => {
  return (
    < >
      < ToastContainer />
      // Other children
    </ >
  ) ;
} ;

formik

เพื่อให้การจัดการแบบฟอร์มง่ายขึ้นด้วย neetoui เราได้จัดทำ formik ที่มีผลผูกพันกับส่วนประกอบ neetoui หากต้องการทราบเกี่ยวกับ Formik, ref เอกสารอย่างเป็นทางการ

การใช้งาน

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

 import { Button , Tooltip } from "@bigbinary/neetoui" ;

หากคุณต้องการเข้าถึงวัตถุที่มีการอ้างอิงถึงส่วนประกอบทั้งหมดที่คุณสามารถนำเข้าไวด์การ์ดได้ ด้วยวิธีนี้คุณสามารถแสดงส่วนประกอบแบบไดนามิกจาก Neetoui 

 import React from "react" ;
import * as NeetoUI from "@bigbinary/neetoui" ;

export default function index ( ) {
  const Button = NeetoUI . Button ;

  // get a random component
  const componentName = Math . random ( ) > 0.5 ? "Badge" : "Avatar" ;
  const MyDynamicComponent = NeetoUI [ componentName ] ;

  return (
    < div >
      < Button />
      < MyDynamicComponent />
    </ div >
  ) ;
}

รูปแบบ

Neetoui Formik ส่งออกส่วนประกอบทั้งหมดตามชื่อการส่งออก คุณสามารถนำเข้าส่วนประกอบที่จำเป็นด้วยวิธีต่อไปนี้: 

 import { Input } from "@bigbinary/neetoui/formik" ;

ส่วนประกอบที่มีอยู่ใน neetoui formik:

  • ป้อนข้อมูล
  • วิทยุ
  • ปุ่ม
  • รูปร่าง
  • แอ็คชั่นบล็อก
  • เลือก
  • สวิตช์
  • textarea
  • ช่องทำเครื่องหมาย
  • การปิดกั้น
  • เลือกต้นไม้
  • ตัวเลื่อน

คุณสามารถอ้างอิงโฟลเดอร์ Formik เพื่อตรวจสอบส่วนประกอบ formik ล่าสุด

ในการใช้ส่วนประกอบ neetoui formik คุณต้องห่อฟอร์มของคุณด้วยองค์ประกอบ Form 

 import * as Yup from "yup" ;
import { Form } from "@bigbinary/neetoui/formik" ;

< Form
  formikProps = { {
    initialValues : {
      name : "" ,
      email : "" ,
    } ,
    onSubmit : ( values , formikBag ) => {
      console . log ( values , formikBag ) ;
    } ,
    validationSchema : Yup . object ( {
      name : Yup . string ( ) . required ( "Name is required" ) ,
      email : Yup . string ( ) . email ( "Invalid email" ) . required ( "Email is required" ) ,
    } ) ,
  } }
  className = "w-full space-y-6"
>
  { props => {
    return (
      < >
        < Input { ... props } label = "Name" name = "name" />
        < Input { ... props } label = "Email" name = "email" />
        < Button label = "Submit" type = "submit" style = "primary" />
      </ >
    ) ;
  } }
</ Form > ;

ในกรณีที่คุณไม่ต้องการส่ง children เป็นฟังก์ชั่นคุณสามารถใช้ไวยากรณ์ต่อไปนี้: 

 import * as Yup from "yup" ;
import { Form } from "@bigbinary/neetoui/formik" ;

< Form
  formikProps = { {
    initialValues : {
      name : "" ,
      email : "" ,
    } ,
    onSubmit : ( values , formikbag ) => {
      console . log ( values , formikbag ) ;
    } ,
    validationSchema : Yup . object ( {
      name : Yup . string ( ) . required ( "Name is required" ) ,
      email : Yup . string ( ) . email ( "Invalid email" ) . required ( "Email is required" ) ,
    } ) ,
  } }
  className = "w-full space-y-6"
>
  < >
    < Input { ... props } label = "Name" name = "name" />
    < Input { ... props } label = "Email" name = "email" />
    < Button label = "Submit" type = "submit" style = "primary" />
  </ >
</ Form > ;

องค์ประกอบ Form ยอมรับอุปกรณ์ประกอบฉากต่อไปนี้:

  • formikProps : วัตถุ Formik Props คุณสามารถผ่าน initialValues validationSchema onSubmit ฯลฯ เป็นอุปกรณ์ประกอบฉากไปยังองค์ประกอบ Form
  • children : คุณสามารถผ่านฟังก์ชั่นเป็น children ไปยังองค์ประกอบ Form ฟังก์ชั่นจะได้รับวัตถุ Formik Props เป็นอาร์กิวเมนต์ หรือคุณสามารถส่ง children ภายในองค์ประกอบ Form โดยตรง
  • className : คุณสามารถใช้เสานี้เพื่อให้คลาสที่กำหนดเองกับแบบฟอร์ม
  • formProps : รูปแบบอุปกรณ์ประกอบฉาก คุณสามารถส่งผ่าน className style ฯลฯ เป็นอุปกรณ์ประกอบฉากไปยังส่วนประกอบ Form
  • scrollToErrorField : เพื่อระบุว่าการเลื่อนไปยังฟิลด์ข้อผิดพลาดในการคลิกปุ่มส่งถูกเปิดใช้งานหรือไม่ ค่าเริ่มต้นเป็นเท็จ

การพัฒนา

ติดตั้งการพึ่งพาทั้งหมดโดยดำเนินการคำสั่งต่อไปนี้ 

 yarn

คุณสามารถสร้างส่วนประกอบใหม่ใน src/components และส่งออกจาก src/index.js

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

  • เพื่อดูว่าการทดสอบที่เกี่ยวข้องกับส่วนประกอบของคุณผ่าน yarn test เรียกใช้หรือไม่

    การทดสอบจะล้มเหลวหากมีคำเตือนหรือข้อผิดพลาดในคอนโซล

  • เพื่อดูว่า Neetoui ได้รับการสร้างและรวมตัวกันหลังจากการเปลี่ยนแปลงเรียกใช้ yarn bundle หรือไม่
  • เพื่อดูว่าหนังสือนิทาน yarn build ที่สร้างขึ้นหรือไม่

โปรดทราบว่าไม่มีอะไรในโฟลเดอร์ stories ที่จะรวมกับ neetoui

อาคารและปล่อย

แพ็คเกจ @bigbinary/neetoui ได้รับการเผยแพร่ไปยัง NPM เมื่อเรารวม PR กับ patch , minor หรือ major Label ไปยังสาขา main ฉลาก patch ใช้สำหรับการแก้ไขข้อผิดพลาดฉลาก minor ใช้สำหรับคุณสมบัติใหม่และฉลาก major ใช้สำหรับการเปลี่ยนแปลงการเปลี่ยนแปลง คุณสามารถชำระเงินให้กับ Create and publish releases เวิร์กโฟลว์ในการกระทำของ GitHub เพื่อรับการอัปเดตสด

ในกรณีที่คุณพลาดที่จะเพิ่มฉลากคุณสามารถเผยแพร่แพ็คเกจด้วยตนเองได้ สำหรับครั้งแรกที่คุณต้องสร้าง PR เพื่ออัปเดตหมายเลขเวอร์ชันในไฟล์ package.json และรวมเข้ากับสาขา main หลังจากผสานการประชาสัมพันธ์แล้วคุณจะต้องสร้างรุ่น GitHub ใหม่จากสาขาหลัก เมื่อใดก็ตามที่มีการสร้างรีลีสใหม่ด้วยหมายเลขเวอร์ชันใหม่การกระทำของ GitHub จะเผยแพร่แพ็คเกจที่สร้างขึ้นเป็น NPM โดยอัตโนมัติ คุณสามารถชำระเงิน Publish to npm ในการกระทำของ GitHub เพื่อรับการอัปเดตสด

โปรดทราบว่าก่อนที่จะเผยแพร่แพ็คเกจคุณต้องตรวจสอบฟังก์ชั่นในแอป Neeto Web-Apps บางส่วนโดยใช้ yalc Package Manager การใช้งานของ yalc อธิบายไว้ในวิดีโอนี้: https://youtu.be/f4zzfnrntq8

เอกสาร

อ่านเอกสารที่นี่

https://neeto-ui.neeto.com

ห้องสมุดอื่น ๆ

  • Neetoicons: Neetoicons เป็นห้องสมุดไอคอนอย่างเป็นทางการจาก Bigbinary
  • NeetoEditor: Neetoeditor เป็นโปรแกรมแก้ไขข้อความแบบ Rich-Text ที่ใช้ Prose-Mirror ที่ใช้ที่ Bigbinary
ขยาย
ข้อมูลเพิ่มเติม
แอปที่เกี่ยวข้อง
แนะนำสำหรับคุณ
ข้อมูลที่เกี่ยวข้อง ทั้งหมด