ការបង្កើត Responsive Layout​ ជាមួយនឹង Vaadin

នៅក្នុងមេរៀនមុន យើងបានសិក្សារួចមកហើយនូវការប្រើប្រាស់  Cascading Style Sheet (CSS)ដែលត្រូវ បានប្រើសំរាប់រចនាគេហទំព័រ រួមជាមួយនឹង Vaadin ។ ចំនែកឯនៅក្នុងមេរៀននេះ TechFree នឹងលើកយក នូវការប្រើប្រាស់ CSS ក្នុងការបង្កើត Layout ដដែល ប៉ុន្តែ យើងបង្កើតវាឲ្យមានទម្រង់ទៅតាមរូបរាងនៃ ឧបករណ៏ រឺហៅថា Responsive Layout ។

១) ការសរសេរកូដ

– MyUI.java

MyUI.java គឺជាកន្លែងដែលយើងត្រូវបង្ហាញនូវអ្វីដែល យើងបានសរសេរ ។ សូមមើលកូដខាងក្រោម ៖

mytheme.scss

នៅក្នុង mytheme.scss គឺជាកន្លែងដែល យើងត្រូវសរសេរ style ដើម្បីបង្ហាញនូវ style ដែលយើងចង់បាន នៅលើ MyUI.java ។ សូមមើលកូដខាងក្រោម៖

២) លទ្ធផល

បន្ទាប់ពីសរសេរកូដខាងលើរួចរាល់ហើយមក យើងនឹងទទួលបាននូវលទ្ធផលដូចខាងក្រោម ៖

–  Full or Big Screen

Small Screen

ចែករំលែក​អត្ថបទនេះទៅកាន់៖

Exit mobile version