ภาพรวมพื้นฐานของวิธีสร้างคอมโพเนนต์ปุ่มแยกที่เข้าถึงได้
ในโพสต์นี้ ผมอยากจะแบ่งปันวิธีคิดเกี่ยวกับวิธีสร้างปุ่มแยก ลองใช้การสาธิต
หากต้องการดูวิดีโอ โปรดใช้โพสต์นี้ในเวอร์ชัน YouTube
ภาพรวม
ปุ่มแยกคือปุ่ม ที่ปิดบังปุ่มหลักและรายการปุ่มเพิ่มเติม มีประโยชน์ สำหรับการแสดงการดำเนินการทั่วไปขณะซ้อนตำแหน่งรอง ซึ่งใช้ไม่บ่อยนัก จนกว่าจะจำเป็น ปุ่มแยกอาจมีส่วนสำคัญในการช่วยให้การออกแบบที่วุ่นวาย รู้สึกว่าเรียบง่าย ปุ่มแยกขั้นสูงอาจจำการดำเนินการล่าสุดของผู้ใช้ได้ด้วย และเลื่อนขั้นเป็นตำแหน่งหลัก
ปุ่มแยกทั่วไปจะอยู่ในแอปพลิเคชันอีเมลของคุณ การดำเนินการหลัก คือส่ง แต่คุณอาจส่งในภายหลังหรือบันทึกร่างจดหมายแทนก็ได้ ดังนี้
พื้นที่การทำงานที่แชร์มีประโยชน์ดี เพราะผู้ใช้ไม่จำเป็นต้องมองไปรอบๆ โฆษณาเหล่านี้ โปรดทราบว่าการดำเนินการอีเมลที่สำคัญจะอยู่ในปุ่มแยก
ชิ้นส่วน
มาดูรายละเอียดเกี่ยวกับส่วนสำคัญของปุ่มแยกก่อนที่จะพูดถึงปุ่ม "แบ่ง" การจัดการเป็นกลุ่มโดยรวมและประสบการณ์ของผู้ใช้ในขั้นสุดท้าย ความสามารถเข้าถึงได้ง่ายของ VisBug เครื่องมือตรวจสอบที่ใช้ที่นี่เพื่อช่วยแสดงมุมมองมาโครของคอมโพเนนต์ ของ HTML, รูปแบบ และความสามารถในการเข้าถึงสำหรับส่วนหลักๆ แต่ละส่วน
คอนเทนเนอร์ปุ่มแยกระดับบนสุด
คอมโพเนนต์ระดับสูงสุดคือ Flexbox ในบรรทัดที่มีคลาสเป็น
gui-split-button
ที่มีการดำเนินการหลัก
และ .gui-popup-button
ปุ่มการทำงานหลัก
<button>
ที่มองเห็นและโฟกัสได้ในตอนแรกจะพอดีกับคอนเทนเนอร์ที่มี
รูปร่างมุมที่ตรงกัน 2 รูปสำหรับ
โฟกัส
วางเมาส์และ
การโต้ตอบที่ใช้งานอยู่กับ
ปรากฏภายใน .gui-split-button
ปุ่มเปิด/ปิดป๊อปอัป
"ปุ่มป๊อปอัป" เอลิเมนต์สนับสนุนมีไว้สำหรับการเปิดใช้งานและกล่าวถึงรายการ
ปุ่มรอง สังเกตว่าไม่ใช่ <button>
และไม่สามารถโฟกัสได้ อย่างไรก็ตาม
เป็นจุดยึดตำแหน่งสำหรับ .gui-popup
และโฮสต์สำหรับ :focus-within
ที่ใช้
เพื่อนำเสนอป๊อปอัป
การ์ดป๊อปอัป
นี่คือการ์ดแบบลอยตัวย่อยในแท็ก Anchor
.gui-popup-button
, กำหนดตำแหน่งสัมบูรณ์และ
การรวมรายการปุ่มอย่างมีความหมาย
การกระทํารอง
<button>
ที่โฟกัสได้ซึ่งมีขนาดแบบอักษรเล็กกว่าหลัก
ปุ่มดำเนินการจะมีไอคอนและป้าย
ให้เป็นปุ่มหลัก
คุณสมบัติที่กำหนดเอง
ตัวแปรต่อไปนี้ช่วยสร้างสีที่เข้ากันและเป็นจุดศูนย์กลางในการ แก้ไขค่าที่ใช้ทั่วทั้งคอมโพเนนต์
@custom-media --motionOK (prefers-reduced-motion: no-preference);
@custom-media --dark (prefers-color-scheme: dark);
@custom-media --light (prefers-color-scheme: light);
.gui-split-button {
--theme: hsl(220 75% 50%);
--theme-hover: hsl(220 75% 45%);
--theme-active: hsl(220 75% 40%);
--theme-text: hsl(220 75% 25%);
--theme-border: hsl(220 50% 75%);
--ontheme: hsl(220 90% 98%);
--popupbg: hsl(220 0% 100%);
--border: 1px solid var(--theme-border);
--radius: 6px;
--in-speed: 50ms;
--out-speed: 300ms;
@media (--dark) {
--theme: hsl(220 50% 60%);
--theme-hover: hsl(220 50% 65%);
--theme-active: hsl(220 75% 70%);
--theme-text: hsl(220 10% 85%);
--theme-border: hsl(220 20% 70%);
--ontheme: hsl(220 90% 5%);
--popupbg: hsl(220 10% 30%);
}
}
เลย์เอาต์และสี
Markup
องค์ประกอบจะเริ่มต้นด้วย <div>
ด้วยชื่อคลาสที่กำหนดเอง
<div class="gui-split-button"></div>
เพิ่มปุ่มหลักและองค์ประกอบ .gui-popup-button
<div class="gui-split-button">
<button>Send</button>
<span class="gui-popup-button" aria-haspopup="true" aria-expanded="false" title="Open for more actions"></span>
</div>
สังเกตแอตทริบิวต์ aria aria-haspopup
และ aria-expanded
สัญญาณเหล่านี้
จำเป็นสำหรับโปรแกรมอ่านหน้าจอที่ต้องตระหนักถึงความสามารถและสถานะการแยกส่วน
กับปุ่มได้มากขึ้น แอตทริบิวต์ title
มีประโยชน์สำหรับทุกคน
เพิ่มไอคอน <svg>
และองค์ประกอบคอนเทนเนอร์ .gui-popup
<div class="gui-split-button">
<button>Send</button>
<span class="gui-popup-button" aria-haspopup="true" aria-expanded="false" title="Open for more actions">
<svg aria-hidden="true" viewBox="0 0 20 20">
<path d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" />
</svg>
<ul class="gui-popup"></ul>
</span>
</div>
สำหรับตำแหน่งป๊อปอัปที่ไม่ซับซ้อน .gui-popup
คือระดับย่อยของปุ่มที่
จะขยายออก กลยุทธ์นี้มีเพียงหนึ่งเดียวคือ .gui-split-button
คอนเทนเนอร์ไม่สามารถใช้ overflow: hidden
เนื่องจากจะตัดป๊อปอัปออกจากการ
นำเสนอด้วยภาพ
<ul>
ที่เต็มไปด้วยเนื้อหา <li><button>
จะประกาศว่าเป็น "ปุ่ม"
รายการ" ให้กับโปรแกรมอ่านหน้าจอ ซึ่งก็คืออินเทอร์เฟซที่แสดงนั่นเอง
<div class="gui-split-button">
<button>Send</button>
<span class="gui-popup-button" aria-haspopup="true" aria-expanded="false" title="Open for more actions">
<svg aria-hidden="true" viewBox="0 0 20 20">
<path d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" />
</svg>
<ul class="gui-popup">
<li>
<button>Schedule for later</button>
</li>
<li>
<button>Delete</button>
</li>
<li>
<button>Save draft</button>
</li>
</ul>
</span>
</div>
เราได้เพิ่มไอคอนต่างๆ ไว้ในปุ่มรองเพื่อให้แต่งเติมสีสันและสนุกกับการใช้สี จาก https://heroicons.com ไอคอนไม่บังคับสำหรับทั้ง 2 ประเภท ปุ่มหลักและรอง
<div class="gui-split-button">
<button>Send</button>
<span class="gui-popup-button" aria-haspopup="true" aria-expanded="false" title="Open for more actions">
<svg aria-hidden="true" viewBox="0 0 20 20">
<path d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" />
</svg>
<ul class="gui-popup">
<li><button>
<svg aria-hidden="true" viewBox="0 0 24 24">
<path d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
</svg>
Schedule for later
</button></li>
<li><button>
<svg aria-hidden="true" viewBox="0 0 24 24">
<path d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
</svg>
Delete
</button></li>
<li><button>
<svg aria-hidden="true" viewBox="0 0 24 24">
<path d="M5 5a2 2 0 012-2h10a2 2 0 012 2v16l-7-3.5L5 21V5z" />
</svg>
Save draft
</button></li>
</ul>
</span>
</div>
รูปแบบ
เมื่อ HTML และเนื้อหาพร้อมใช้งาน สไตล์ก็จะพร้อมแสดงสีและเลย์เอาต์
การจัดรูปแบบคอนเทนเนอร์ปุ่มแยก
ประเภทการแสดงผล inline-flex
ทำงานได้ดีสำหรับคอมโพเนนต์การรวมนี้ เนื่องจาก
ควรพอดีกับแถวเดียวกับปุ่มแยก การทำงาน หรือองค์ประกอบอื่นๆ
.gui-split-button {
display: inline-flex;
border-radius: var(--radius);
background: var(--theme);
color: var(--ontheme);
fill: var(--ontheme);
touch-action: manipulation;
user-select: none;
-webkit-tap-highlight-color: transparent;
}
การจัดรูปแบบ <button>
ปุ่มสามารถอำพรางจำนวนโค้ดที่ต้องใช้ได้เป็นอย่างดี คุณอาจต้องทำดังนี้ เลิกทำหรือแทนที่รูปแบบเริ่มต้นของเบราว์เซอร์ แต่คุณต้องบังคับใช้บางรูปแบบด้วย การรับช่วงค่า เพิ่มสถานะการโต้ตอบ และปรับให้เข้ากับค่ากำหนดของผู้ใช้ ประเภทอินพุต ลักษณะปุ่มเพิ่มขึ้นอย่างรวดเร็ว
ปุ่มเหล่านี้แตกต่างจากปุ่มปกติเพราะมีพื้นหลังร่วมกัน มีองค์ประกอบหลัก โดยทั่วไปปุ่มจะเป็นเจ้าของสีพื้นหลังและข้อความ อย่างไรก็ตาม ให้แชร์ข้อมูลและใช้เฉพาะภูมิหลังของตนเองในการโต้ตอบเท่านั้น
.gui-split-button button {
cursor: pointer;
appearance: none;
background: none;
border: none;
display: inline-flex;
align-items: center;
gap: 1ch;
white-space: nowrap;
font-family: inherit;
font-size: inherit;
font-weight: 500;
padding-block: 1.25ch;
padding-inline: 2.5ch;
color: var(--ontheme);
outline-color: var(--theme);
outline-offset: -5px;
}
เพิ่มสถานะการโต้ตอบด้วย CSS จำนวนไม่มาก Pseudo-class และการใช้การจับคู่ คุณสมบัติที่กำหนดเองสำหรับรัฐ:
.gui-split-button button {
…
&:is(:hover, :focus-visible) {
background: var(--theme-hover);
color: var(--ontheme);
& > svg {
stroke: currentColor;
fill: none;
}
}
&:active {
background: var(--theme-active);
}
}
ปุ่มหลักต้องมีรูปแบบพิเศษ 2-3 รูปแบบเพื่อทำให้เอฟเฟกต์การออกแบบสมบูรณ์:
.gui-split-button > button {
border-end-start-radius: var(--radius);
border-start-start-radius: var(--radius);
& > svg {
fill: none;
stroke: var(--ontheme);
}
}
สุดท้าย ปุ่มและไอคอนธีมสว่างจะมีลูกเล่นบางส่วน เงา:
.gui-split-button {
@media (--light) {
& > button,
& button:is(:focus-visible, :hover) {
text-shadow: 0 1px 0 var(--theme-active);
}
& > .gui-popup-button > svg,
& button:is(:focus-visible, :hover) > svg {
filter: drop-shadow(0 1px 0 var(--theme-active));
}
}
}
ปุ่มที่ดีควรให้ความสำคัญกับการโต้ตอบแบบไมโครและรายละเอียดเล็กๆ น้อยๆ
หมายเหตุเกี่ยวกับ :focus-visible
สังเกตวิธีที่รูปแบบปุ่มใช้ :focus-visible
แทน :focus
:focus
จึงเป็นองค์ประกอบสำคัญในการสร้าง อินเทอร์เฟซผู้ใช้
ที่เข้าถึงได้ง่าย
หายนะ: เราไม่ฉลาดว่าผู้ใช้ต้องเห็นสิ่งนั้นหรือ
ไม่ จะมีผลกับการมุ่งเน้นใดๆ
วิดีโอด้านล่างพยายามที่จะตัดการโต้ตอบแบบไมโครนี้เพื่อแสดงให้เห็นว่า
:focus-visible
เป็นทางเลือกที่ชาญฉลาด
การจัดรูปแบบปุ่มป๊อปอัป
Flexbox 4ch
สำหรับการจัดไอคอนให้อยู่ตรงกลางและตรึงรายการปุ่มป๊อปอัป ชอบ
ปุ่มหลัก ปุ่มจะโปร่งใสจนกว่าจะวางเมาส์เหนือปุ่มหรือโต้ตอบ
และยืดให้เต็มพื้นที่
.gui-popup-button {
inline-size: 4ch;
cursor: pointer;
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
border-inline-start: var(--border);
border-start-end-radius: var(--radius);
border-end-end-radius: var(--radius);
}
กำหนดเลเยอร์เมื่อวางเมาส์เหนือ โฟกัส และสถานะทำงานอยู่ด้วย CSS
การฝังและ
ตัวเลือกฟังก์ชัน :is()
:
.gui-popup-button {
…
&:is(:hover,:focus-within) {
background: var(--theme-hover);
}
/* fixes iOS trying to be helpful */
&:focus {
outline: none;
}
&:active {
background: var(--theme-active);
}
}
รูปแบบเหล่านี้คือฮุกหลักในการแสดงและซ่อนป๊อปอัป เมื่อ
.gui-popup-button
มี focus
ในรายการย่อย ตั้งค่า opacity
ตำแหน่ง
และ pointer-events
ที่ไอคอนและป๊อปอัป
.gui-popup-button {
…
&:focus-within {
& > svg {
transition-duration: var(--in-speed);
transform: rotateZ(.5turn);
}
& > .gui-popup {
transition-duration: var(--in-speed);
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
}
}
เมื่อสไตล์เข้าและออกเสร็จสมบูรณ์แล้ว ชิ้นสุดท้ายก็คือแบบมีเงื่อนไข การเปลี่ยนจะเปลี่ยนรูปแบบตามค่ากำหนดการเคลื่อนไหวของผู้ใช้ ดังนี้
.gui-popup-button {
…
@media (--motionOK) {
& > svg {
transition: transform var(--out-speed) ease;
}
& > .gui-popup {
transform: translateY(5px);
transition:
opacity var(--out-speed) ease,
transform var(--out-speed) ease;
}
}
}
เมื่อให้ความสำคัญกับโค้ด คุณจะเห็นว่ายังมีการเปลี่ยนแปลงความทึบแสงสำหรับผู้ใช้ ที่ต้องการลดการเคลื่อนไหว
การจัดรูปแบบป๊อปอัป
องค์ประกอบ .gui-popup
คือรายการปุ่มการ์ดแบบลอยที่ใช้คุณสมบัติที่กำหนดเอง
และหน่วยสัมพัทธ์ให้มีขนาดเล็กลงเล็กน้อย
และจับคู่แบบอินเทอร์แอกทีฟกับหน่วยหลัก
และแบรนด์ที่ใช้สี สังเกตว่าไอคอนจะมีคอนทราสต์น้อยลง
บางกว่า และเงาจะมีสีน้ำเงินเข้ม เช่นเดียวกับปุ่ม
การสร้าง UI และ UX ที่มีประสิทธิภาพนั้น
เป็นผลจากรายละเอียดเล็กๆ น้อยๆ เหล่านี้ที่หลั่งไหลเข้ามา
.gui-popup {
--shadow: 220 70% 15%;
--shadow-strength: 1%;
opacity: 0;
pointer-events: none;
position: absolute;
bottom: 80%;
left: -1.5ch;
list-style-type: none;
background: var(--popupbg);
color: var(--theme-text);
padding-inline: 0;
padding-block: .5ch;
border-radius: var(--radius);
overflow: hidden;
display: flex;
flex-direction: column;
font-size: .9em;
transition: opacity var(--out-speed) ease;
box-shadow:
0 -2px 5px 0 hsl(var(--shadow) / calc(var(--shadow-strength) + 5%)),
0 1px 1px -2px hsl(var(--shadow) / calc(var(--shadow-strength) + 10%)),
0 2px 2px -2px hsl(var(--shadow) / calc(var(--shadow-strength) + 12%)),
0 5px 5px -2px hsl(var(--shadow) / calc(var(--shadow-strength) + 13%)),
0 9px 9px -2px hsl(var(--shadow) / calc(var(--shadow-strength) + 14%)),
0 16px 16px -2px hsl(var(--shadow) / calc(var(--shadow-strength) + 20%))
;
}
ไอคอนและปุ่มต่างๆ จะใช้สีของแบรนด์เพื่อจัดรูปแบบอย่างลงตัวในโทนสีมืดแต่ละแบบ การ์ดธีมสว่าง:
.gui-popup {
…
& svg {
fill: var(--popupbg);
stroke: var(--theme);
@media (prefers-color-scheme: dark) {
stroke: var(--theme-border);
}
}
& button {
color: var(--theme-text);
width: 100%;
}
}
ป๊อปอัปธีมมืดมีข้อความและเงาไอคอนที่เพิ่มเข้ามา และอื่นๆ อีกเล็กน้อย เงากล่องแบบเข้ม:
.gui-popup {
…
@media (--dark) {
--shadow-strength: 5%;
--shadow: 220 3% 2%;
& button:not(:focus-visible, :hover) {
text-shadow: 0 1px 0 var(--ontheme);
}
& button:not(:focus-visible, :hover) > svg {
filter: drop-shadow(0 1px 0 var(--ontheme));
}
}
}
รูปแบบไอคอน <svg>
ทั่วไป
ไอคอนทั้งหมดมีขนาดค่อนข้างใหญ่ตามปุ่ม font-size
ซึ่งใช้ภายใน
โดยใช้หน่วย ch
เป็น
inline-size
แต่ละไอคอนจะมีรูปแบบบางอย่างเพื่อช่วยให้เค้าโครงของไอคอนนุ่มนวลและ
อย่างราบรื่น
.gui-split-button svg {
inline-size: 2ch;
box-sizing: content-box;
stroke-linecap: round;
stroke-linejoin: round;
stroke-width: 2px;
}
รูปแบบจากขวาไปซ้าย
คุณสมบัติเชิงตรรกะจะทำงานที่ซับซ้อนทั้งหมด
รายการคุณสมบัติเชิงตรรกะที่ใช้มีดังนี้
- display: inline-flex
สร้างองค์ประกอบ Flex ในบรรทัด
- padding-block
และ padding-inline
เป็นคู่กัน แทนที่จะเป็น padding
ชวเลข ได้รับประโยชน์จากระยะห่างจากขอบด้านตรรกะ
- border-end-start-radius
และ
เพื่อนจะ
มุมกลมตามทิศทางของเอกสาร
- inline-size
แทนที่จะเป็น width
ทำให้มั่นใจได้ว่าขนาดไม่สัมพันธ์กับขนาดทางกายภาพ
- border-inline-start
จะเพิ่มเส้นขอบที่จุดเริ่มต้น ซึ่งอาจอยู่ด้านขวาหรือซ้าย ทั้งนี้ขึ้นอยู่กับทิศทางของสคริปต์
JavaScript
JavaScript เกือบทั้งหมดต่อไปนี้คือการปรับปรุงการเข้าถึง ของฉัน 2 รูป ไลบรารีตัวช่วยทำให้งานง่ายขึ้นเล็กน้อย ใช้ BlingBlingJS เพื่อกระชับ การค้นหา DOM และ Listener เหตุการณ์แบบง่ายๆ roving-ux ช่วยอำนวยความสะดวกให้การเข้าถึง การโต้ตอบกับแป้นพิมพ์และเกมแพดสำหรับป๊อปอัป
import $ from 'blingblingjs'
import {rovingIndex} from 'roving-ux'
const splitButtons = $('.gui-split-button')
const popupButtons = $('.gui-popup-button')
เมื่อนำเข้าไลบรารีข้างต้น และองค์ประกอบที่เลือกและบันทึกไว้แล้ว การอัปเกรดประสบการณ์อีกเพียงไม่กี่ฟังก์ชันก็ยังไม่เสร็จสมบูรณ์
ดัชนีเส้นทาง
เมื่อแป้นพิมพ์หรือโปรแกรมอ่านหน้าจอโฟกัส .gui-popup-button
เราอยากให้
ส่งต่อโฟกัสไปยังปุ่มแรก (หรือปุ่มที่โฟกัสล่าสุด) ใน
.gui-popup
ไลบรารีช่วยเราดำเนินการดังกล่าวด้วย element
และ target
พารามิเตอร์
popupButtons.forEach(element =>
rovingIndex({
element,
target: 'button',
}))
ตอนนี้องค์ประกอบจะส่งโฟกัสไปยังองค์ประกอบย่อย <button>
เป้าหมายและเปิดใช้
ใช้ปุ่มลูกศรมาตรฐานเพื่อเรียกดูตัวเลือก
กำลังสลับเป็น aria-expanded
แม้จะสังเกตได้อย่างชัดเจนว่าป๊อปอัปกำลังแสดงและซ่อนอยู่ แต่โปรแกรมอ่านหน้าจอต้องการมากกว่าตัวบ่งชี้ภาพ มีการใช้ JavaScript ที่นี่เพื่อส่งเสริมการโต้ตอบของ :focus-within
ที่ขับเคลื่อนโดย CSS โดยการสลับแอตทริบิวต์ที่เหมาะสมของโปรแกรมอ่านหน้าจอ
popupButtons.on('focusin', e => {
e.currentTarget.setAttribute('aria-expanded', true)
})
popupButtons.on('focusout', e => {
e.currentTarget.setAttribute('aria-expanded', false)
})
กำลังเปิดใช้คีย์ Escape
ระบบได้ส่งโฟกัสของผู้ใช้ไปยังกับดักโดยเจตนา ซึ่งหมายความว่าเราจำเป็นต้อง
ก็มีทางออกจากกันได้ วิธีที่ใช้กันมากที่สุดคืออนุญาตให้ใช้คีย์ Escape
ในการทำเช่นนี้ ให้คอยตรวจดูการกดแป้นพิมพ์บนปุ่มป๊อปอัป เนื่องจากเหตุการณ์บนแป้นพิมพ์เปิดอยู่
ผู้เผยแพร่โฆษณาย่อยจะปรากฏขึ้นเพื่อแสดงต่อผู้ปกครองรายนี้
popupButtons.on('keyup', e => {
if (e.code === 'Escape')
e.target.blur()
})
หากปุ่มป๊อปอัปพบว่ามีการกดปุ่ม Escape
อยู่ ระบบจะนำโฟกัสออกจากตัวเอง
กับ
blur()
การคลิกปุ่มแยก
สุดท้าย หากผู้ใช้คลิก แตะ หรือแป้นพิมพ์โต้ตอบกับปุ่มต่างๆ
ต้องดำเนินการตามความเหมาะสม ใช้ฟองอากาศของกิจกรรม
อีกครั้ง แต่ครั้งนี้อยู่ในคอนเทนเนอร์ .gui-split-button
เพื่อกดปุ่ม
คลิกจากป๊อปอัปย่อยหรือการดำเนินการหลัก
splitButtons.on('click', event => {
if (event.target.nodeName !== 'BUTTON') return
console.info(event.target.innerText)
})
บทสรุป
ตอนนี้คุณก็รู้แล้วว่าฉันทำท่านั้นได้อย่างไร คุณจะทำยังไงบ้างคะ‽ 🙂
มาเพิ่มความหลากหลายให้กับแนวทางของเราและเรียนรู้วิธีทั้งหมดในการสร้างเนื้อหาบนเว็บกัน สร้างลิงก์สาธิต ทวีตฉัน แล้วฉันจะเพิ่มให้เอง ที่ส่วนรีมิกซ์ของชุมชนด้านล่างนี้ได้เลย