การสร้างแอปพลิเคชัน React ที่สามารถเข้าถึงได้ด้วยส่วนประกอบ React Aria

การสร้างแอปพลิเคชัน React ที่สามารถเข้าถึงได้ด้วยส่วนประกอบ React Aria

React Aria Components เป็นไลบรารีที่รวบรวมคอลเลกชันของส่วนประกอบที่ไม่ได้จัดรูปแบบซึ่งสร้างขึ้นบนตะขอของ React Aria





MUO วิดีโอประจำวันนี้ เลื่อนเพื่อดำเนินการต่อด้วยเนื้อหา

พัฒนาโดย Adobe และเป็นส่วนหนึ่งของโครงการ React Spectrum ซึ่งมีเป้าหมายเพื่อสร้างคอลเลกชันไลบรารีและเครื่องมือที่ครอบคลุมซึ่งช่วยให้นักพัฒนาสร้างประสบการณ์ผู้ใช้ที่ปรับเปลี่ยนได้ เข้าถึงได้ และแข็งแกร่ง



ทำความเข้าใจเกี่ยวกับส่วนประกอบ React Aria

ทำปฏิกิริยากับส่วนประกอบของ Aria จัดเตรียมความสามารถในการเข้าถึง การโต้ตอบของผู้ใช้ และพฤติกรรมตามแนวทางปฏิบัติที่ดีที่สุดของ WAI-ARIA (Web Accessibility Initiative - Access Rich Internet Applications) ต่างจากไลบรารี React Aria ซึ่ง ใช้ React hooks เพื่อสร้างส่วนประกอบของคุณ





ไลบรารี React Aria Components นำเสนอชุดส่วนประกอบที่สร้างไว้ล่วงหน้า รวมถึงปุ่ม ช่องทำเครื่องหมาย แถบเลื่อน ฯลฯ ส่วนประกอบเหล่านี้ไม่ได้จัดรูปแบบ ทำให้คุณสามารถออกแบบรูปลักษณ์ของแอปพลิเคชันได้ตามที่คุณต้องการ

ประโยชน์ของการใช้ส่วนประกอบ React Aria

ไลบรารี React Aria Components มอบคุณประโยชน์มากมาย ได้แก่:



วิธีเพิ่มสติกเกอร์ในโทรเลข
  • การเข้าถึง : ส่วนประกอบ React Aria เป็นไปตามแนวทางปฏิบัติที่ดีที่สุดของ WAI-ARIA เพื่อให้มั่นใจว่าผู้ใช้ทุกคนสามารถเข้าถึงแอปพลิเคชันของคุณได้ รวมถึงผู้ที่ใช้เทคโนโลยีช่วยเหลือด้วย
  • ความยืดหยุ่น : ส่วนประกอบ React Aria ไม่มีสไตล์ ทำให้คุณสามารถใช้ระบบการออกแบบของคุณได้โดยไม่มีข้อจำกัด
  • การโต้ตอบของผู้ใช้ : React Aria ให้การจัดการการโต้ตอบของผู้ใช้ที่มีประสิทธิภาพ รวมถึงการโต้ตอบระหว่างแป้นพิมพ์ เมาส์ และการแตะ
  • ความเป็นสากล : React Aria รองรับภาษาที่อ่านจากขวาไปซ้าย การจัดรูปแบบวันที่และตัวเลข และอื่นๆ ทำให้ง่ายต่อการสร้างแอปพลิเคชันที่เป็นสากล

การสร้างแอป React ด้วยส่วนประกอบ React Aria

มาดูการสร้างแอปพลิเคชัน React แบบง่ายๆ โดยใช้ React Aria Components กัน ก่อนที่จะใช้ไลบรารี React Aria Components ในแอปพลิเคชัน React คุณต้องสร้างโปรเจ็กต์ React ก่อน Vite เป็นวิธีที่ยอดเยี่ยมในการทำเช่นนี้ .

การสร้างแอปพลิเคชัน React ของคุณ

หากต้องการสร้างแอปพลิเคชัน React โดยใช้ Vite ให้รันโค้ดต่อไปนี้ในเทอร์มินัลของคุณ:



npm init vite

การรันโค้ดด้านบนจะเรียกใช้ชุดข้อความแจ้งเพื่อช่วยคุณสร้างโปรเจ็กต์ React ใหม่

ตัวอย่างเช่น:



ตอบสนองโครงการพร้อมท์

