แต่ง Stepper Component จาก Material UI ให้ตรงใจ Designer 💄

Pitchapa Pawong

Published in

THE EXISTING COMPANY

3 min readFeb 26, 2020

ถ้าให้พูดถึง UI Framework ที่เป็นที่นิยมสำหรับคนเขียน React หลาย ๆ คนคงนึกถึง Material UI ใช่มั้ยล่ะคะ?

Material-UI: A popular React UI framework

React components for faster and easier web development. Build your own design system, or start with Material Design.

material-ui.com

เจ้าของบล็อกนี้ก็เช่นเดียวกัน เนื่องจากเจ้าตัว Material UI เนี่ยมันทั้งนำไปใช้งานได้ง่าย (ซึ่งเหมาะสำหรับมือใหม่มากๆ และตัวเราเองก็ยังมือใหม่อยู่นะ 😆) มี Components ที่หลากหลาย อีกทั้งยังมีตัวอย่างโค้ดสำหรับการนำไปใช้ได้หลายรูปแบบอีกด้วย

แต่พอมองไปที่หน้า Design จากเหล่า UI Designer แล้วนั้น… ในหัวคือคิดก่อนเลยว่า

“ นุต้องเริ่มสไตล์จากตรงไหนง่ะ 😬 ”

ซึ่งจริง ๆ แล้วหลาย ๆ Component ของตัว Material UI มันไม่ได้สไตล์ยากเลยค่ะ แต่ก็จะมีบางอันที่เราใช้เวลาในการปรับแต่งสไตล์ของมันนานมาก ๆ ก็เลยอยากสรุปวิธีที่ใช้ในการแก้ปัญหานี้นั่นเอง

และหนึ่งใน Component ที่ปรับแต่งค่อนข้างยากก็คื้อออออ … “ Stepper ” จย้าาา

เตรียมพร้อม!

ติดตั้งตัว Material UI ลงในตัวโปรเจ็กต์ของตัวเองก่อนเลย โดยใช้คำสั่งนี้

npm install @material-ui/core

เข้าไปส่องการใช้งาน Component นั้น ๆ ในเว็บ เพราะฉะนั้นเราจะเข้าไปที่หน้าของ Stepper

Stepper React component - Material-UI

Steppers convey progress through numbered steps. It provides a wizard-like workflow. Steppers display progress through…

material-ui.com

จากนั้น ลอง Copy โค้ดตัวอย่าง มาใส่โปรเจกต์เราดู อย่างเราเลือกโค้ดนี้มาลองใส่

จะได้ผลลัพธ์ออกมาเป็นแบบนี้…

เทียบกับตัวงานดีไซน์ที่ได้มาจาก UI Designer ว่าต้องแก้อะไรบ้าง

Design ตัว Stepper เมื่อ Step ที่ 2 เป็น Active Step

จากค่า default ที่ตัว Material ให้มา เราต้องเปลี่ยนสไตล์ของมันดังนี้

สีและขอบของแต่ละ Step
สีของตัว Connector ที่อยู่ระหว่างแต่ละ Step
ฟ้อนต์ด้านในแต่ละ Step
ขนาดต่าง ๆ
เปลี่ยนจากแนวนอนให้เป็นแนวตั้ง
นำคำอธิบายแต่ละ Step ออก
เมื่อเปลี่ยน Step แล้ว Step ตัวที่ผ่านไปแล้วจะยังเป็นตัวเลขเหมือนเดิม ไม่เปลี่ยนเป็นเครื่องหมายถูก

(แต่จะทำตัวอย่างแค่ 3 Steps น้า)

ทำความเข้าใจว่าแต่ละ Component ย่อย ๆ ที่จะประกอบกันเป็น Stepper ได้สมบูรณ์นั้นมีอะไรบ้าง รวมถึงอ่าน API Documentation ของแต่ละอัน จะได้รู้ว่าจะต้องปรับแต่งตรงไหนบ้างนั่นเอง เย่ 😆

<Stepper> : Component นอกสุดที่ใช้ครอบ Component ย่อย ๆ อื่นที่รวมกันขึ้นมาเป็น  Stepper หนึ่งอันที่รวมทุก ๆ Step<Step> : Component ของแต่ละ Step โดยมี StepLabel เป็น Component ย่อย<StepLabel> : Component ย่อยสุดของแต่ละ Step และเรามักจะปรับแต่งสไตล์ที่ Component นี้<StepConnector> : Component ของตัว Connector ที่เชื่อมแต่ละ Step

