ເບິ່ງ Lily ໃນແອັບຈິງ

ເຈັດໂຄງການຕົວຢ່າງທີ່ເຮັດວຽກໄດ້ສະແດງວິທີເອົາອົງປະກອບແບບບໍ່ມີຫົວ, ເພີ່ມຮູບແບບ, ແລະສົ່ງມອບເວັບໄຊຈິງ. ເລືອກເຟຣມເວີກທີ່ທ່ານໃຊ້.

ແອັບສາທິດພ້ອມ CSS ເຕັມ ແລະການຈັດເສັ້ນທາງ

HTML JavaScript

ໜ້າ HTML ທຳມະດາ, JavaScript ລ້ວນ, ບໍ່ມີເຄື່ອງມືສ້າງ. ໃສ່ໄດ້ກັບໂຮສຄົງທີ່ໃດໆ — ສົມບູນແບບສຳລັບເວັບໄຊນ້ອຍໆ ແລະການປັບປຸງແບບຄ່ອຍເປັນຄ່ອຍໄປ.

→ ເບິ່ງທີ່ GitHub

Svelte + SvelteKit

ແອັບ SvelteKit 3 ທີ່ໃຊ້ Svelte 5 runes. ເສັ້ນທາງອົງປະກອບ, ການຈັດເສັ້ນທາງຕາມໄຟລ໌, ແລະ storybook ທີ່ມີຮູບແບບຂອງທຸກອົງປະກອບ.

→ ເບິ່ງທີ່ GitHub

React + Next.js

ແອັບ Next.js 16 ທີ່ສະແດງແຕ່ລະອົງປະກອບໃນບໍລິບົດ, ພ້ອມ TypeScript ຕະຫຼອດ ແລະໜ້າສາທິດສຳລັບຮູບແບບປະສົມ.

→ ເບິ່ງທີ່ GitHub

Vue + Nuxt.js

ແອັບ Nuxt 4. <script setup> ແລະ Composition API ໃນທຸກເສັ້ນທາງສາທິດ.

→ ເບິ່ງທີ່ GitHub

Angular + Analog

ແອັບ Angular 22 + Analog.js. ການຈັດເສັ້ນທາງຕາມໄຟລ໌, signals, ການກວດພົບການປ່ຽນແປງແບບບໍ່ມີ zone, ແລະ SSG prerendering ເຕັມຮູບແບບ.

→ ເບິ່ງທີ່ GitHub

Blazor Web

ແອັບ Blazor Web ພ້ອມອົງປະກອບ Razor. ເປັນມິດກັບເຊີບເວີ ແລະ WebAssembly, ພ້ອມ baseline .NET 10.

→ ເບິ່ງທີ່ GitHub

Nunjucks + Eleventy

ເວັບໄຊ Eleventy ທີ່ໃຊ້ມາກຣໂຄ Nunjucks. ເໝາະສຳລັບເວັບໄຊຄົງທີ່ທີ່ມີເນື້ອຫາໜັກທີ່ຍັງຕ້ອງການລະບົບອົງປະກອບຈິງ.

→ ເບິ່ງທີ່ GitHub

ທຸກແອັບຕົວຢ່າງມີຮູບຮ່າງດຽວກັນ

ເພື່ອໃຫ້ການໂດດລະຫວ່າງເຟຣມເວີກຮູ້ສຶກຄຸ້ນເຄີຍ, ທຸກແອັບຕົວຢ່າງໃຫ້:

ເສັ້ນທາງຕ້ອນຮັບທີ່ / ທີ່ແນະນຳໂຄງການ.
ດັດຊະນີອົງປະກອບທີ່ /components ທີ່ລາຍການທຸກອົງປະກອບ.
ໜ້າສາທິດຕໍ່ອົງປະກອບທີ່ /components/<component>.
CSS ຈິງ — ບໍ່ແມ່ນໂທເຄັນການອອກແບບແບບນາມມະທຳ — ເພື່ອໃຫ້ທ່ານລອກແບບຮູບແບບໂດຍກົງ.
ການນຳທາງດ້ວຍແປ້ນພິມ ແລະການຈັດການຈຸດສຸມທີ່ເຮັດວຽກທັນທີ.

ຕ້ອງການເບິ່ງວ່າອົງປະກອບໜຶ່ງຖືກໃສ່ຮູບແບບແນວໃດ?

ເປີດແອັບຕົວຢ່າງທີ່ກ່ຽວຂ້ອງ, ໄປທີ່ /components/<name>, ແລະສຳເນົາ markup ແລະ CSS ເຂົ້າໂຄງການຂອງທ່ານເອງ. ແອັບຕົວຢ່າງໃຊ້ CSS ທຳມະດາ (ຫຼືເກືອບທຳມະດາ) ຢ່າງຕັ້ງໃຈ ເພື່ອໃຫ້ທ່ານປັບໃຫ້ເຂົ້າກັບລະບົບໃດກໍໄດ້ທີ່ທ່ານມັກ.

ຢາກໄດ້ແບບບໍ່ມີຫົວແທນບໍ?

ຈັບຄູ່ແອັບຕົວຢ່າງໃດໆກັບແພັກເກັດ ແບບບໍ່ມີຫົວ ທີ່ກົງກັນ — ພວກມັນເຜີຍແຜ່ອົງປະກອບດຽວກັນໂດຍບໍ່ມີ CSS ໃດໆ, ພ້ອມສຳລັບໂທເຄັນການອອກແບບຂອງທ່ານເອງ.

ທ່ອງແຄັດຕາລັອກ → ອ່ານຄູ່ມືຕັ້ງຄ່າ