كيفية إنشاء تطبيق أمامي يمكن الوصول إليه باستخدام Chakra UI و Nuxt.js

بالنسبة للعديد من الأشخاص ، تعد الويب جزءًا أساسيًا من حياتهم اليومية. يستخدمونها في العمل والمنزل وحتى على الطريق. تعني إمكانية الوصول إلى الويب أن الأشخاص ذوي الإعاقة يمكنهم استخدام الويب على قدم المساواة. لذلك من الأهمية بمكان للمطورين والمؤسسات الذين يقومون بالبناء على الويب بناء الشمولية وإمكانية الوصول في تطبيقاتهم.

لجعل الوصول إلى الويب أكثر سهولة ، هناك مجموعة من أفضل الممارسات والمعايير التي سيتعين عليك تنفيذها في تطبيقاتك ، مثل الالتزام بما يلي:

• القسم 508 ؛
• قانون التكنولوجيا المساعدة ؛
• قانون الأمريكيين ذوي الإعاقة (ADA) ؛
• WCAG 2.0 (إرشادات A & AA) ؛
• إرشادات الوصول إلى خدمة BBC Mobile ؛
• ممارسات WAI-ARIA ( W eb A ccessibility I nitiative- A ccessible R ich I nternet A pplications).

قد يبدو تعلم تطبيق هذه المعايير مهمة شاقة عندما تضع في الاعتبار المواعيد النهائية للمشروع والقيود الأخرى التي يتعين عليك العمل معها كمطور. في ضوء ذلك ، اسمحوا لي أن أقدم لكم نظام تصميم واجهة المستخدم الذي تم تصميمه لمساعدتك في إتاحة الوصول إلى تطبيقات الويب الخاصة بك.

شقرا UI

Chakra UI هو نظام تصميم وإطار عمل لواجهة المستخدم تم إنشاؤه بواسطة Segun Adebayo. تم إنشاؤه مع مراعاة البساطة والنمطية والتركيب وإمكانية الوصول. تمنحك Chakra UI جميع اللبنات اللازمة لإنشاء تطبيقات أمامية يمكن الوصول إليها.

ملاحظة : بينما تعتمد Chakra UI على CSS-in-JS تحت الغطاء ، لا تحتاج إلى معرفتها من أجل استخدام المكتبة.

على الرغم من أن إطار العمل قد تم إنشاؤه في الأصل لـ React ، إلا أن جوناثان باكبوا قاد عملية النقل إلى Vue. لذلك يمكن لمطوري Vuejs / NuxtJS الآن استخدام Chakra UI لإنشاء تطبيقات ويب يمكن الوصول إليها.

ميزات واجهة المستخدم شقرا

تم إنشاء Chakra UI مع وضع المبادئ التالية في الاعتبار:

• الدعائم النمط
  يتيح Chakra UI إمكانية تصميم المكونات أو تجاوز أنماطها باستخدام الدعائم. هذا يقلل من الحاجة إلى الأنماط أو الأنماط المضمنة. تحقق Chakra UI هذا المستوى من المرونة باستخدام أنظمة Styled تحت الغطاء.
• تعبير
  تم تقسيم المكونات في Chakra UI إلى أجزاء أصغر مع الحد الأدنى من الدعائم للحفاظ على مستوى التعقيد منخفضًا ، وتكوينها معًا. سيضمن ذلك أن تكون الأنماط والوظائف مرنة وقابلة للتوسيع. على سبيل المثال ، يمكنك استخدام مكونات CBox و CPseudoBox لإنشاء مكونات جديدة.
• يمكن الوصول
  مكونات Chakra UI تتبع مواصفات إرشادات WAI-ARIA ولها سمات aria- * الصحيحة. يمكنك أيضًا العثور على تقرير إمكانية الوصول لكل مكون مؤلف في ملف يسمى accessibility.md . انظر تقرير الوصول لمكون CAccordion .
• ثيميفيس
  يوفر لك 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 الخاص بك.

إعداد شقرا UI

يستخدم Chakra UI Emotion للتعامل مع أنماط المكونات. لبدء استخدام 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 ، والحد ، style في stroke .

لتخصيص تطبيقك ، يمكنك تجاوز السمة الافتراضية التي توفرها Chakra UI أو تعيين قيم جديدة فيه. للقيام بذلك ، تعرض وحدة Chakra UI Nuxt كائنًا chakra والذي سيأخذ في خاصية extendTheme التي تأخذ كائنًا. سيتم دمج الكائن المعطى لـ extendTheme بشكل متكرر إلى كائن سمة افتراضية لواجهة Chakra. دعنا نضيف لوحة ألوان علامتنا التجارية إلى Chakra حتى نتمكن من استخدامها في تطبيقنا.