มาแต่งกัน!

เคล็ดไม่ลับ -> ลองเข้าไปแก้ไข Code ใน Codesandbox ที่เป็นตัวอย่าง Customized Stepper Component ก่อนก็ได้นะ (https://codesandbox.io/s/cz6q9)

เปลี่ยนให้ Stepper จากแนวนอนเป็นแนวตั้ง โดยใส่ orientation=“vertical” เข้าไปที่แท็กของ Stepper

<Stepper alternativeLabel activeStep={activeStep} orientation=”vertical” > 
...
</Stepper>

2. นำคำอธิบายแต่ละ Step ออก โดยลบ alternativeLabel ออกจากแท็ก Stepper และลบค่า {label} ในแท็ก StepLabel ออก

<Stepper activeStep={activeStep} orientation=”vertical”>              {steps.map(label => (          
  <Step key={label}>            
    <StepLabel></StepLabel>          
  </Step>))}      
</Stepper>

3. สร้างสไตล์ของแต่ละ Step เพื่อเปลี่ยนสี ฟ้อนต์ ขอบ และขนาดแต่ละ Step

4. ทำให้แต่ละ Step เมื่อ Step นั้น Completed ไปแล้วยังคงเป็นเลข 1,2, … เหมือนเดิม โดยไม่เปลี่ยนเป็นเครื่องหมายถูก

ไหนขอดูผลลัพธ์หน่อยซิ….

จะเห็นว่า ตัว Step ที่มีการเพิ่มขอบขึ้นมาทำให้ไม่อยู่กึ่งกลาง แต่เราต้องไปแก้ตรงไหนนะ … ตามหลักทั่วไปก็ต้องลอง Inspect มาดูไงล่ะ

พอ Inspect มาดูก็เห็นว่าเราควรเพิ่มสไตล์ที่ .MuiStepper-vertical และ .MuiStepLabel-iconContainer ให้มีค่าเป็น

.MuiStepper-vertical {  
   flex-direction: column;
   align-items: center;
}.MuiStepLabel-iconContainer {
   padding: 0;
}

ซึ่งตัวช่วยที่ดีที่สุดในการเข้าไปแก้ไขค่าที่นึกได้ก็คือ Styled Components นั่นเอง

styled-components

To download styled-components run: That's all you need to do, you are now ready to use it in your app! (yep, no build…

styled-components.com

ติดตั้งด้วยนะจ๊ะ 👇🏼

npm install --save styled-components

5. ปรับให้ Step อยู่กึ่งกลางด้วย Styled Components แล้วชื่อตัวแปรที่ผ่านการสไตล์แล้วไปใส่แทนชื่อแท็กเดิม

ดูผลลัพธ์อีกครั้ง…

อยู่ตรงกลางแล้วววววว… ไปแต่ง Step Connector ต่อเลย!

6. นำ StepConnector มาแต่งโดย

active : สไตล์ของตัว connector เมื่อ Step ถัดจาก Step นั้นเป็น Active Step
completed : สไตล์ของตัว connector ของ Step ที่ผ่านมาก่อน Active Step
line : สไตล์ของตัว connector ที่ยังไม่เป็น Active Step

และเมื่อกำหนดค่า css แล้วให้นำตัวแปรนั้นมาใส่ในแท็ก Stepper ดังนี้ 👇🏼

ดูผลลัพธ์หน่อยยย

ตัว Connector ยังไม่อยู่ตรงกึ่งกลางเลย 🤔 ก็ใช้ Styled Components ช่วยเหมือนเดิมสิ!

7. แก้ไขสไตล์ตัว .MuiStepConnector ให้ padding และ margin เป็น 0 แล้วนำตัวแปรไปใส่ใน Stepper (เหมือนเดิมเลยเนอะ 😅)

ทีนี้มาดูผลลัพธ์อันน่าพึงพอใจของเรากันนนนนนน !

สรุปสักหน่อย

ทั้งหมดนี้เป็นวิธีที่เราใช้เพื่อจัดการกับตัว Stepper Component ในความเข้าใจที่มีจากการอ่านโค้ดตัวอย่างและลองปรับนู่นนี่มาพอสมควร ก็หวังว่าจะเป็นสักหนึ่งแนวทางที่เป็นประโยชน์ไม่มากก็น้อยนะคะ 😄