เรียนรู้การใช้งานคลาสใน Buefy

ในการใช้งาน CSS Framework นั้นนอกจากจะมี UI Components ให้เราได้ใช้งานกันแล้วนั้นก็ยังมี Class ที่สามารถใช้งานได้อีกมากมาย ซึ่งวันนี้ผมจะมาพูดถึง Class ต่างๆ ของ Buefy ที่เราน่าจะได้ใช้งานกันครับ

Buefy นั้นมีทั้ง Class ที่ช่วยให้เราจัดการกับ layout และ css ที่ใช้ตกแต่ง เช่น ขนาดตัวอักษร, สีตัวอักษร, สีพื้นหลัง เป็นต้น เราจะมาเริ่มกันในส่วนของ Class ที่ใช้จัดการกับ Layout กันก่อนครับ

ในส่วนของ Layout นั้นจะเป็นเรื่องของการจัดตำแหน่งและแบ่งส่วนต่างๆ ของเว็บไซต์ในส่วนนี้เราจะมาทำความรู้จักกับ Class ที่ชื่อ columns กันครับ แต่ก่อนอื่นเรามาทำความเข้าในเรื่องของ Grid กันก่อนครับ

Grid คือการแบ่ง Layout ออกเป็น 12 คอลัมน์ ในแต่ละคอลัมน์นั้นจะมาสามารถกำหนดขนาดได้แต่ขนาดทั้งหมดรวมกันในหนึ่งแถว จะต้องไม่เกิน 12 คอลัมน์ Grid นั้นจะช่วยทำให้เราสามารถจัดตำแหน่งและทำ Responsive ได้ง่ายขึ้น ต่อไปเรามาดูตัวอย่างการใช้งานกันครับ

เราจะมาลองแบ่ง Grid ออกเป็น 3 ส่วนแต่ละส่วนมีขนาดเท่ากับ 4 คอลัมน์ อันดับแรกให้เราทำการเรียกใช้ Class columns ซึ่งเป็น Class ที่เราต้องสร้างมาครอบ column ทั้งหมดไว้ ต่อจากนั้นให้เราเรียกใช้ Class column พร้อมระบุ ขนาดโดยใช้ Class is-x ตัวอักษร x คือขนาดที่ต้องระบุ ตรงนี้ให้เราสร้างคอลัมน์มาทั้งหมด 3 คอลัมน์และระบุขนาดเป็น is-4 ทั้งหมด หากลองเขียนโค้ดแล้วได้ตามแบบภาพด้านล่างนี้ก็ถือว่าทำถูกต้องครับ

<template>
  <div class="container">
    <div class="columns">
       <div class="column is-4">
         <p class="bd-notification is-primary">
          <code>is-4</code>
         </p>
       </div>
       <div class="column is-4">
         <p class="bd-notification is-primary">
          <code>is-4</code>
         </p>
       </div>
      <div class="column is-4">
        <p class="bd-notification is-primary">
          <code>is-4</code>
        </p>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'HelloWorld'
}
</script>
<style scoped>
 .bd-notification.is-primary {
   background-color: #00d1b2;
   color: #fff;
 }
 .bd-notification {
   background-color: #f5f5f5;
   border-radius: 4px;
   color: #7a7a7a;
   font-weight: 600;
   padding: 1.25rem 0;
   position: relative;
   text-align: center;
 }
 .bd-notification code, .bd-notification pre {
   background-color: rgba(10,10,10,.2);
   border-radius: 4px;
   color: #fff;
 }
</style>

หากใครที่ต้องการศึกษาใช้งานเพิ่มเติมในส่วนนี้ก็เข้าไปศึกษาวิธีใช้ได้ที่เว็บไซต์นี้เลยครับ https://bulma.io/documentation/columns/

ต่อมาเราจะมาดูในส่วนของ Class ที่ใช้ในการจัดการ Css กันบ้างครับ ซึ่งในส่วนนี้ผมจะแบ่งเป็นหัวข้อในแต่ละส่วน เรามาเริ่มกันที่หัวข้อแรกกันเลยครับ

