วิธีสร้างแอปพลิเคชัน Front-End ที่สามารถเข้าถึงได้ด้วย Chakra UI และ Nuxt.js

เผยแพร่แล้ว: 2022-03-10
สรุปอย่างรวดเร็ว ↬ ในบทความนี้ เราจะมาดูวิธีการใช้ Chakra UI และ NuxtJS ในการสร้างแอปพลิเคชันส่วนหน้าซึ่งสามารถเข้าถึงได้ คุณควรทำความคุ้นเคยกับการใช้ Vue.js เฟรมเวิร์กส่วนหน้าแบบโปรเกรสซีฟกับ Nuxt หากไม่ ให้ดูเอกสาร Vue.js และ NuxtJS เพื่อเริ่มต้น

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

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

  • มาตรา 508;
  • พระราชบัญญัติเทคโนโลยีอำนวยความสะดวก
  • พระราชบัญญัติชาวอเมริกันที่มีความพิการ (ADA);
  • WCAG 2.0 (แนวทาง A & AA);
  • แนวทางการเข้าถึงของ BBC Mobile;
  • WAI-ARIA ( W eb A ความสามารถ ใน การ เข้าถึง I nitiative– แนวทางปฏิบัติ R ich I อินเทอร์เน็ต A ที่เข้าถึงได้)

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

Chakra UI

Chakra UI เป็นระบบการออกแบบและเฟรมเวิร์ก UI ที่สร้างโดย Segun Adebayo สร้างขึ้นโดยคำนึงถึงความเรียบง่าย ความเป็นโมดูล ความสามารถในการทำงานร่วมกันได้ และความสามารถในการเข้าถึง Chakra UI ให้หน่วยการสร้างทั้งหมดที่จำเป็นในการสร้างแอปพลิเคชันส่วนหน้าสามารถเข้าถึงได้

หมายเหตุ : ในขณะที่ Chakra UI ขึ้นอยู่กับ CSS-in-JS ภายใต้ประทุน คุณไม่จำเป็นต้องรู้เพื่อที่จะใช้ไลบรารี

แม้ว่ากรอบงานเดิมจะถูกสร้างขึ้นสำหรับ React แต่ Jonathan Bakebwa ก็เป็นหัวหอกในการพอร์ตไปยัง Vue ดังนั้นนักพัฒนา Vuejs/NuxtJS จึงสามารถใช้ Chakra UI เพื่อสร้างเว็บแอปพลิเคชันที่สามารถเข้าถึงได้

คุณสมบัติของจักร UI

Chakra UI ถูกสร้างขึ้นโดยคำนึงถึงหลักการดังต่อไปนี้:

  • อุปกรณ์ประกอบฉากสไตล์
    Chakra UI ทำให้สามารถจัดรูปแบบองค์ประกอบหรือแทนที่สไตล์โดยใช้อุปกรณ์ประกอบฉาก ซึ่งช่วยลดความจำเป็นในการใช้สไตล์ชีตหรือสไตล์อินไลน์ Chakra UI บรรลุความยืดหยุ่นในระดับนี้โดยใช้ Styled Systems ภายใต้ประทุน
  • องค์ประกอบ
    ส่วนประกอบใน Chakra UI ถูกแบ่งออกเป็นส่วนเล็กๆ โดยมีอุปกรณ์ประกอบฉากน้อยที่สุดเพื่อลดความซับซ้อนและประกอบเข้าด้วยกัน เพื่อให้แน่ใจว่ารูปแบบและการใช้งานจะยืดหยุ่นและขยายได้ ตัวอย่างเช่น คุณสามารถใช้ส่วนประกอบ CBox และ CPseudoBox เพื่อสร้างส่วนประกอบใหม่
  • สามารถเข้าถึงได้
    ส่วนประกอบ Chakra UI เป็นไปตามข้อกำหนดหลักเกณฑ์ของ WAI-ARIA และมีแอตทริบิวต์ aria-* ที่ถูกต้อง คุณยังสามารถค้นหารายงานการช่วยสำหรับการเข้าถึงของส่วนประกอบที่สร้างแต่ละรายการในไฟล์ชื่อ accessibility.md ดูรายงานการช่วยสำหรับการเข้าถึงสำหรับคอมโพเนนต์ CAccordion
  • ธีมได้
    Chakra UI ช่วยให้คุณสามารถอ้างอิงค่าจากธีมของคุณได้อย่างง่ายดายตลอดทั้งแอปพลิเคชันของคุณบนส่วนประกอบใด ๆ
  • รองรับโหมดมืด
    ส่วนประกอบส่วนใหญ่ใน Chakra UI เป็นโหมดมืดที่เข้ากันได้ตั้งแต่แกะกล่อง

