การสร้างคอมโพเนนต์ที่มีปุ่มแยก

ภาพรวมพื้นฐานของวิธีสร้างองค์ประกอบแบบปุ่มแยกที่เข้าถึงได้ง่าย

ในโพสต์นี้ ฉันต้องการแบ่งปันวิธีคิดวิธีสร้างปุ่มแยก ลองใช้เดโม

หากชอบวิดีโอ นี่คือโพสต์นี้เวอร์ชัน YouTube

ภาพรวม

ปุ่มแยกคือปุ่มที่ปกปิดปุ่มหลักและรายการปุ่มเพิ่มเติม วิธีนี้เหมาะสำหรับการแสดงการดำเนินการทั่วไปขณะซ้อนการดำเนินการรองที่ไม่ค่อยได้ใช้จนกว่าจะจำเป็น ปุ่มแยกอาจมีความสำคัญอย่างมากต่อการทำให้การออกแบบที่ยุ่งเหยิงมีความเรียบง่าย ปุ่มแยกขั้นสูงอาจจดจำการกระทำล่าสุดของผู้ใช้ และเลื่อนไปยังตำแหน่งหลักได้ด้วย

คุณจะพบปุ่มแยกที่ใช้กันทั่วไปในแอปพลิเคชันอีเมลของคุณ การดำเนินการหลักคือการส่ง แต่คุณอาจส่งทีหลังหรือบันทึกฉบับร่างแทนก็ได้ ดังนี้

พื้นที่การทำงานที่ใช้ร่วมกันก็เป็นตัวเลือกที่ดี เนื่องจากผู้ใช้ไม่จำเป็นต้องมองไปรอบๆ ผู้ใช้รู้ว่าการดำเนินการสำคัญในอีเมลจะอยู่ในปุ่มแยก

ชิ้นส่วน

เรามาดูรายละเอียดของส่วนสำคัญของปุ่มแยกก่อนที่จะพูดถึง การจัดการเป็นกลุ่มโดยรวมและประสบการณ์ของผู้ใช้ขั้นสุดท้ายกัน เครื่องมือตรวจสอบการช่วยเหลือพิเศษของ VisBug นำมาใช้ที่นี่เพื่อช่วยแสดงมุมมองมาโครของคอมโพเนนต์ โดยแสดงแง่มุมต่างๆ ของ HTML, รูปแบบ และการเข้าถึงในส่วนสำคัญแต่ละส่วน

คอนเทนเนอร์ปุ่มแยกระดับบนสุด

คอมโพเนนต์ระดับสูงสุดคือ Flexbox ในบรรทัดที่มีคลาสเป็น gui-split-button ที่มีการดำเนินการหลักและ .gui-popup-button

ปุ่มการทำงานหลัก

<button> ที่มองเห็นและโฟกัสได้ในตอนแรกจะพอดีกับคอนเทนเนอร์ โดยมีรูปมุม 2 แบบที่ตรงกันสำหรับโฟกัส hover และการโต้ตอบที่ใช้งานอยู่เพื่อให้ปรากฏภายใน .gui-split-button

ปุ่มเปิด/ปิดป๊อปอัป

องค์ประกอบการรองรับ "ปุ่มป๊อปอัป" มีไว้สำหรับเปิดใช้งานและกล่าวถึงรายการปุ่มรอง สังเกตว่าไม่ใช่ <button> และไม่สามารถโฟกัสได้ แต่นี่เป็น Anchor กำหนดตำแหน่งสำหรับ .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-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 เพื่อตกแต่งและสนุกไปกับสี โดยไอคอนจะใส่หรือไม่ก็ได้สำหรับทั้งปุ่มหลักและปุ่มรอง

<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;
}

เพิ่มสถานะการโต้ตอบด้วยคลาส Pseudo ใน CSS และใช้พร็อพเพอร์ตี้ที่กำหนดเองสำหรับรัฐดังนี้

.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);
  }
}

ปุ่มหลักต้องใช้รูปแบบพิเศษบางอย่างเพื่อให้เอฟเฟกต์การออกแบบเสร็จสมบูรณ์

.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 Nesting และตัวเลือกฟังก์ชันของ :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')

ด้วยการนำเข้าไลบรารีข้างต้นและองค์ประกอบที่เลือกและบันทึกไว้ในตัวแปรแล้ว การอัปเกรดประสบการณ์ดังกล่าวก็เป็นเรื่องง่าย อีกเพียงไม่กี่ฟังก์ชันก็จะเสร็จสมบูรณ์

ดัชนี Roving

เมื่อแป้นพิมพ์หรือโปรแกรมอ่านหน้าจอโฟกัส .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)
})

บทสรุป

ตอนนี้คุณก็รู้แล้วว่าตัวเองทำยังไง คุณจะทำอะไรบ้าง‽ 🙂

มาลองเปลี่ยนแนวทางของเราและเรียนรู้วิธีทั้งหมดเพื่อสร้างเว็บกันเถอะ สร้างเดโม ลิงก์ทวีตฉัน แล้วฉันจะเพิ่มลงในส่วนรีมิกซ์ของชุมชนด้านล่าง

รีมิกซ์ของชุมชน

• Codepen โดย Joost van der Schee