• Beranda
  • Artikel
  • Web
  • Cara Membangun Aplikasi Front-End yang Dapat Diakses Dengan Chakra UI Dan Nuxt.js

Cara Membangun Aplikasi Front-End yang Dapat Diakses Dengan Chakra UI Dan Nuxt.js

Diterbitkan: 2022-03-10
Ringkasan cepat Pada artikel ini, kita akan melihat cara menggunakan Chakra UI dan NuxtJS dalam membangun aplikasi front-end yang dapat diakses. Untuk mengikuti, Anda harus terbiasa menggunakan kerangka kerja front-end progresif Vue.js dengan Nuxt. Jika tidak, lihat dokumen Vue.js dan NuxtJS untuk memulai.

Bagi banyak orang, web adalah bagian penting dari kehidupan sehari-hari mereka. Mereka menggunakannya di tempat kerja, di rumah, dan bahkan di jalan. Aksesibilitas web berarti penyandang disabilitas dapat menggunakan web secara setara. Jadi, sangat penting bagi pengembang dan organisasi yang membangun di web untuk membangun inklusivitas dan aksesibilitas ke dalam aplikasi mereka.

Untuk membuat web lebih mudah diakses, ada beberapa praktik dan standar terbaik yang harus Anda terapkan dalam aplikasi Anda, seperti mengikuti yang berikut:

  • Bagian 508;
  • Undang-Undang Teknologi Bantu;
  • Undang-Undang Penyandang Disabilitas Amerika (ADA);
  • WCAG 2.0 (Pedoman A & AA);
  • Pedoman Aksesibilitas Seluler BBC;
  • WAI-ARIA ( Web A accesibility I nitiative– Aplikasi R ich I nternet A yang dapat diakses).

Mempelajari penerapan standar ini bisa tampak seperti tugas yang menakutkan ketika Anda memperhitungkan tenggat waktu proyek dan kendala lain yang harus Anda tangani sebagai pengembang. Sehubungan dengan itu, izinkan saya memperkenalkan Anda pada sistem desain UI yang dibuat untuk membantu Anda membuat aplikasi web Anda dapat diakses.

Cakra UI

Chakra UI adalah sistem desain dan kerangka UI yang dibuat oleh Segun Adebayo. Itu dibuat dengan mempertimbangkan kesederhanaan, modularitas, komposisi, dan aksesibilitas. Chakra UI memberi Anda semua blok bangunan yang diperlukan untuk membuat aplikasi front-end yang dapat diakses.

Catatan : Meskipun Chakra UI bergantung pada CSS-in-JS di bawah tenda, Anda tidak perlu mengetahuinya untuk menggunakan perpustakaan.

Meskipun framework awalnya dibuat untuk React, Jonathan Bakebwa memimpin porting ke Vue. Jadi pengembang Vuejs/NuxtJS sekarang dapat memanfaatkan UI Chakra untuk membuat aplikasi web yang dapat diakses.

Fitur Chakra UI

Chakra UI dibuat dengan prinsip-prinsip berikut dalam pikiran:

  • Alat peraga gaya
    Chakra UI memungkinkan untuk menata komponen atau mengganti gayanya dengan menggunakan alat peraga. Ini mengurangi kebutuhan akan stylesheet atau gaya sebaris. Chakra UI mencapai tingkat fleksibilitas ini dengan menggunakan Sistem Bergaya di bawah tenda.
  • Komposisi
    Komponen di UI Chakra telah dipecah menjadi bagian-bagian yang lebih kecil dengan alat peraga minimal untuk menjaga kompleksitas tetap rendah, dan menyusunnya bersama-sama. Ini akan memastikan bahwa gaya dan fungsionalitasnya fleksibel dan dapat diperluas. Misalnya, Anda dapat menggunakan komponen CBox dan CPseudoBox untuk membuat komponen baru.
  • Dapat diakses
    Komponen Chakra UI mengikuti spesifikasi pedoman WAI-ARIA dan memiliki atribut aria-* yang tepat. Anda juga dapat menemukan laporan aksesibilitas dari setiap komponen yang ditulis dalam file bernama accessibility.md . Lihat laporan aksesibilitas untuk komponen CAccordion .
  • Bertema
    Chakra UI memberi Anda kemampuan untuk dengan mudah mereferensikan nilai dari tema Anda di seluruh aplikasi Anda, pada komponen apa pun.
  • Dukungan mode gelap
    Sebagian besar komponen di Chakra UI kompatibel dengan mode gelap.