Chakra UI รองรับการช่วยสำหรับการเข้าถึงอย่างไร

หลักการสำคัญประการหนึ่งเบื้องหลังการสร้าง Chakra UI คือการ เข้าถึงได้ ด้วยเหตุนี้ ส่วนประกอบทั้งหมดใน Chakra UI จึงมาพร้อมการสนับสนุนสำหรับการเข้าถึงโดยให้:

  • การนำทางด้วยแป้นพิมพ์ — มีประโยชน์สำหรับผู้ใช้ที่มีความบกพร่องทางการเคลื่อนไหว
  • การจัดการโฟกัส
  • คุณลักษณะ aria-* ที่จำเป็นสำหรับโปรแกรมอ่านหน้าจอ
  • การดักจับโฟกัสและการกู้คืนสำหรับกล่องโต้ตอบโมดอล
เพิ่มเติมหลังกระโดด! อ่านต่อด้านล่าง↓

เริ่มต้นใช้งาน Chakra UI และ Nuxt

หมายเหตุ : หากต้องการใช้ Chakra UI กับ Vue.js โปรดดูคู่มือการเริ่มต้นใช้งาน

สำหรับโครงการสาธิตของเรา เราจะสร้าง Chakra-ui explorer ซึ่งเป็นเว็บแอปพลิเคชันหน้าเดียวที่เข้าถึงได้เพื่อค้นหาส่วนประกอบ Chakra UI

  • ดูโปรเจ็กต์สดบน Netlify →

เริ่มต้นใช้งาน Chakra-ui Explorer

สมมติว่าคุณติดตั้ง NPM แล้ว ให้สร้างแอปพลิเคชัน Nuxt ใหม่โดยเรียกใช้:

 $ npx create-nuxt-app chakra-ui-explorer

หรือถ้าคุณชอบเส้นด้ายก็เรียกใช้:

 $ yarn create nuxt-app chakra-ui-explorer

ทำตามข้อความแจ้งการติดตั้งเพื่อสร้างแอปพลิเคชัน Nuxt ให้เสร็จสิ้น

การตั้งค่า Chakra UI

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

 npm i @chakra-ui/nuxt @nuxtjs/emotion

หมายเหตุ : @nuxtjs/emotion อนุญาตให้สร้างและฉีดสไตล์คอมโพเนนต์ของคุณในบิลด์เซิร์ฟเวอร์

หลังจากติดตั้งทั้งสองโมดูล คุณจะต้องลงทะเบียนในไฟล์ nuxt.config.js ภายใต้ตัวเลือกอาร์เรย์ของโมดูล:

 // nuxt.config.js modules: ['@chakra-ui/nuxt', '@nuxtjs/emotion'],

เพื่อให้ขั้นตอนการตั้งค่า Chakra UI เสร็จสมบูรณ์ เราจำเป็นต้องแตะองค์ประกอบเค้าโครงเริ่มต้นของเราในเลย์เอาต์ layouts/ และเพิ่ม CThemeProvider , CColorModeProvider และ CReset จาก Chakra UI

ขอแนะนำให้คุณใช้ส่วนประกอบ CReset เพื่อให้แน่ใจว่าส่วนประกอบทั้งหมดที่ให้โดย Chakra UI ทำงานอย่างถูกต้อง

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

มาเพิ่มส่วนประกอบดังกล่าวใน layouts/default.vue ในส่วนเทมเพลตของเรา ให้เพิ่มสิ่งนี้:

 <!-- layouts/default.vue --> <template> <div class="container"> <c-theme-provider> <c-color-mode-provider> <c-box as="section"> <c-reset /> <nuxt /> </c-box> </c-color-mode-provider> </c-theme-provider> </div> </template>

