CSS ขั้นสูงใน Dash

การสร้างแดชบอร์ดด้วย Dash และ Plotly

Alex Scriven

Data Scientist

CSS สำหรับการเว้นระยะระหว่าง element

"Box Model" มองแต่ละ element ใน HTML เป็นกล่องที่มีหลายชั้น:

เนื้อหาของ object (กำหนดด้วย height และ width)
Padding (อยู่ภายนอกเนื้อหา)
Border (อยู่ระหว่าง padding และ margin)
Margin (อยู่ภายนอก border ทำหน้าที่แยก element ออกจากกัน)

ภาพสี่เหลี่ยมซ้อนกันสี่ชั้นจากเล็กไปใหญ่ ชั้นในสุดมีคำว่า content ถัดออกมาคือ padding จากนั้นเป็น border และชั้นนอกสุดคือ margin

การเพิ่ม border

อาร์กิวเมนต์ CSS border รับค่าสามส่วน:

'border':'A B C'
- A = ความหนาในหน่วยพิกเซล
- B = สไตล์ (เช่น solid หรือ dotted)
- C = สี (เช่น red)

การเพิ่ม border ให้แอป

dcc.Graph(figure=ecom_bar, 
 style={'width':'500px', 
        'height':'450px',
        'border':'5px dotted red'}
         )

ภาพที่มีหัวข้อ "Top Sales Categories" ด้านล่างมีแผนภูมิแท่งแนวนอนอยู่ภายในกรอบเส้นประสีแดง แกน y แสดงหมวดหมู่การซื้อรายการย่อย แกน x แสดงจำนวนคำสั่งซื้อทั้งหมด ด้านล่างกรอบมีรายการระบุสองหมวดหมู่ยอดขายอันดับต้น

CSS spacing

การกำหนดระยะห่างของ HTML element:

ระบุตัวเลขสี่ค่าสำหรับแต่ละ property (Padding และ Margin)
- ตามเข็มนาฬิกา ได้แก่ บน ขวา ล่าง ซ้าย
หรือระบุค่าเดียว (จะใช้กับทุกด้าน)
หรือระบุสองค่า สำหรับบน-ล่าง และซ้าย-ขวา

เช่น 'padding':'10px 5px 5px 15px'

ภาพ box model แบบสี่เหลี่ยมซ้อนกัน โดยชั้น padding มีตัวเลขกำกับแต่ละด้าน เรียงตามเข็มนาฬิกาจากด้านบน ได้แก่ 10, 5, 5, 10

การเพิ่ม padding ใน Dash

ไม่มี padding:

ภาพเดิมที่แสดงแนวคิด border มีหัวข้อ "Top Sales Categories" ด้านล่างมีแผนภูมิแท่งแนวนอนอยู่ภายในกรอบเส้นประสีแดง แกน y แสดงหมวดหมู่การซื้อรายการย่อย แกน x แสดงจำนวนคำสั่งซื้อทั้งหมด ด้านล่างกรอบมีรายการระบุสองหมวดหมู่ยอดขายอันดับต้น

เพิ่ม 'padding':'100px':

ภาพเดียวกับด้านซ้าย แต่กรอบถูกขยายออกทุกด้าน มีลูกศรชี้บอกทิศทางการขยาย กราฟมีพื้นที่รอบข้างมากขึ้น และหัวข้อรวมถึงข้อความด้านล่างถูกเลื่อนออกไป

การเพิ่ม margin ใน Dash

ไม่มี margin:

เพิ่ม margin: 100px auto:

ภาพคล้ายกับด้านขวาของสไลด์ก่อนหน้า มีลูกศรชี้บอกพื้นที่ที่เพิ่มขึ้น แต่พื้นที่นี้อยู่ภายนอกกรอบ หัวข้อและข้อความด้านล่างถูกเลื่อนออก แต่ระยะห่างระหว่างกรอบกับกราฟยังคงเดิม

การจัดกึ่งกลางด้วย auto margin

ใช้: 'margin':'100px'

ภาพเดิมที่แสดงแนวคิด border แต่ซูมออก กราฟอยู่ชิดซ้าย ไม่ได้อยู่ใต้หัวข้อและเหนือข้อความด้านล่าง มีหัวข้อ "Top Sales Categories" ด้านล่างมีแผนภูมิแท่งแนวนอนอยู่ภายในกรอบเส้นประสีแดง แกน y แสดงหมวดหมู่การซื้อรายการย่อย แกน x แสดงจำนวนคำสั่งซื้อทั้งหมด ด้านล่างกรอบมีรายการระบุสองหมวดหมู่ยอดขายอันดับต้น

ใช้: 'margin':'100px auto'

ภาพเดิมที่แสดงแนวคิด border กราฟจัดอยู่กึ่งกลางใต้หัวข้อและเหนือข้อความด้านล่าง มีหัวข้อ "Top Sales Categories" ด้านล่างมีแผนภูมิแท่งแนวนอนอยู่ภายในกรอบเส้นประสีแดง แกน y แสดงหมวดหมู่การซื้อรายการย่อย แกน x แสดงจำนวนคำสั่งซื้อทั้งหมด ด้านล่างกรอบมีรายการระบุสองหมวดหมู่ยอดขายอันดับต้น

CSS สำหรับ layout

element ไม่จัดแนวตรงกัน? HTML element มีสองประเภท คือ "inline" และ "block"

Inline แสดงผลในบรรทัดเดียวกัน
- ไม่มี height, width หรือ box properties
- ตัวอย่าง: <strong>, <a>, <img>
Block เรียงซ้อนกันในแนวตั้ง เพราะมีการขึ้นบรรทัดใหม่
- วางเคียงกันในแนวนอนไม่ได้
- ตัวอย่าง: <h1>, <div>
นอกจากนี้ยังมี inline-block
- กำหนด height/width/box properties ได้
- วางเคียงกันในแนวนอนได้

Inline-block elements

<div style='width:50px;height:50px;
     background-color:blue'></div>
<div style='width:50px;height:50px;
     background-color:red
     ;display:inline-block'></div>
<div style='width:50px;height:50px;
     background-color:green;
     display:inline-block'></div>

ภาพกล่องสีขนาดเล็กสามกล่องจัดเรียงเป็นรูปตัว L กล่องสีน้ำเงินอยู่ด้านบน ด้านล่างเป็นกล่องสีแดง และกล่องสีเขียวอยู่ทางขวาของกล่องสีแดง

มาฝึกกันเถอะ!

การสร้างแดชบอร์ดด้วย Dash และ Plotly