รู้จัก Utility API ของใหม่ใน Bootstrap 5

Nuttavut Thongjor

Bootstrap 4 มี Utility classes ที่ช่วยให้ตกแต่งอีลีเมนต์ได้ง่าย เช่น เราสามารถใส่คลาสเป็น .text-success เพื่อให้สีข้อความเป็นสีเขียว หรือใส่ .w-25 เพื่อแทนการใช้ CSS คือ width: 25% แต่นั่นก็ยังไม่ครอบคลุมถึงการใช้งานจิปาถะทั้งหมด เช่นถ้าอยากให้แท็ก div ของเราแสดงรูปมือผ่าน cursor: pointer ตรงจุดนี้ Bootstrap ก็ยังไม่มีคลาสที่เตรียมให้

การมาของ Tailwind ที่มาพร้อมกับ classes จำนวนมหาศาลให้เลือกตกแต่งอีลีเมนต์ได้ตามใจชอบ นั่นทำให้ Bootstrap ต้องขยับ! จากตัวอย่างของเราเพียงแค่ระบุคลาสเป็น .cursor-pointer ใน Tailwind ก็ไม่จำเป็นต้องมาสร้าง CSS แยกแล้ว

Utility API คืออะไร

โลกเปลี่ยน Bootstrap เปลี่ยน ตอนนี้ Bootstrap 5 ได้เตรียม API สำหรับสร้างคลาสในลักษณะคล้าย ๆ Tailwind ได้ตามชอบ ผ่านตัวแปรของ SCSS ที่ชื่อ $utilities หากเราต้องการสร้างคลาส .cursor-pointer เพื่อแทน CSS อย่าง cursor: pointer รวมถึงกำหนดคลาสสำหรับการใช้งาน cursor ประเภทต่าง ๆ ผ่าน Utility API รูปแบบการเขียนจะเป็นดังนี้

SASS
1$utilities: (
2 'cursor': (
3 property: cursor,
4 values: auto default pointer wait text move not-allowed,
5 ),
6);

Bootstrap จะทำการจับคู่ระหว่าง property กับแต่ละค่าของ values เพื่อทำการสร้างคลาสออกมาเป็นผลลัพธ์ดังนี้

CSS
1.cursor-auto {
2 cursor: auto;
3}
4
5.cursor-default {
6 cursor: default;
7}
8
9.cursor-pointer {
10 cursor: pointer;
11}
12
13.cursor-wait {
14 cursor: wait;
15}
16
17.cursor-move {
18 cursor: move;
19}
20
21.cursor-not-allowed {
22 cursor: not-allowed;
23}

การกำหนดค่าหลากหลายตามค่า key

หากเราต้องการสร้าง .font-weight-bold เพื่อแทน CSS คือ font-weight: 700 หรือสร้างคลาส .font-weight-thin เพื่อแทน CSS คือ font-weight: 200 จะต้องทำการจับคู่คำว่า bold เข้ากับ 700 และคำว่า thin จับคู่กับ 200 ตรงจุดนี้ Bootstrap ก็อนุญาตให้ระบุการจับคู่ผ่าน API เช่นกัน

SASS
1$utilities: (
2 'font-weight': (
3 property: font-weight,
4 values: (
5 hairline: 100,
6 thin: 200,
7 light: 300,
8 normal: 400,
9 medium: 500,
10 semibold: 600,
11 bold: 700,
12 extrabold: 800,
13 black: 900,
14 ),
15 ),
16);

ผลลัพธ์การทำงานได้ CSS เป็นผลลัพธ์ดังนี้

CSS
1.font-weight-hairline {
2 font-weight: 100;
3}
4
5.font-weight-thin {
6 font-weight: 200;
7}
8
9.font-weight-light {
10 font-weight: 300;
11}
12
13.font-weight-normal {
14 font-weight: 400;
15}
16
17.font-weight-medium {
18 font-weight: 500;
19}
20
21.font-weight-semibold {
22 font-weight: 600;
23}
24
25.font-weight-bold {
26 font-weight: 700;
27}
28
29.font-weight-extrabold {
30 font-weight: 800;
31}
32
33.font-weight-black {
34 font-weight: 900;
35}

ตั้งชื่อคลาสให้สั้นลงด้วย prefix

การกำหนดค่าให้กับ font-weight ตามตัวอย่างข้างต้นมีข้อเสียคือการกำหนดชื่อที่ยาวเกินไป เพียงแค่อยากได้ font-weight: 600 แต่ต้องใช้คลาสที่ชื่อยาวคือ font-weight-semibold อย่ากระนั้นเลยข้อชื่อที่สั้นหน่อยตัดคำว่า weight ทิ้งให้เหลือแค่ font-semibold ดีไหม

ในการใช้ $utilities เราสามารถกำหนดค่าของ class ได้ครับ หากใส่ class เป็น font ก็ไม่จำเป็นต้องใช้คำว่า font-weight เต็ม ๆ อีกต่อไป