จากนั้นในส่วนสคริปต์ของเรา เราจะนำเข้าและลงทะเบียนส่วนประกอบดังนี้:

 <script> import { CThemeProvider, CColorModeProvider, CReset, CBox } from '@chakra-ui/vue' export default { name: 'DefaultLayout', components: { CThemeProvider, CColorModeProvider, CReset, CBox } } </script>

องค์ประกอบโครงร่าง default.vue ของคุณควรมีลักษณะดังนี้:

 <template> <div class="container"> <c-theme-provider> <c-color-mode-provider> <c-box as="section"> <c-reset /> <nuxt /> </c-box> </c-color-mode-provider> </c-theme-provider> </div> </template> <script> import { CThemeProvider, CColorModeProvider, CReset, CBox } from '@chakra-ui/vue' export default { name: 'DefaultLayout', components: { CThemeProvider, CColorModeProvider, CReset, CBox } } </script>

หมายเหตุ : สังเกตว่าฉันกำลังรวมส่วนประกอบ <c-reset /> และ <nuxt /> ไว้ในส่วนประกอบ c-box

การตั้งค่าธีมแอปพลิเคชันของคุณ

Chakra UI ช่วยให้คุณสามารถกำหนดธีมสำหรับแอปพลิเคชันของคุณได้ ตาม "ธีม" ฉันหมายถึงการตั้งค่าจานสีของแอปพลิเคชันของคุณ มาตราส่วนประเภท กองแบบอักษร เบรกพอยต์ ค่ารัศมีขอบ และอื่นๆ เนื่องจากสีและคอนทราสต์เป็นองค์ประกอบสำคัญของการช่วยสำหรับการเข้าถึง จึงเป็นสิ่งสำคัญที่จะใช้สีที่มองเห็นได้ง่าย

Chakra UI ที่พร้อมใช้งานทันทีมาพร้อมกับออบเจ็กต์ธีมเริ่มต้นที่ตอบสนองความต้องการส่วนใหญ่ของแอปพลิเคชันของคุณในแง่ของสี แบบอักษร และอื่นๆ ธีมเริ่มต้นถูกตั้งค่าโดยคำนึงถึงคอนทราสต์ ซึ่งช่วยให้สลับโหมดสีได้อย่างง่ายดาย (เพิ่มเติมในภายหลัง)

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

ค่าในอ็อบเจ็กต์ธีมจะพร้อมใช้งานในแอปพลิเคชันของคุณโดยอัตโนมัติ ตัวอย่างเช่น สีที่ระบุใน theme.colors สามารถอ้างอิงได้จาก color , borderColor , backgroundColor , การ fill , stroke , และอุปกรณ์ style ในส่วนประกอบของคุณ

ในการปรับแต่งแอปพลิเคชันของคุณให้เป็นส่วนตัว คุณสามารถแทนที่ธีมเริ่มต้นที่ Chakra UI ให้มา หรือตั้งค่าใหม่ในนั้น ในการทำเช่นนั้น โมดูล Chakra UI Nuxt จะแสดงออบเจกต์ chakra ซึ่งจะรับคุณสมบัติ extendTheme ซึ่งรับออบเจกต์ ออบเจ็กต์ที่กำหนดให้ extendTheme จะถูกรวมซ้ำกับอ็อบเจกต์ธีมเริ่มต้นของ Chakra UI มาเพิ่มจานสีของแบรนด์ของเราให้กับ Chakra เพื่อให้เราสามารถนำไปใช้ในแอปพลิเคชันของเรา

หมายเหตุ : Chakra UI แนะนำให้เพิ่มจานสีลงในวัตถุสีของธีมของคุณโดยใช้คีย์ตั้งแต่ 50 ถึง 900 คุณสามารถใช้เครื่องมือเว็บเช่น coolors และ palx เพื่อสร้างจานสีเหล่านี้

สำหรับโฮมเพจสาธิตของเรา ฉันจะใช้สีไลม์ยี่ห้อ เพื่อให้ Chakra UI รับรู้สีนี้ ฉันจะสร้างออบเจ็กต์ customeTheme ในโฟลเดอร์ชื่อ chakra (คุณสามารถเรียกมันว่าอะไรก็ได้ที่คุณต้องการ) ในรูทของไดเรกทอรีของโปรเจ็กต์ของฉัน ในวัตถุนี้ ฉันจะกำหนดจานสีของแบรนด์ของเรา