ملاحظة : توصي Chakra UI بإضافة لوحة ألوان إلى كائن الألوان لموضوعك باستخدام مفاتيح من 50 إلى 900. يمكنك استخدام أدوات الويب مثل المبردات و 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 وإضافة المظهر المخصص لتطبيقنا ، فلنبدأ في بناء مستكشف Chakra-ui.

إنشاء التنقل الرئيسي الخاص بنا

نريد أن يكون للملاحة الخاصة بنا اسم علامتنا التجارية ، في هذه الحالة ، سيكون Chakra-ui explorer ، ورابطان للتنقل: التوثيق و 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

من مقتطف 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's <nuxt-link />.

تمنحك خاصية as prop القدرة على استخدام العنصر الصحيح (أو الخطأ) لسياق الترميز. ما يعنيه هذا ، هو أنه يمكنك الاستفادة منه لبناء قالب التطبيق الخاص بك باستخدام العلامات الدلالية التي ستجعل تطبيقك أكثر فائدة لقارئات الشاشة. لذا فبدلاً من استخدام عنصر div عام للمحتوى الرئيسي لتطبيقك ، باستخدام الخاصية as prop ، يمكنك عرض عنصر main يخبر قراء الشاشة أن هذا هو المحتوى الرئيسي لتطبيقك.

ملاحظة : تحقق من الوثائق الخاصة بجميع الدعائم التي تعرضها مكونات واجهة مستخدم Chakra. ألق نظرة فاحصة أيضًا على كيفية تحديد لون العلامة التجارية في chakra/theme.js . يمكنك أن ترى من المقتطف أعلاه أننا نستخدمه كأي من الألوان التي توفرها Chakra UI. شيء آخر يجب أن تكون على دراية به هو رمز moon الذي استخدمناه لـ CIconButton على شريط التنقل الخاص بنا. رمز moon هو أحد الرموز الافتراضية التي توفرها Chakra UI خارج الصندوق.

وضع اللون

واحدة من ميزات Chakra UI هي دعم وضع الألوان. ويمكنك معرفة ذلك من خلال استخدام رمز moon في التنقل في مستكشف Chakra-ui ، فنحن نخطط لدمج الوضع المظلم. لذا بدلاً من تركها للأخير ، دعنا ننتهي من الأمر ونشغلها الآن. للقيام بذلك ، CColorModeProvider باستخدام تقديم / حقن Vue وظائف ، $chakraColorMode و $toggleColorMode . $chakraColorMode وضع اللون الحالي لتطبيقك بينما $toggleColorMode وضع اللون من light إلى dark والعكس صحيح. لاستخدام هاتين الوظيفتين ، سنحتاج إلى NavBar.vue في مكون 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 ونستخدم خاصية فتحة وضع اللون التي يوفرها 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>

يحتوي مستكشف واجهة المستخدم شقرا الآن على دعم الوضع المظلم!

الآن لدينا شريط التنقل الخاص بنا وقمنا بإعداد دعم الوضع المظلم بنجاح لتطبيقنا ، دعنا نركز على 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>

إليك كيف يبدو تطبيقنا الآن:

يمكنك أن ترى من تسجيل الشاشة أعلاه كيف يعرف عنصر CInput تلقائيًا عندما يكون في الوضع المظلم وتعديله وفقًا لذلك على الرغم من أننا لم نقم بتعيين ذلك صراحة. أيضًا ، يمكن للمستخدم الضغط على مفتاح tab للتركيز على مكون CInput هذا.

إضافة قائمة المكونات

لذا فإن فكرة مستكشف Chakra-ui (كما ذكرنا سابقًا) هي أن نعرض للمستخدم جميع المكونات المتاحة في 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>

والآن يبدو تطبيقنا كالتالي:

يمكنك الآن معرفة كيف يكون الوضع المظلم تلقائيًا لقائمة المكونات وكذلك كيفية إضافة إدارة التركيز للروابط (افتراضيًا) للمساعدة في الوصول.

وضع شقرا UI على المحك

أخيرًا ، دعنا نرى كيف يسجل تطبيقنا من خلال تشغيل اختبار إمكانية الوصول Lighthouse عليه. ضع في اعتبارك أن هذا الاختبار يعتمد على تقييم تأثير مستخدم Axe. يوجد أدناه لقطة شاشة للاختبار. يمكنك أيضًا إجراء الاختبار بنفسك باتباع هذه الخطوات.

من تسجيل الشاشة أعلاه ، يمكنك أن ترى أن تطبيق Chakra UI الخاص بنا حصل على درجة 85 في اختبار إمكانية الوصول إلى المنارة.

خاتمة

في هذه المقالة ، تطرقنا إلى الحاجة إلى بناء واجهات يمكن الوصول إليها ورأينا أيضًا كيفية استخدام Chakra UI لبناء تطبيقات يمكن الوصول إليها من الألف إلى الياء من خلال بناء مستكشف (Chakra-ui explorer) لمكونات Chakra UI.

• شاهد التطبيق المباشر على Netlify →
• رابط إلى الريبو →