តើ Lily ជាអ្វី?

ខ្លឹមសារសង្ខេប

Lily ជាកាតាឡុកនៃ សមាសភាគវេបដែលនីមួយៗត្រូវបានអនុវត្តជាប្រាំបីរូបភាពគ្មានក្បាល (HTML, Svelte, React, Vue, Angular, Blazor, Nunjucks និង Web Components) បូកជាមួយកម្មវិធីគំរូពេញលេញមួយសំណុំដែលបង្ហាញពីរបៀបដាក់រចនាប័ទ្មឱ្យពួកវា។

កំណែគ្មានក្បាលមកជាមួយ CSS សូន្យ។ ពួកវាផ្តល់ជូនអ្នកនូវ HTML ន័យវិទ្យា តួនាទី និងស្ថានភាព ARIA ការគាំទ្រក្តារចុច និងលក្ខណៈសម្បត្តិដែលអនុគ្រោះដល់ i18n។ អ្នកនាំមកនូវការរចនាដែលមើលឃើញ។

គោលការណ៍រចនា

អាចចូលប្រើបាន

សមាសភាគនីមួយៗចាប់ផ្តើមពី HTML ន័យវិទ្យា។ ARIA ត្រូវបានបន្ថែមតែនៅកន្លែងដែល HTML តែឯងមិនអាចបង្ហាញលំនាំបាន។ សមាសភាគមានគោលដៅ WCAG 2.2 AAA — ពណ៌ គម្លាត ការផ្តោត និងការរុករកដោយក្តារចុច ត្រូវបានគិតទាំងអស់។

អាចផ្សំបាន

Lily ចូលចិត្តសមាសភាគតូចៗដែលមានគោលបំណងតែមួយ ដែលភ្ជាប់គ្នាបានយ៉ាងងាយ។ លំនាំផ្សំលេចឡើងម្តងហើយម្តងទៀត៖

• Nav → List → ListItem — សម្រាប់ breadcrumbs បញ្ជីមាតិកា ម៉ឺនុយអាកាឌីយ៉ុង ម៉ឺនុយដើមឈើ និងការបែងចែកទំព័រ
• Form → Field → Input — សម្រាប់ប្លង់ទម្រង់ណាមួយដែលមានស្លាក ព័ត៌មានណែនាំ និងកំហុស
• Table → Head/Body/Foot → Row → Data — សម្រាប់តារាង ប្រតិទិន តារាង Gantt និងក្តារ kanban
• Bar → BarButton — សម្រាប់របារឧបករណ៍ របារផ្ទាំង របារកិច្ចការ របារសកម្មភាព និងរបារម៉ឺនុយ
• Picker → PickerButton — សម្រាប់ឧបករណ៍ជ្រើសពណ៌ ឧបករណ៍ជ្រើសការវាយតម្លៃ ឧបករណ៍ជ្រើសស្បែក

អាចធ្វើអន្តរជាតិកម្មបាន

គ្មានអក្សរតែមួយដែលអ្នកប្រើមើលឃើញត្រូវបានសរសេរជាប់ក្នុងកូដទេ។ ស្លាក អត្ថបទជំនួស សារកំហុស អត្ថបទប៊ូតុង — ទាំងអស់ជាប៉ារ៉ាម៉ែត្រ។ ដាក់ប្រព័ន្ធបកប្រែផ្ទាល់ខ្លួនរបស់អ្នកចូល ហើយ Lily នឹងនិយាយភាសាណាមួយដែលអ្នកនិយាយ។

គ្មានក្បាល

សមាសភាគគ្មានក្បាលមិនមាន CSSគ្មាន <style> ប្លុក និងគ្មានតូខឹនរចនាដែលអ្នកមិនបានជ្រើសរើសទេ។ ពួកវាបង្ហាញឈ្មោះថ្នាក់ kebab-case មួយនៅលើធាតុឫសនីមួយៗ ដើម្បីឱ្យអ្នកអាចកំណត់គោលដៅបានតាមចិត្ត — CSS ន័យវិទ្យា, Tailwind, CSS-in-JS តាមការជ្រើសរើសរបស់អ្នក។

ឧទាហរណ៍ពេញលេញ

កម្មវិធីគំរូបង្ហាញពីរបៀបដាក់រចនាប័ទ្មសមាសភាគសម្រាប់ការប្រើប្រាស់ពិតប្រាកដ — តូខឹនរចនាអ្វីដែលត្រូវកំណត់ បំរែបំរួលអ្វីដែលត្រូវបន្ថែម របៀបផ្សំទំព័រ។ ពួកវាជាកម្មវិធី SvelteKit, Next.js, Nuxt, Blazor និង Eleventy ពេញលេញ មិនមែនគ្រាន់តែជាកន្លែងសាកល្បងទេ។

ការបំផុសគំនិត

Lily ទាញយកលំនាំ និងភាសាពីសំណុំប្រព័ន្ធរចនាដ៏ទូលំទូលាយដែលបានជ្រើសរើសដោយចេតនា៖

• NHS UK Design System
• GOV.UK Design System
• U.S. Web Design System (USWDS)
• ONSdigital design system
• Design System AU (រដ្ឋាភិបាលអូស្ត្រាលី)
• Mozilla Protocol
• Adobe Spectrum
• Ant Design
• Wonderflow Wanda
• DaisyUI
• shadcn/ui
• សមាសភាគក្រាហ្វិករបស់ Reuters

អាជ្ញាប័ណ្ណ

Lily មានអាជ្ញាប័ណ្ណច្រើនក្រោម BSD, MIT, Apache-2.0, GPL-2.0 ឬ GPL-3.0។ ជ្រើសរើសអាជ្ញាប័ណ្ណណាដែលសមនឹងគម្រោងរបស់អ្នក។ ប្រសិនបើគ្មានអ្វីសមទេ សូមទាក់ទងមក។

ទំនាក់ទំនង

ប្រធានគម្រោង៖ Joel Parker Henderson — joel@joelparkerhenderson.com.

រកឃើញកំហុស មានគំនិត ចង់ចូលរួមចំណែកសមាសភាគ? បើក issue ឬ pull request នៅលើ GitHub.