SASS
1$utilities: (
2 'font-weight': (
3 property: font-weight,
4 class: 'font',
5 values: (
6 hairline: 100,
7 thin: 200,
8 light: 300,
9 normal: 400,
10 medium: 500,
11 semibold: 600,
12 bold: 700,
13 extrabold: 800,
14 black: 900,
15 ),
16 ),
17);

ผลลัพธ์การทำงานได้ CSS เป็นผลลัพธ์ดังนี้

CSS
1.font-hairline {
2 font-weight: 100;
3}
4
5.font-thin {
6 font-weight: 200;
7}
8
9.font-light {
10 font-weight: 300;
11}
12
13.font-normal {
14 font-weight: 400;
15}
16
17.font-medium {
18 font-weight: 500;
19}
20
21.font-semibold {
22 font-weight: 600;
23}
24
25.font-bold {
26 font-weight: 700;
27}
28
29.font-extrabold {
30 font-weight: 800;
31}
32
33.font-black {
34 font-weight: 900;
35}

Responsive กับการทำงานของ Utility API

หลายครั้งเราต้องการคลาสที่ทำงานได้แตกต่างกันตามแต่ขนาดหน้าจอ เราอาจต้องการให้หน้าจอขนาดเล็กแสดง font-wight: 400 ส่วนหน้าจอขนาดกลางขึ้นไปกำหนดให้แสดง font-weight: 700 แทน เหตุนี้เราจึงต้องการใส่ค่ากำหนดขนาดหน้าจอลงไปในคลาสที่เราสร้างด้วย เพื่อบอกว่าหน้าจอขนาดไหนสมควรแสดงผลอย่างไร

จากตัวอย่างข้างตน คลาสที่เหมาะสมควรเป็น .font-sm-normal เพื่อให้แสดงผล font-weight: 400 สำหรับหน้าจอขนาดเล็กขึ้นไป และคลาส .font-md-bold สำหรับแสดงผล font-weight: 700 ในหน้าจอขนาดกลางขึ้นไปนั่นเอง

ค่าจำเป็นสำหรับการระบุใน $utilities เพื่อให้เกิดการทำงานแบบ Responsive เช่นนี้คือ responsive: true

SASS
1$utilities: (
2 'font-weight': (
3 property: font-weight,
4 class: 'font',
5 responsive: true,
6 values: (
7 hairline: 100,
8 thin: 200,
9 light: 300,
10 normal: 400,
11 medium: 500,
12 semibold: 600,
13 bold: 700,
14 extrabold: 800,
15 black: 900,
16 ),
17 ),
18);

ผลลัพธ์จากการประมวลผลเป็นดังนี้ (แสดงเฉพาะค่า normal และ bold คลาสอื่นมีการทำงานแบบเดียวกัน)

CSS
1.font-normal {
2 font-weight: 400;
3}
4
5.font-bold {
6 font-weight: 700;
7}
8
9@media (min-width: 576px) {
10 .font-sm-normal {
11 font-weight: 400;
12 }
13
14 .font-sm-bold {
15 font-weight: 700;
16 }
17}
18
19@media (min-width: 768px) {
20 .font-md-normal {
21 font-weight: 400;
22 }
23
24 .font-md-bold {
25 font-weight: 700;
26 }
27}
28
29@media (min-width: 992px) {
30 .font-lg-normal {
31 font-weight: 400;
32 }
33
34 .font-lg-bold {
35 font-weight: 700;
36 }
37}
38
39@media (min-width: 1200px) {
40 .font-xl-normal {
41 font-weight: 400;
42 }
43
44 .font-xl-bold {
45 font-weight: 700;
46 }
47}

ตำแหน่งการเรียกใช้ $utilities

$utilities ถูกประกาศเป็น $utilities: () !default; ในซอร์จโค้ดของ Bootstrap หากเราต้องการใช้ $utilities จึงจำเป็นต้องประกาศไว้ก่อนการ import Bootstrap เช่น

SASS
1$utilities: (
2 'cursor': (
3 property: cursor,
4 values: auto default pointer wait text move not-allowed,
5 ),
6 'font-weight': (
7 property: font-weight,
8 class: 'font',
9 responsive: true,
10 values: (
11 hairline: 100,
12 thin: 200,
13 light: 300,
14 normal: 400,
15 medium: 500,
16 semibold: 600,
17 bold: 700,
18 extrabold: 800,
19 black: 900,
20 ),
21 ),
22);
23
24@import 'bootstrap/scss/bootstrap';

สรุป

Utility API เป็นทุกอย่างให้เธอแล้ว ตอนนี้อยากสร้างคลาสอะไรที่ Bootstrap ไม่ได้เตรียมไว้ให้ก็เป็นเรื่องง่ายแล้วครับ

สารบัญ

สารบัญ

  • Utility API คืออะไร
  • การกำหนดค่าหลากหลายตามค่า key
  • ตั้งชื่อคลาสให้สั้นลงด้วย prefix
  • Responsive กับการทำงานของ Utility API
  • ตำแหน่งการเรียกใช้ $utilities
  • สรุป
คอร์สของเรา

คอร์สออนไลน์ React Fundamentals

คอร์สของเรา

คอร์สออนไลน์ React Fundamentals