สร้างไฟล์ชื่อ theme.js ในโฟลเดอร์ที่คุณสร้าง แล้วเพิ่มข้อมูลโค้ดต่อไปนี้:

 // ./chakra/theme.js const customTheme = { colors: { brand: { 50: '#f6fcee', 100: '#e2f4c8', 200: '#cbec9e', 300: '#b2e26e', 400: '#94d736', 500: '#75c800', 600: '#68b300', 700: '#599900', 800: '#477900', 900: '#294700' } } } module.exports = customTheme

ตอนนี้ขอรวมธีมที่กำหนดเองของเราเข้ากับ Chakra UI เราทำเช่นนั้นใน nuxt.config.js อันดับแรก เราต้องการออบเจ็กต์ธีมที่กำหนดเองของเรา:

 import customTheme from './chakra/theme'

ต่อไป เราต้องระบุคีย์ chakra ที่จัดเตรียมโดยโมดูล Chakra UI Nuxt และส่งผ่านใน customTheme ไปยังคุณสมบัติ extendTheme :

 chakra: { extendTheme: customTheme },

ไฟล์ nuxt.config.js ของคุณควรมีลักษณะดังนี้:

 // nuxt.config.js import customTheme from './chakra/theme' export default { mode: 'spa', /* * Headers of the page */ head: { title: process.env.npm_package_name || '', meta: [ { charset: 'utf-8' }, { name: 'viewport', content: 'width=device-width, initial-scale=1' }, { hid: 'description', name: 'description', content: process.env.npm_package_description || '' } ], link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }] }, /* * Customize the progress-bar color */ loading: { color: '#fff' }, /* * Global CSS */ css: [], /* * Plugins to load before mounting the App */ plugins: [], /* * Nuxt.js dev-modules */ buildModules: [ // Doc: https://github.com/nuxt-community/eslint-module '@nuxtjs/eslint-module' ], /* * Nuxt.js modules */ modules: [ '@chakra-ui/nuxt', '@nuxtjs/emotion' ], chakra: { extendTheme: customTheme }, /* * Build configuration */ build: { /* * You can extend webpack config here */ extend (config, ctx) {} } }

เมื่อคุณเรียกใช้แอปพลิเคชันด้วย npm run dev หน้าแรกของคุณควรมีลักษณะดังนี้:

แอปพลิเคชันสาธิตที่แสดง Chakra UI และ NuxtJS
(ตัวอย่างขนาดใหญ่)

ตอนนี้เราได้ติดตั้ง Chakra UI และเพิ่มธีมที่กำหนดเองของแอปพลิเคชันเรียบร้อยแล้ว มาเริ่มสร้าง Chakra-ui explorer กันเลย

การสร้างการนำทางหลักของเรา

เราต้องการให้การนำทางของเรามีชื่อแบรนด์ของเรา ในกรณีนี้ จะเป็น Chakra-ui explorer , ลิงก์การนำทาง 2 ลิงก์: Documentation and Repo และปุ่มที่รับผิดชอบในการสลับโหมดสีของเรา มาสร้างส่วนประกอบใหม่ภายใต้ไดเร็กทอรี components ที่เรียกว่า NavBar ซึ่งเราจะสร้างการนำทางหลักของแอปพลิเคชันของเราโดยใช้ Chakra UI

ลงมือทำกันเถอะ. เพิ่มตัวอย่างต่อไปนี้ใน NavBar.vue :

 <template> <c-box as="nav" h="60px" px="4" d="flex" align-items="center" shadow="sm" > <c-link as="nuxt-link" to="/" color="brand.700" font-weight="bold" :_hover="{ color: 'brand.900' }" > Chakra-ui Explorer </c-link> <c-box as="ul" color="gray.500" d="flex" align-items="center" list-style-type="none" ml="auto" > <c-box as="li" mr="8"> <c-link color="gray.500" :_hover="{ color: 'brand.400' }" is-external href="https://vue.chakra-ui.com" > Documentation </c-link> </c-box> <c-box as="li" mr="8"> <c-link color="gray.500" :_hover="{ color: 'brand.400' }" is-external href="https://github.com/chakra-ui/chakra-ui-vue" > Repo </c-link> </c-box> <c-box as="li"> <c-icon-button variant="ghost" variant-color="gray[900]" aria-label="Switch to dark mode" icon="moon" /> </c-box> </c-box> </c-box> </template> <script> import { CBox, CLink, CIconButton } from '@chakra-ui/vue' export default { name: 'NavBar', components: { CBox, CLink, CIconButton } } </script>