หลังจากสร้างโปรเจ็กต์แล้ว คุณจะต้องติดตั้งการขึ้นต่อกันที่จำเป็น เมื่อต้องการทำเช่นนี้ ให้รันโค้ดต่อไปนี้ในเทอร์มินัลของคุณ:

cd react-aria-app 
npm install

มันจะเปลี่ยนไดเร็กทอรีปัจจุบันของคุณเป็นไดเร็กทอรีของโปรเจ็กต์ จากนั้นติดตั้งการขึ้นต่อกันที่จำเป็น เมื่อคุณสร้างแอปพลิเคชัน React แล้ว คุณสามารถติดตั้งไลบรารี React Aria Components เพื่อเพิ่มคุณสมบัติการเข้าถึงให้กับแอปพลิเคชันของคุณ

การติดตั้งส่วนประกอบ React Aria

คุณสามารถติดตั้งไลบรารี React Aria Components ได้โดยใช้ npm หรือเส้นด้าย หากต้องการติดตั้งผ่าน npm ให้รันคำสั่งต่อไปนี้ในเทอร์มินัลของคุณ:

npm install react-aria-components

หรือหากต้องการติดตั้งผ่านเส้นด้าย ให้รันโค้ดนี้:

yarn add react-aria-components

เมื่อคุณได้ติดตั้งไลบรารี React Aria Components แล้ว คุณสามารถใช้ส่วนประกอบต่างๆ ในแอปพลิเคชันของคุณได้

การใช้ส่วนประกอบ React Aria

ไลบรารี React Aria Components นำเสนอองค์ประกอบที่หลากหลายที่ทำให้กระบวนการพัฒนาง่ายขึ้นและเร็วขึ้น หากต้องการใช้ส่วนประกอบของไลบรารี ให้นำเข้าลงในแอปพลิเคชันของคุณและเรนเดอร์

ตัวอย่างเช่น:

import React from "react"; 
import { Button, Popover, DialogTrigger, Dialog } from "react-aria-components"; 
 
function App() { 
  return ( 
    <div> 
      <DialogTrigger> 
        <Button>Click Me</Button> 
        <Popover> 
          <Dialog>You clicked the button</Dialog> 
        </Popover> 
      </DialogTrigger> 
    </div> 
  ); 
} 
 
export default App;

บล็อกโค้ดด้านบนนำเข้าไฟล์ ปุ่ม , ป๊อปโอเวอร์ , ทริกเกอร์กล่องโต้ตอบ , และ กล่องโต้ตอบ ส่วนประกอบจาก ปฏิกิริยา-aria-ส่วนประกอบ โมดูล. ส่วนประกอบที่นำเข้าทั้งหมดจะสร้างปุ่มง่ายๆ ที่แสดงป๊อปโอเวอร์เมื่อคลิก

ที่ ทริกเกอร์กล่องโต้ตอบ องค์ประกอบควบคุมการมองเห็นของกล่องโต้ตอบหรือป๊อปโอเวอร์ ข้างใน ทริกเกอร์กล่องโต้ตอบ นั่นก็คือ ปุ่ม ส่วนประกอบ. ปุ่มนี้จะทริกเกอร์การมองเห็นของ ป๊อปโอเวอร์ และ กล่องโต้ตอบ .

ที่ ป๊อปโอเวอร์ ส่วนประกอบคือคอนเทนเนอร์ที่ปรากฏขึ้นเหนือส่วนที่เหลือของ UI ในขณะที่ กล่องโต้ตอบ ส่วนประกอบจะแสดงเนื้อหาในเลเยอร์เหนือแอป ข้างใน ป๊อปโอเวอร์ ส่วนประกอบคือก กล่องโต้ตอบ องค์ประกอบที่มีข้อความ “คุณคลิกที่ปุ่ม . '

การคลิกปุ่มจะแสดงป๊อปโอเวอร์พร้อมข้อความ “คุณคลิกปุ่มแล้ว” บนหน้าจอของคุณ ทำให้อินเทอร์เฟซของคุณมีลักษณะคล้ายกับภาพด้านล่าง

ปฏิกิริยา-aria

ดังที่คุณเห็นในภาพด้านบน ส่วนประกอบของไลบรารีไม่มีสไตล์ ดังนั้นคุณจึงสามารถเลือกสไตล์ที่คุณต้องการได้

จัดแต่งทรงผมส่วนประกอบของคุณ