การกำหนดขนาดอักษร ของ Buefy นั้นจะมีด้วยกัน 7 ระดับ โดยเริ่มตั้งแต่ 1 จะเป็นขนาดใหญ่ที่สุด ไล่ไปจนถึง 7 จะเป็นขนาดเล็กที่สุด โดยให้เราเรียกใช้ Class is-size-x ตัวอักษร x ให้เราระบุขนาดที่เราต้องการลงไปครับ

<template>
  <div class="container">
    <p class="is-size-1">is-size-1</p>
    <p class="is-size-2">is-size-2</p>
    <p class="is-size-3">is-size-3</p>
    <p class="is-size-4">is-size-4</p>
    <p class="is-size-5">is-size-5</p>
    <p class="is-size-6">is-size-6</p>
    <p class="is-size-7">is-size-7</p>
  </div>
</template>

ใส่ความหนาให้ตัวอักษร ความหนานั้นจะมีทั้งหมด 5 ระดับ เราจะใช้ Class has-text-weight-x ในการใส่ความหนาของตัวอักษร ให้เราลองดูตามตัวอย่างด้านล่างเลยครับในส่วนนี้

<template>
  <div class="container">
    <p class="is-size-1 has-text-weight-bold">Bold</p>
    <p class="is-size-1 has-text-weight-semibold">Semibold</p>
    <p class="is-size-1 has-text-weight-medium">Medium</p>
    <p class="is-size-1 has-text-weight-normal">Normal</p>
    <p class="is-size-1 has-text-weight-light">Light</p>
  </div>
</template>

จัดตำแหน่งให้กับข้อความ เราจะใช้ Class has-text-x ซึ่งจะมีอยู่ทั้งหมด 4 รูปแบบดังนี้ left คือ การจัดข้อความให้ชิดด้านซ้าย, right คือ การจัดข้อความให้ชิดด้านขวา, centered คือ การจัดข้อความให้อยู่ตรงกลาง, justified คือ การจัดข้อความให้ชิดทั้งสองด้าน

<template>
  <div class="container">
   <p class="is-size-1 has-text-centered">Centered</p>
   <p class="is-size-1 has-text-left">Left</p>
   <p class="is-size-1 has-text-right">Right</p>
   <p class="is-size-1 has-text-justified">Justified</p>
  </div>
</template>

สุดท้ายนี้เรามาดู Class อื่นๆที่เราน่าจะได้ใช้งานกันบ้างครับ

is-marginless:ทำการลบ margin ออก
is-paddingless:ทำการลบ padding ออก
is-clipped:หากมีส่วนเกินออกมาจาก element ส่วนนั้นจะถูกซ้อน
is-radiusless:ทำการลบ radius ออกจาก element
is-shadowless:ทำการลบ shadow ออกจาก element
is-hidden:ทำการซ้อน element
is-relative:ใส่ position:relative ให้ element
is-flex:ทำให้ element อยู่ในรูปแบบ flex

Class ทั้งหมดนี้ที่ผมได้นำมาสอนในวันนี้ก็เป็นเพียงส่วนหนึ่งเท่านั้นครับยังมี Class อีกมากมายที่เราสามารถเรียกใช้ได้หากใครสนใจที่จะศึกษาเพิ่มเติมก็สามารถเข้าไปศึกษาได้ที่เว็บไซต์ของ bulma ได้เลยครับ

ปล. สำหรับคนที่ไม่รู้นะครับ Buefy นั้นเกิดจากการร่วมกันของ Bulma+Vue.js เพราะฉะนั้น Class ทุกอย่างที่ใช้กับ Buefy จะอยู่ใน Bulma ทั้งหมดครับ

สามารถศึกษา การเริ่มต้นใช้งาน Vue.js ด้วย Buefy จากบทความของเราได้เช่นกันครับ ได้ที่นี่