ต่อไป เราต้องนำเข้าส่วนประกอบนี้ในองค์ประกอบเค้าโครงเริ่มต้นของเรา — default.vue และเพิ่มลงในแม่แบบของเรา ดังนั้นเค้าโครงเริ่มต้นโดยรวมของเราควรมีลักษณะดังนี้:

 <template> <div class="container"> <c-theme-provider> <c-color-mode-provider> <c-box as="section"> <c-reset /> <nav-bar /> <nuxt /> </c-box> </c-color-mode-provider> </c-theme-provider> </div> </template> <script> import { CThemeProvider, CColorModeProvider, CReset, CBox } from '@chakra-ui/vue' import NavBar from '@/components/NavBar' export default { name: 'DefaultLayout', components: { CThemeProvider, CColorModeProvider, CReset, CBox, NavBar } } </script>

เมื่อคุณเรียกใช้แอปพลิเคชันของคุณตอนนี้ คุณจะเห็นสิ่งนี้:

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

as Prop

จากข้อมูลโค้ดของ NavBar.vue ด้านบน คุณจะสังเกตเห็น as อุปกรณ์ประกอบฉาก นี่เป็นคุณสมบัติที่มีให้สำหรับส่วนประกอบ Chakra UI ที่ให้คุณส่งแท็ก HTML หรือส่วนประกอบอื่นที่จะแสดงเป็นแท็กพื้นฐานของส่วนประกอบพร้อมกับสไตล์และอุปกรณ์ประกอบทั้งหมด เมื่อเราทำ:

 <c-box as="li"> <c-icon-button variant="ghost" variant-color="gray[900]" aria-label="Switch to dark mode" icon="moon" /> </c-box>

เรากำลังขอให้ Chakra UI แสดงองค์ประกอบ <li> และวางองค์ประกอบปุ่มไว้ข้างใน คุณยังสามารถเห็นเราใช้รูปแบบนั้นที่นี่:

 <c-link as="nuxt-link" to="/" color="brand.700" font-weight="bold" :_hover="{ color : 'brand.900' }"> ChakraMart </c-link>

ในกรณีข้างต้น เราขอให้ Chakra UI แสดงคอมโพเนนต์ <nuxt-link /> ของ Nuxt

as prop ให้อำนาจแก่คุณในการใช้องค์ประกอบที่ถูก (หรือผิด) สำหรับบริบทของมาร์กอัปของคุณ สิ่งนี้หมายความว่า คุณสามารถใช้ประโยชน์จากมันเพื่อสร้างเทมเพลตแอปพลิเคชันของคุณโดยใช้มาร์กอัปเชิงความหมาย ซึ่งจะทำให้แอปพลิเคชันของคุณมีความหมายต่อโปรแกรมอ่านหน้าจอมากขึ้น ดังนั้น แทนที่จะใช้องค์ประกอบ div ทั่วไปสำหรับเนื้อหาหลักของแอปพลิเคชันของคุณ ด้วย as prop คุณสามารถแสดงองค์ประกอบ main เพื่อบอกโปรแกรมอ่านหน้าจอว่านี่คือเนื้อหาหลักของแอปพลิเคชันของคุณ

หมายเหตุ : ตรวจสอบเอกสารประกอบสำหรับอุปกรณ์ประกอบฉากทั้งหมดที่เปิดเผยโดยส่วนประกอบ Chakra UI นอกจากนี้ ให้พิจารณาอย่างละเอียดยิ่งขึ้นถึงวิธีการระบุสีของแบรนด์ใน chakra/theme.js คุณสามารถดูได้จากตัวอย่างด้านบนว่าเรากำลังใช้เป็นสีใดๆ ที่ Chakra UI มีให้ อีกสิ่งหนึ่งที่ต้องระวังคือไอคอนรูป moon ที่เราใช้สำหรับ CIconButton บน NavBar ของเรา ไอคอน moon เป็นหนึ่งในไอคอนเริ่มต้นที่ Chakra UI จัดเตรียมไว้ให้

