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

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

Adam Argyle

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

สาธิต

หากต้องการดูวิดีโอ โปรดดูโพสต์เวอร์ชัน YouTube ที่นี่

ภาพรวม

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

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

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

ชิ้นส่วน

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

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

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

ปุ่มดำเนินการหลัก

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

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

องค์ประกอบการสนับสนุน "ปุ่มป๊อปอัป" มีไว้เพื่อเปิดใช้งานและกล่าวถึงรายการปุ่มรอง โปรดทราบว่าไม่ใช่ <button> และโฟกัสไม่ได้ อย่างไรก็ตาม .gui-popup จะเป็นจุดยึดตําแหน่งสำหรับ .gui-popup และเป็นโฮสต์สำหรับ :focus-within ที่ใช้แสดงป๊อปอัป

การ์ดป๊อปอัป

นี่เป็นองค์ประกอบย่อยของการ์ดที่ลอยอยู่สำหรับจุดยึด .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%);
  }
}

หมายเหตุ: การฝัง CSS และคำค้นหาสื่อที่กำหนดเองใช้กับ PostCSS เพื่อให้ผู้เขียนใช้ฟีเจอร์ CSS "ในอนาคต" ได้

เลย์เอาต์และสี

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 ลงในปุ่มรองเพื่อให้ดูมีสไตล์และสนุกกับสีสัน ทั้งนี้คุณไม่จำเป็นต้องใส่ไอคอนทั้งในปุ่มหลักและปุ่มรอง

<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 2-3 รายการ และใช้พร็อพเพอร์ตี้ที่กำหนดเองที่ตรงกันสำหรับสถานะดังกล่าว

.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 เป็นทางเลือกที่ชาญฉลาดเพียงใด

การจัดรูปแบบปุ่มป๊อปอัป

4ch flexbox สำหรับจัดวางไอคอนไว้ตรงกลางและยึดรายการปุ่มป๊อปอัป ปุ่มนี้จะโปร่งใสจนกว่าจะมีการวางเมาส์เหนือหรือโต้ตอบกับปุ่ม และระบบจะยืดปุ่มให้เต็มพื้นที่

.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, position และ 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 เพิ่มเส้นขอบที่จุดเริ่มต้น ซึ่งอาจอยู่ทางด้านขวาหรือซ้าย ทั้งนี้ขึ้นอยู่กับทิศทางของสคริปต์

องค์ประกอบป๊อปอัปจะวางตำแหน่งด้วย left และ top และต้องปรับสำหรับโหมดการเขียน เช่น vertical-rl

JavaScript

JavaScript เกือบทั้งหมดต่อไปนี้มีไว้เพื่อเพิ่มการช่วยเหลือพิเศษ เราใช้ 2 ไลบรารีตัวช่วยเพื่อทําให้งานง่ายขึ้น BlingBlingJS ใช้สำหรับคำค้นหา DOM ที่กระชับและการตั้งค่าโปรแกรมรับฟังเหตุการณ์ที่ง่ายดาย ส่วน 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)
})

บทสรุป

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

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

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

• Codepen โดย Joost van der Schee