Bagaimana Chakra UI Mendukung Aksesibilitas

Salah satu prinsip inti di balik pembuatan Chakra UI adalah aksesibilitas . Dengan mengingat hal itu, semua komponen di Chakra UI hadir dengan dukungan aksesibilitas dengan menyediakan:

  • Navigasi Keyboard — berguna bagi pengguna dengan disabilitas keterampilan motorik,
  • Manajemen Fokus,
  • atribut aria-* yang dibutuhkan oleh pembaca layar,
  • Fokus trapping dan restorasi untuk dialog modal.
Lebih banyak setelah melompat! Lanjutkan membaca di bawah ini

Memulai Dengan Chakra UI Dan Nuxt

Catatan : Untuk menggunakan UI Chakra dengan Vue.js, lihat panduan Memulai.

Untuk proyek demo kami, kami akan membangun Chakra-ui explorer — aplikasi web satu halaman yang dapat diakses untuk mencari komponen Chakra UI.

  • Lihat proyek langsung di Netlify →

Memulai Dengan Penjelajah Chakra-ui

Dengan asumsi Anda sudah menginstal NPM, buat aplikasi Nuxt baru dengan menjalankan:

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

Atau jika Anda lebih suka di benang, jalankan:

 $ yarn create nuxt-app chakra-ui-explorer

Ikuti perintah penginstalan untuk menyelesaikan pembuatan aplikasi Nuxt Anda.

Menyiapkan UI Chakra

Chakra UI menggunakan Emosi untuk menangani gaya komponen. Jadi untuk memulai dengan Chakra UI, Anda perlu menginstal Chakra UI bersama Emotion sebagai ketergantungan rekan. Untuk proyek ini, kami akan menggunakan modul Nuxt resmi untuk UI Chakra dan Emosi yang akan mengurangi gesekan dalam memulai dengan UI Chakra. Mari tambahkan mereka ke proyek kita dengan menjalankan perintah berikut:

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

Catatan : @nuxtjs/emotion memungkinkan gaya komponen Anda dibuat dan disuntikkan di server build.

Setelah menginstal kedua modul, Anda harus mendaftarkannya di file nuxt.config.js di bawah opsi array modules:

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

Untuk menyelesaikan proses penyiapan Chakra UI, kita perlu menyentuh komponen layout default di layouts/ dan menambahkan CThemeProvider , CColorModeProvider , dan CReset dari Chakra UI.

Disarankan agar Anda menggunakan komponen CReset untuk memastikan semua komponen yang disediakan oleh Chakra UI berfungsi dengan benar.

Komponen CThemeProvider akan membuat tema Anda tersedia untuk setiap bagian dari aplikasi Anda, sedangkan komponen CColorModeProvider bertanggung jawab untuk menangani mode warna aplikasi kita yang dapat berupa salah satu dari dua status: terang atau gelap. Terakhir, komponen CReset akan menghapus semua gaya default browser.

Mari tambahkan komponen yang disebutkan di atas di layouts/default.vue . Di bagian template kami, mari tambahkan ini:

 <!-- 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>

Kemudian di bagian skrip kami, kami akan mengimpor dan mendaftarkan komponen seperti:

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

Komponen tata letak default.vue Anda akan terlihat seperti ini:

 <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>

Catatan : Perhatikan saya membungkus komponen <c-reset /> dan <nuxt /> dalam komponen c-box .

Mengatur Tema Aplikasi Anda