โหมดสี

คุณลักษณะหนึ่งของ Chakra UI คือการรองรับโหมดสี และคุณสามารถบอกได้จากการใช้ไอคอน moon ในการนำทางของนักสำรวจ Chakra-ui เราวางแผนที่จะผสานรวมโหมดมืด ดังนั้น แทนที่จะปล่อยให้มันเป็นครั้งสุดท้าย เรามาทำให้มันจบๆ ไปกันเถอะ เมื่อต้องการทำเช่นนี้ CColorModeProvider โดยใช้ฟังก์ชันให้/ฉีดของ Vue ให้ฟังก์ชัน $chakraColorMode และ $toggleColorMode $chakraColorMode คืนค่าโหมดสีปัจจุบันของแอปพลิเคชันของคุณในขณะที่ $toggleColorMode สลับโหมดสีจาก light เป็น dark และในทางกลับกัน ในการใช้สองฟังก์ชันนี้ เราจำเป็นต้องใส่ฟังก์ชันลงในคอมโพเนนต์ NavBar.vue ลองทำด้านล่างในส่วน <script /> :

 <script> <script> import { CBox, CLink, CIconButton } from '@chakra-ui/vue' export default { name: 'NavBar', inject: ['$chakraColorMode', '$toggleColorMode'], components: { CBox, CLink, CIconButton }, } </script>

มาสร้างคุณสมบัติที่คำนวณเพื่อคืนค่าโหมดสี:

 ... computed: { colorMode () { return this.$chakraColorMode() } }

ตอนนี้เราได้เพิ่มฟังก์ชันทั้งสองใน NavBar.vue เรามาปรับเปลี่ยนปุ่มโหมดสลับสีกัน เราจะเริ่มต้นด้วยไอคอนเพื่อให้แสดงไอคอนที่แตกต่างกันขึ้นอยู่กับโหมดสี ส่วนประกอบ CIconButton ของเราตอนนี้มีลักษณะดังนี้:

 <c-icon-button variant="ghost" variant-color="gray[900]" aria-label="Switch to dark mode" :icon="colorMode == 'light' ? 'moon' : 'sun'" />

ขณะนี้ เรากำลังใช้แอตทริบิวต์ aria-label เพื่อบอกให้โปรแกรมอ่านหน้าจอเปลี่ยนเป็นโหมดมืด มาปรับเปลี่ยนสิ่งนี้เพื่อรองรับทั้งโหมดสว่างและมืด:

 <c-icon-button variant="ghost" variant-color="gray[900]" :aria-label="`Switch to ${colorMode == 'light' ? 'dark : 'light'} mode`" :icon="colorMode == 'light' ? 'moon' : 'sun'" />

สุดท้าย เราจะเพิ่มตัวจัดการเหตุการณ์การคลิกบนปุ่มเพื่อสลับโหมดสีของแอปพลิเคชันของเราโดยใช้ฟังก์ชัน $toggleColorMode ชอบดังนั้น:

 <c-icon-button variant="ghost" variant-color="gray[900]" :aria-label="`Switch to ${colorMode == 'light' ? 'dark' : 'light'} mode`" :icon="colorMode == 'light' ? 'moon' : 'sun'" @click="$toggleColorMode" />

เพื่อทดสอบว่าการตั้งค่าโหมดสีของเราใช้งานได้หรือไม่ ฉันจะเพิ่มการประมาณค่าของโหมดสีและข้อความถัดจาก CIconButton เพื่อสลับโหมดสีของเรา ชอบดังนั้น:

 <c-box as="li"> <c-icon-button variant="ghost" variant-color="gray[900]" :aria-label="`Switch to ${colorMode == 'light' ? 'dark' : 'light'} mode`" :icon="colorMode == 'light' ? 'moon' : 'sun'" @click="$toggleColorMode" /> Current mode: {{ colorMode }} </c-box>

นี่คือลักษณะที่แอพของเราในปัจจุบัน:

ดังนั้นเราจึงดำเนินการอย่างหนักในการตั้งค่าโหมดสีใน Chakra UI ตอนนี้เราสามารถจัดรูปแบบแอปพลิเคชันของเราตามโหมดสีได้ ไปที่ default.vue และใช้โหมดสี prop slot prop ที่ CColorModeProvider จัดเตรียมไว้ให้เพื่อจัดรูปแบบแอปพลิเคชันของเรา มาแก้ไขเทมเพลตของเราก่อนใน default.vue

 <template> <div class="container"> <c-theme-provider> <c-color-mode-provider #default="{ colorMode }"> <c-box v-bind="mainStyles[colorMode]" w="100vw" h="100vh" as="section" > <c-reset /> <nav-bar /> <nuxt /> </c-box> </c-color-mode-provider> </c-theme-provider> </div> </template>

เรากำลังทำลาย colorMode จากคุณสมบัติ slot props ที่จัดทำโดย CColorModeProvider จากนั้นส่งต่อเป็นไดนามิกคีย์ไปยังอ็อบเจกต์ mainStyle ซึ่งเราจะสร้างในอีกสักครู่ แนวคิดคือการใช้ชุดสไตล์ที่แตกต่างกันตามค่า colorMode ฉันยังใช้ความกว้างและความสูงกับอุปกรณ์ประกอบฉากชวเลข — w และ h ตามลำดับเพื่อกำหนดความกว้างและความสูงขององค์ประกอบ CBox ของเรา มากำหนดวัตถุ mainStyles นี้ในส่วนสคริปต์ของเรา:

 <script> import { CThemeProvider, CColorModeProvider, CReset, CBox } from '@chakra-ui/vue' import NavBar from '@/components/NavBar' export default { name: 'DefaultLayout', components: { CThemeProvider, CColorModeProvider, CReset, CBox, NavBar }, data () { return { mainStyles: { dark: { bg: 'gray.900', color: 'whiteAlpha.900' }, light: { bg: 'whiteAlpha.900', color: 'gray.900' } } } } } </script>

Chakra-ui explorer ตอนนี้รองรับโหมดมืดแล้ว!

ตอนนี้ เรามีแถบการนำทางและตั้งค่าการรองรับโหมดมืดสำหรับแอปพลิเคชันของเราเรียบร้อยแล้ว มาเน้นที่ index.vue ใน pages/ ไดเร็กทอรีของเราซึ่งพบเนื้อของแอปพลิเคชันของเรา เราจะเริ่มต้นด้วยการเพิ่มองค์ประกอบ CBox ดังนี้:

 <c-box as="main" d="flex" direction="column" align-items="center" p="10" > </c-box>

จากนั้นเราจะเพิ่มองค์ประกอบ CInput เข้าไปข้างใน องค์ประกอบของหน้า index.vue ของเราจะมีลักษณะดังนี้:

 <template> <c-box as="main" d="flex" align-items="center" direction="column" w="auto" p="16" > <c-input placeholder="Search components..." size="lg" mb="5" is-full-width /> </c-box> </template> <script> import { CBox, CInput } from '@chakra-ui/vue' export default { components: { CBox, CInput } } </script>

นี่คือลักษณะที่แอปพลิเคชันของเราดูเหมือนตอนนี้:

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

การเพิ่มรายการส่วนประกอบ