เนื่องจาก React Aria Components ไม่มีสไตล์ คุณจึงสามารถจัดสไตล์ได้ตามที่คุณต้องการ คุณสามารถใช้ได้ Cascading Style Sheets (CSS) , Tailwind CSS, ส่วนประกอบที่มีสไตล์ หรือวิธีการจัดสไตล์อื่นๆ ที่คุณต้องการ

คุณสามารถผ่านแบบกำหนดเองที่แตกต่างกันได้ ชื่อคลาส ไปยังส่วนประกอบแล้วกำหนดคลาส CSS ในไฟล์ CSS ของคุณ

นี่คือตัวอย่าง:

import React from "react"; 
import { Button, Popover, DialogTrigger, Dialog } from "react-aria-components"; 
 
function App() { 
  return ( 
    <div> 
      <DialogTrigger> 
        <Button className="button">Click Me</Button> 
        <Popover className="popover"> 
          <Dialog className="dialog">You clicked the button</Dialog> 
        </Popover> 
      </DialogTrigger> 
    </div> 
  ); 
} 
 
export default App;

ในตัวอย่างนี้ คุณกำหนด a ชื่อคลาส สำหรับ ปุ่ม , ป๊อปโอเวอร์ , และ กล่องโต้ตอบ ส่วนประกอบ ตอนนี้คุณสามารถจัดรูปแบบส่วนประกอบในไฟล์ CSS ของคุณได้แล้ว

.button{ 
  margin-block-start: 1rem; 
  border: none; 
  color: #f2f2f2; 
  background-color: #333333; 
  padding: 0.7rem 0.8rem; 
  border-radius: 12px; 
  font-family: cursive; 
} 
 
.popover{ 
  padding: 1rem; 
  background-color: antiquewhite; 
  border-radius: 12px; 
} 
 
.dialog{ 
  outline: none; 
}

หลังจากกำหนดสไตล์สำหรับส่วนประกอบของคุณแล้ว ปุ่มและป๊อปโอเวอร์ของคุณควรมีลักษณะดังนี้

react-aria-popover สไตล์

หากคุณไม่ต้องการกำหนดแบบกำหนดเอง ชื่อคลาส สำหรับส่วนประกอบของคุณ ไลบรารี React Aria Components จะมีค่าเริ่มต้นด้วย ชื่อคลาส สำหรับทุกองค์ประกอบ ค่าเริ่มต้น ชื่อคลาส เป็น react-aria-componentName , ที่ไหน ชื่อส่วนประกอบ คือชื่อของส่วนประกอบที่คุณต้องการจัดสไตล์

ตัวอย่างเช่น:

วิธีค้นหาการ์ดกราฟิกบน windows 10
166BE17EB32D931EC65A0FCBA609DFFC2CF0400

โปรดทราบว่าบล็อกโค้ด CSS ด้านบนจะใช้สไตล์เหล่านี้กับทุกสไตล์ ปุ่ม , ป๊อปโอเวอร์ , และ กล่องโต้ตอบ ส่วนประกอบที่คุณใช้ในแอปพลิเคชันของคุณ

สร้างแอปพลิเคชัน React ที่เข้าถึงได้และโต้ตอบได้

React Aria Components เป็นไลบรารีที่ทรงพลังสำหรับการสร้างแอปพลิเคชัน React ที่สามารถเข้าถึงได้และโต้ตอบได้ มีส่วนประกอบที่จัดการการโต้ตอบของผู้ใช้และการเข้าถึงตามแนวทางปฏิบัติที่ดีที่สุดของ WAI-ARIA หากคุณกำลังมองหาไลบรารีส่วนประกอบที่มีส่วนประกอบและความยืดหยุ่นมากมาย React Aria Components คือตัวเลือกที่ยอดเยี่ยม

นอกจากไลบรารี React Aria Components แล้ว ยังมีไลบรารีส่วนประกอบที่ไม่ได้จัดรูปแบบอื่นๆ ที่คุณสามารถใช้เพื่อสร้างแอปพลิเคชัน React ที่สวยงามได้ หนึ่งในไลบรารีเหล่านี้มี Radix UI Radix UI เป็นไลบรารีส่วนประกอบที่ไม่มีสไตล์สำหรับการสร้างแอป React คุณภาพสูง มันเป็นทางเลือกที่ยอดเยี่ยมสำหรับ React Aria Components