Chakra UI memungkinkan Anda mengatur tema untuk aplikasi Anda. Dengan 'tema', maksud saya pengaturan palet warna aplikasi Anda, skala jenis, tumpukan font, titik henti sementara, nilai radius batas, dan sebagainya. Karena warna dan kontras adalah komponen penting dari aksesibilitas, penting untuk menggunakan warna yang mudah dilihat.

Di luar kotak Chakra UI dikirimkan dengan objek tema default yang memenuhi sebagian besar kebutuhan aplikasi Anda dalam hal warna, font, dan sebagainya. Tema default diatur dengan mempertimbangkan kontras yang memungkinkan untuk beralih mode warna dengan mudah (lebih lanjut tentang ini nanti).

Chakra UI, bagaimanapun, memungkinkan Anda untuk memperluas atau sepenuhnya mengganti tema default. Ini dimungkinkan dengan menerima objek tema berdasarkan Spesifikasi Tema Sistem Bergaya.

Nilai dalam objek tema secara otomatis tersedia untuk digunakan dalam aplikasi Anda. Misalnya, warna yang ditentukan dalam theme.colors dapat direferensikan oleh color , borderColor , backgroundColor , fill , stroke , dan style props di komponen Anda.

Untuk mempersonalisasi aplikasi Anda, Anda dapat mengganti tema default yang disediakan oleh UI Chakra atau menetapkan nilai baru di dalamnya. Untuk melakukan itu, modul Chakra UI Nuxt mengekspos objek chakra yang akan mengambil properti extendTheme yang mengambil objek. Objek yang diberikan untuk extendTheme akan digabungkan secara rekursif ke objek tema default UI Chakra. Mari tambahkan palet warna merek kami ke Chakra sehingga kami dapat menggunakannya dalam aplikasi kami.

Catatan : Chakra UI merekomendasikan untuk menambahkan palet warna ke objek warna tema Anda menggunakan kunci dari 50 — 900. Anda dapat menggunakan alat web seperti pendingin dan palx untuk menghasilkan palet ini.

Untuk beranda demo kami, saya akan menggunakan merek warna kapur. Untuk membuat UI Chakra mengetahui warna ini, saya akan membuat objek customeTheme dalam folder bernama chakra (Anda dapat menyebutnya apa pun yang Anda inginkan) di root direktori proyek saya. Dalam objek ini, saya akan mendefinisikan palet warna merek kami.

Buat file bernama theme.js di folder yang Anda buat lalu tambahkan cuplikan berikut:

 // ./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

Sekarang mari gabungkan tema khusus kita ke UI Chakra. Kami melakukannya di nuxt.config.js . Pertama, kita membutuhkan objek tema khusus kita:

 import customTheme from './chakra/theme'

Selanjutnya, kita harus menentukan kunci chakra yang disediakan oleh modul Chakra UI Nuxt dan meneruskan customTheme ke properti extendTheme :

 chakra: { extendTheme: customTheme },

File nuxt.config.js Anda akan terlihat seperti ini:

 // 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) {} } }

Saat Anda menjalankan aplikasi dengan npm run dev , beranda Anda akan terlihat seperti ini:

Aplikasi demo yang menampilkan UI Chakra dan NuxtJS
(Pratinjau besar)

Sekarang kita telah berhasil menginstal Chakra UI dan menambahkan tema kustom aplikasi kita, mari kita mulai membangun penjelajah Chakra-ui.

Membuat Navigasi Utama Kami

Kami ingin navigasi kami memiliki nama merek kami, dalam hal ini, itu adalah penjelajah Chakra-ui , 2 tautan navigasi: Dokumentasi dan Repo , dan tombol yang bertanggung jawab untuk mengaktifkan mode warna kami. Mari buat komponen baru di bawah direktori components bernama NavBar di mana kita akan membuat navigasi utama aplikasi kita menggunakan Chakra UI.

Mari kita lakukan. Tambahkan cuplikan berikut ke 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>

Selanjutnya, kita perlu mengimpor komponen ini di komponen layout default kita — default.vue dan menambahkannya ke template kita sehingga secara keseluruhan layout default kita akan terlihat seperti ini:

 <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>

Saat Anda menjalankan aplikasi Anda sekarang, Anda akan melihat ini:

Anda dapat melihat bahwa navigasi sudah dapat diakses bahkan tanpa menentukannya. Ini hanya dapat dilihat ketika Anda menekan tombol Tab pada keyboard Anda; Chakra UI menangani manajemen fokus sementara Anda dapat fokus pada setiap tautan pada menu navigasi.

as Prop

Dari cuplikan NavBar.vue kami di atas, Anda akan melihat as prop. Ini adalah fitur yang tersedia untuk komponen UI Chakra yang memungkinkan Anda meneruskan tag HTML atau komponen lain untuk dirender sebagai tag dasar komponen beserta semua gaya dan propertinya. Jadi ketika kami melakukan:

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

kami meminta UI Chakra untuk merender elemen <li> dan menempatkan komponen tombol di dalamnya. Anda juga dapat melihat kami menggunakan pola itu di sini:

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

Dalam kasus di atas, kami meminta UI Chakra untuk merender komponen <nuxt-link /> Nuxt.

as prop memberi Anda kekuatan untuk menggunakan elemen yang benar (atau salah) untuk konteks markup Anda. Artinya, apakah Anda dapat memanfaatkannya untuk membangun templat aplikasi Anda menggunakan markup semantik yang akan membuat aplikasi Anda lebih bermakna bagi pembaca layar. Jadi, alih-alih menggunakan elemen div generik untuk konten utama aplikasi Anda, dengan as prop Anda dapat merender elemen main yang memberi tahu pembaca layar bahwa ini adalah konten utama aplikasi Anda.

Catatan : Lihat dokumentasi untuk semua props yang diekspos oleh komponen Chakra UI. Juga, perhatikan lebih dekat bagaimana warna merek di chakra/theme.js ditentukan. Anda dapat melihat dari cuplikan di atas bahwa kami menggunakannya sebagai salah satu warna yang disediakan oleh UI Chakra. Hal lain yang perlu diperhatikan adalah ikon moon yang kami gunakan untuk CIconButton di NavBar kami. Ikon moon adalah salah satu ikon default yang disediakan Chakra UI di luar kotak.

Mode Warna

Salah satu fitur Chakra UI adalah dukungan mode warna. Dan Anda dapat mengetahui dari penggunaan ikon moon di navigasi penjelajah Chakra-ui, kami berencana untuk mengintegrasikan mode gelap. Jadi alih-alih meninggalkannya untuk yang terakhir, mari kita selesaikan dan pasang sekarang. Untuk melakukan ini, CColorModeProvider menggunakan fungsi Vue yang menyediakan/menyuntikkan, menyediakan, $chakraColorMode dan $toggleColorMode . $chakraColorMode mengembalikan mode warna aplikasi Anda saat ini sementara $toggleColorMode mengubah mode warna dari light ke dark dan sebaliknya. Untuk menggunakan kedua fungsi ini, kita harus memasukkannya ke dalam komponen NavBar.vue . Mari kita lakukan ini di bawah di bagian <script /> :

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

Mari buat properti yang dihitung untuk mengembalikan mode warna:

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

Sekarang kita telah menyuntikkan kedua fungsi di NavBar.vue , mari kita ubah tombol mode warna beralih. Kita akan mulai dengan ikon sehingga menunjukkan ikon yang berbeda tergantung pada mode warna. Komponen CIconButton kami sekarang terlihat seperti ini pada keadaan ini:

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

Saat ini, kami menggunakan atribut aria-label untuk memberi tahu pembaca layar untuk Beralih ke mode gelap. Mari kita ubah ini untuk mendukung mode terang dan gelap:

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

Terakhir, kita akan menambahkan event handler klik pada tombol untuk mengaktifkan mode warna aplikasi kita menggunakan fungsi $toggleColorMode . Seperti:

 <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" />

Untuk menguji apakah pengaturan mode warna kami berfungsi, saya akan menambahkan interpolasi mode warna dan teks di sebelah CIconButton untuk mengaktifkan mode warna kami. Seperti:

 <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>

Inilah tampilan aplikasi kami saat ini:

Jadi kami telah melakukan pekerjaan berat dalam mengatur mode warna di UI Chakra. Jadi sekarang kita bisa menata aplikasi kita berdasarkan mode warna. Mari masuk ke default.vue dan gunakan prop slot mode warna yang disediakan oleh CColorModeProvider untuk menata aplikasi kita. Mari kita ubah template kita terlebih dahulu di 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>

Kami mendestruktur colorMode dari properti slot props yang disediakan oleh CColorModeProvider dan kemudian meneruskannya sebagai kunci dinamis ke objek mainStyle yang akan kami buat sebentar lagi. Idenya adalah menggunakan kumpulan gaya yang berbeda berdasarkan nilai colorMode . Saya juga menggunakan lebar dan tinggi dengan props steno — w dan h masing-masing untuk mengatur lebar dan tinggi komponen CBox kami. Mari kita definisikan objek mainStyles ini di bagian skrip kita:

 <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>

Penjelajah chakra-ui sekarang memiliki dukungan mode gelap!

Sekarang kita memiliki bilah navigasi dan telah berhasil mengatur dukungan mode gelap untuk aplikasi kita, mari fokus pada index.vue di direktori pages/ tempat daging aplikasi kita dapat ditemukan. Kami akan mulai dengan menambahkan komponen CBox seperti:

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

Kemudian kita akan menambahkan komponen CInput di dalamnya. Komponen halaman index.vue kami kemudian akan terlihat seperti ini:

 <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>

Berikut adalah tampilan aplikasi kita sekarang:

Anda dapat melihat dari screencast di atas bagaimana elemen CInput secara otomatis mengetahui saat berada dalam mode gelap dan menyesuaikannya meskipun kami tidak secara eksplisit mengaturnya. Selain itu, pengguna dapat menekan tombol tab untuk fokus pada komponen CInput .

Menambahkan Daftar Komponen

Jadi ide dari penjelajah Chakra-ui (seperti yang dinyatakan sebelumnya) adalah untuk menunjukkan kepada pengguna semua komponen yang tersedia di UI Chakra sehingga kami dapat memiliki daftar komponen tersebut serta tautan yang akan membawa pengguna ke dokumentasi dari komponen. Untuk melakukan ini, saya akan membuat folder bernama data di root direktori proyek kami kemudian membuat file bernama index.js . Di index.js , saya akan mengekspor array objek yang akan berisi nama-nama komponen. Berikut adalah bagaimana file akan terlihat seperti:

 // ./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' } ]

Agar implementasi kita selesai, saya akan mengimpor array di atas ke pages/index.vue dan mengulanginya untuk menampilkan semua komponen. Selain itu, kami akan memberi pengguna kemampuan untuk memfilter komponen menggunakan kotak pencarian. Berikut implementasi lengkapnya:

 // 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>

Dan sekarang aplikasi kita terlihat seperti ini:

Anda sekarang dapat melihat bagaimana mode gelap otomatis untuk daftar komponen serta bagaimana manajemen fokus ditambahkan untuk tautan (secara default) untuk membantu aksesibilitas.

Menguji UI Chakra

Terakhir, mari kita lihat bagaimana skor aplikasi kita dengan menjalankan tes aksesibilitas Lighthouse di atasnya. Ingat, tes ini didasarkan pada penilaian dampak pengguna Axe. Di bawah ini adalah screencast pengujian. Anda juga dapat menjalankan tes sendiri dengan mengikuti langkah-langkah ini.

Dari screencast di atas Anda dapat melihat bahwa aplikasi Chakra UI kami memiliki skor 85 pada tes aksesibilitas mercusuar.

Kesimpulan

Dalam artikel ini, kami telah menyentuh kebutuhan untuk membangun antarmuka yang dapat diakses dan kami juga telah melihat cara menggunakan UI Chakra untuk membangun aplikasi yang dapat diakses dari awal dengan membangun penjelajah (penjelajah Chakra-ui) untuk komponen UI Chakra.

  • Lihat aplikasi langsung di Netlify →
  • Tautan ke repo →