ดังนั้นแนวคิดของ Chakra-ui explorer (ตามที่ระบุไว้ก่อนหน้านี้) คือการแสดงส่วนประกอบทั้งหมดที่มีให้ผู้ใช้ใน Chakra UI เพื่อให้เราสามารถมีรายการส่วนประกอบเหล่านั้นรวมถึงลิงก์ที่จะนำผู้ใช้ไปยังเอกสารประกอบ ของส่วนประกอบ ในการทำเช่นนี้ ฉันจะสร้างโฟลเดอร์ชื่อ data ที่รูทของไดเร็กทอรีของโปรเจ็กต์ จากนั้นสร้างไฟล์ชื่อ index.js ใน index.js ฉันจะส่งออกอาร์เรย์ของวัตถุซึ่งจะมีชื่อของส่วนประกอบ ไฟล์ควรมีลักษณะดังนี้:

 // ./data/index.js export const components = [ { name: 'Accordion' }, { name: 'Alert' }, { name: 'AlertDialog' }, { name: 'AspectRatioBox' }, { name: 'AspectRatioBox' }, { name: 'Avatar' }, { name: 'Badge' }, { name: 'Box' }, { name: 'Breadcrumb' }, { name: 'Button' }, { name: 'Checkbox' }, { name: 'CircularProgress' }, { name: 'CloseButton' }, { name: 'Code' }, { name: 'Collapse' }, { name: 'ControlBox' }, { name: 'Divider' }, { name: 'Drawer' }, { name: 'Editable' }, { name: 'Flex' }, { name: 'Grid' }, { name: 'Heading' }, { name: 'Icon' }, { name: 'IconButton' }, { name: 'IconButton' }, { name: 'Input' }, { name: 'Link' }, { name: 'List' }, { name: 'Menu' }, { name: 'Modal' }, { name: 'NumberInput' }, { name: 'Popover' }, { name: 'Progress' }, { name: 'PseudoBox' }, { name: 'Radio' }, { name: 'SimpleGrid' }, { name: 'Select' }, { name: 'Slider' }, { name: 'Spinner' }, { name: 'Stat' }, { name: 'Stack' }, { name: 'Switch' }, { name: 'Tabs' }, { name: 'Tag' }, { name: 'Text' }, { name: 'Textarea' }, { name: 'Toast' }, { name: 'Tooltip' } ]

เพื่อให้การติดตั้งใช้งานของเราเสร็จสมบูรณ์ ฉันจะนำเข้าอาร์เรย์ด้านบนไปที่ pages/index.vue และทำซ้ำเพื่อแสดงส่วนประกอบทั้งหมด นอกจากนี้ เราจะให้ผู้ใช้สามารถกรองส่วนประกอบโดยใช้ช่องค้นหา นี่คือการใช้งานที่สมบูรณ์:

 // pages/index.vue <template> <c-box as="main" d="flex" align-items="space-between" flex-direction="column" w="auto" p="16" > <c-input v-model="search" placeholder="Search components..." size="lg" mb="10" is-full-width /> <c-grid template-columns="repeat(4, 1fr)" gap="3" p="5"> <c-box v-for="(chakraComponent, index) of filteredComponents" :key="index" h="10"> {{ chakraComponent.name }} <c-badge> <c-link is-external :href="lowercase(`https://vue.chakra-ui.com/${chakraComponent.name}`)" > <c-icon name="info" size="18px" /> </c-link> </c-badge> </c-box> </c-grid> </c-box> </template> <script> import { CBox, CInput, CGrid, CLink, CBadge, CIcon } from '@chakra-ui/vue' import { components as chakraComponents } from '../data' export default { components: { CBox, CInput, CGrid, CBadge, CIcon, CLink }, data () { return { search: '' } }, computed: { filteredComponents () { return chakraComponents.filter((component) => { return this.lowercase(component.name).includes(this.lowercase(this.search)) }) } }, methods: { lowercase (value) { return value.toLowerCase() } } } </script>

และตอนนี้แอปพลิเคชันของเรามีลักษณะดังนี้:

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

นำ Chakra UI มาทดสอบ

สุดท้าย มาดูกันว่าแอปของเราให้คะแนนอย่างไรโดยเรียกใช้การทดสอบการช่วยสำหรับการเข้าถึงของ Lighthouse โปรดทราบว่าการทดสอบนี้อิงตามการประเมินผลกระทบต่อผู้ใช้ของ Axe ด้านล่างนี้เป็น screencast ของการทดสอบ คุณยังสามารถทำการทดสอบด้วยตัวเองโดยทำตามขั้นตอนเหล่านี้

จาก screencast ด้านบน คุณจะเห็นว่าแอป Chakra UI ของเรามีคะแนน 85 ในการทดสอบการเข้าถึงของประภาคาร

บทสรุป

ในบทความนี้ เราได้สัมผัสถึงความจำเป็นในการสร้างอินเทอร์เฟซที่เข้าถึงได้ และเรายังได้เห็นวิธีใช้ Chakra UI เพื่อสร้างแอปพลิเคชันที่เข้าถึงได้ตั้งแต่ต้นด้วยการสร้างนักสำรวจ (Chakra-ui explorer) สำหรับส่วนประกอบ Chakra UI

  • ดูแอปพลิเคชั่นสดบน Netlify →
  • ลิงค์ไปยัง repo →