এই পৃষ্ঠাটি Cloud Translation API অনুবাদ করেছে।

একটি বিভক্ত বোতাম উপাদান নির্মাণ

কীভাবে একটি অ্যাক্সেসযোগ্য স্প্লিট-বোতাম উপাদান তৈরি করা যায় তার একটি ভিত্তিগত ওভারভিউ।

Adam Argyle

এই পোস্টে আমি একটি বিভক্ত বোতাম তৈরি করার উপায় সম্পর্কে চিন্তাভাবনা ভাগ করতে চাই। ডেমো চেষ্টা করুন .

আপনি যদি ভিডিও পছন্দ করেন তবে এখানে এই পোস্টটির একটি YouTube সংস্করণ রয়েছে:

ওভারভিউ

স্প্লিট বোতামগুলি এমন বোতাম যা একটি প্রাথমিক বোতাম এবং অতিরিক্ত বোতামগুলির একটি তালিকা গোপন করে। প্রয়োজন না হওয়া পর্যন্ত সেকেন্ডারি, কম ঘন ঘন ব্যবহৃত অ্যাকশন নেস্ট করার সময় একটি সাধারণ ক্রিয়া প্রকাশের জন্য এগুলি কার্যকর। একটি বিভক্ত বোতাম একটি ব্যস্ত ডিজাইনকে ন্যূনতম অনুভব করতে সহায়তা করার জন্য গুরুত্বপূর্ণ হতে পারে। একটি উন্নত বিভক্ত বোতাম এমনকি ব্যবহারকারীর শেষ ক্রিয়াটি মনে রাখতে পারে এবং এটিকে প্রাথমিক অবস্থানে উন্নীত করতে পারে।

আপনার ইমেল অ্যাপ্লিকেশনে একটি সাধারণ বিভক্ত বোতাম পাওয়া যাবে। প্রাথমিক ক্রিয়াটি প্রেরণ করা হয়, তবে সম্ভবত আপনি পরে পাঠাতে পারেন বা পরিবর্তে একটি খসড়া সংরক্ষণ করতে পারেন:

শেয়ার্ড অ্যাকশন এলাকাটি চমৎকার, যেহেতু ব্যবহারকারীর চারপাশে তাকাতে হবে না। তারা জানে যে প্রয়োজনীয় ইমেল ক্রিয়াগুলি বিভক্ত বোতামের মধ্যে রয়েছে।

অংশ

আসুন তাদের সামগ্রিক অর্কেস্ট্রেশন এবং চূড়ান্ত ব্যবহারকারীর অভিজ্ঞতা নিয়ে আলোচনা করার আগে একটি বিভক্ত বোতামের প্রয়োজনীয় অংশগুলি ভেঙে ফেলি। VisBug- এর অ্যাক্সেসিবিলিটি ইনস্পেক্ট টুলটি এখানে ব্যবহার করা হয়েছে কম্পোনেন্টের ম্যাক্রো ভিউ, HTML এর সার্ফেসিং দিক, স্টাইল এবং প্রতিটি প্রধান অংশের জন্য অ্যাক্সেসযোগ্যতা দেখাতে।

শীর্ষ স্তর বিভক্ত বোতাম ধারক

সর্বোচ্চ স্তরের কম্পোনেন্ট হল একটি ইনলাইন ফ্লেক্সবক্স, যার একটি ক্লাস gui-split-button , প্রাথমিক অ্যাকশন এবং .gui-popup-button রয়েছে।

প্রাথমিক অ্যাকশন বোতাম

প্রাথমিকভাবে দৃশ্যমান এবং ফোকাসযোগ্য <button> .gui-split-button মধ্যে ফোকাস , হোভার এবং সক্রিয় ইন্টারঅ্যাকশন দেখানোর জন্য দুটি মিলে যাওয়া কোণার আকারের সাথে পাত্রের মধ্যে ফিট করে।

পপআপ টগল বোতাম

"পপআপ বোতাম" সমর্থন উপাদানটি সক্রিয় করার জন্য এবং সেকেন্ডারি বোতামগুলির তালিকায় ইঙ্গিত করার জন্য। লক্ষ্য করুন এটি একটি <button> নয় এবং এটি ফোকাসযোগ্য নয়। যাইহোক, এটি হল .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%);
  }
}

লেআউট এবং রঙ

মার্কআপ

উপাদানটি একটি কাস্টম ক্লাস নাম সহ একটি <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> বিষয়বস্তুতে ভরা একটি <ul> স্ক্রিন রিডারদের কাছে নিজেকে একটি "বোতাম তালিকা" হিসাবে ঘোষণা করবে, যা সঠিকভাবে উপস্থাপন করা হচ্ছে ইন্টারফেস।

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

শৈলী

এইচটিএমএল এবং বিষয়বস্তুর জায়গায়, শৈলীগুলি রঙ এবং বিন্যাস প্রদানের জন্য প্রস্তুত।

স্প্লিট বোতাম ধারক স্টাইলিং

একটি 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;
}

কয়েকটি সিএসএস সিউডো-ক্লাসের সাথে মিথস্ক্রিয়া রাজ্য যোগ করুন এবং রাজ্যের জন্য মানানসই কাস্টম বৈশিষ্ট্য ব্যবহার করুন:

.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-এর পরিবর্তে :focus :focus-visible ব্যবহার করে। :focus একটি অ্যাক্সেসযোগ্য ইউজার ইন্টারফেস তৈরির জন্য একটি গুরুত্বপূর্ণ স্পর্শ কিন্তু এটির একটি পতন আছে: ব্যবহারকারীর এটি দেখতে হবে কি না তা সম্পর্কে এটি বুদ্ধিমান নয়, এটি যেকোনো ফোকাসের জন্য প্রযোজ্য হবে।

নীচের ভিডিওটি এই মাইক্রোইন্টারেকশনটি ভেঙে ফেলার চেষ্টা করে, দেখানোর জন্য কিভাবে :focus-visible একটি বুদ্ধিমান বিকল্প।

পপআপ বোতাম স্টাইল করা

একটি আইকন কেন্দ্রীভূত করার জন্য একটি 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 একটি ইনলাইন ফ্লেক্স উপাদান তৈরি করে। - padding-block এবং padding-inline একটি জোড়া হিসাবে, padding শর্টহ্যান্ডের পরিবর্তে, যৌক্তিক দিকগুলি প্যাড করার সুবিধা পান। - border-end-start-radius এবং বন্ধুরা নথির দিকনির্দেশের উপর ভিত্তি করে কোণে বৃত্তাকার হবে। - width পরিবর্তে inline-size নিশ্চিত করে যে আকারটি শারীরিক মাত্রার সাথে আবদ্ধ নয়। - border-inline-start শুরুতে একটি সীমানা যোগ করে, যা স্ক্রিপ্টের দিকনির্দেশের উপর নির্ভর করে ডান বা বামে হতে পারে।

পপআপ উপাদানটি left এবং top অবস্থান করে এবং vertical-rl মতো লেখার মোডগুলির জন্য সামঞ্জস্য করা প্রয়োজন।

জাভাস্ক্রিপ্ট

নিম্নলিখিত প্রায় সব জাভাস্ক্রিপ্ট অ্যাক্সেসিবিলিটি উন্নত করা হয়. আমার দুটি সহায়ক লাইব্রেরি কাজগুলিকে একটু সহজ করতে ব্যবহার করা হয়। 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 এখানে CSS চালিত :focus-within interaction-এর প্রশংসা করার জন্য ব্যবহার করা হয়েছে একটি স্ক্রীন রিডার উপযুক্ত বৈশিষ্ট্য টগল করে।

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 দ্বারা

Adam Argyle

ডেমো

আপনি যদি ভিডিও পছন্দ করেন তবে এখানে এই পোস্টটির একটি YouTube সংস্করণ রয়েছে:

ওভারভিউ

অংশ

শীর্ষ স্তর বিভক্ত বোতাম ধারক

প্রাথমিক অ্যাকশন বোতাম

পপআপ টগল বোতাম

পপআপ কার্ড

সেকেন্ডারি ক্রিয়া(গুলি)

কাস্টম বৈশিষ্ট্য

@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%);
  }
}

লেআউট এবং রঙ

মার্কআপ

উপাদানটি একটি কাস্টম ক্লাস নাম সহ একটি <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>

একটি <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>

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

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

শৈলী

স্প্লিট বোতাম ধারক স্টাইলিং

একটি 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;
}

.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`

পপআপ বোতাম স্টাইল করা

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

.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-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 {
  --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>` আইকন শৈলী

.gui-split-button svg {
  inline-size: 2ch;
  box-sizing: content-box;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2px;
}

ডান-থেকে-বামে লেআউট

জাভাস্ক্রিপ্ট

import $ from 'blingblingjs'
import {rovingIndex} from 'roving-ux'

const splitButtons = $('.gui-split-button')
const popupButtons = $('.gui-popup-button')

রোভিং সূচক

popupButtons.forEach(element =>
  rovingIndex({
    element,
    target: 'button',
  }))

টগল করা `aria-expanded`

popupButtons.on('focusin', e => {
  e.currentTarget.setAttribute('aria-expanded', true)
})

popupButtons.on('focusout', e => {
  e.currentTarget.setAttribute('aria-expanded', false)
})

`Escape` কী সক্রিয় করা হচ্ছে

popupButtons.on('keyup', e => {
  if (e.code === 'Escape')
    e.target.blur()
})

স্প্লিট বোতামে ক্লিক

splitButtons.on('click', event => {
  if (event.target.nodeName !== 'BUTTON') return
  console.info(event.target.innerText)
})

উপসংহার

এখন যেহেতু আপনি জানেন যে আমি কীভাবে এটি করেছি, আপনি কেমন হবে‽ 🙂৷

কমিউনিটি রিমিক্স

Codepen Joost van der Schee দ্বারা

একটি বিভক্ত বোতাম উপাদান নির্মাণ

ওভারভিউ

অংশ

শীর্ষ স্তর বিভক্ত বোতাম ধারক

প্রাথমিক অ্যাকশন বোতাম

পপআপ টগল বোতাম

পপআপ কার্ড

সেকেন্ডারি ক্রিয়া(গুলি)

কাস্টম বৈশিষ্ট্য

লেআউট এবং রঙ

মার্কআপ

শৈলী

স্প্লিট বোতাম ধারক স্টাইলিং

<বোতাম <button> স্টাইলিং

একটি নোট সম্পর্কে :focus-visible

পপআপ বোতাম স্টাইল করা

পপআপ স্টাইলিং

জেনেরিক <svg> আইকন শৈলী

ডান-থেকে-বামে লেআউট

জাভাস্ক্রিপ্ট

রোভিং সূচক

টগল করা aria-expanded

Escape কী সক্রিয় করা হচ্ছে

স্প্লিট বোতামে ক্লিক

উপসংহার

কমিউনিটি রিমিক্স

ওভারভিউ

অংশ

শীর্ষ স্তর বিভক্ত বোতাম ধারক

প্রাথমিক অ্যাকশন বোতাম

পপআপ টগল বোতাম

পপআপ কার্ড

সেকেন্ডারি ক্রিয়া(গুলি)

কাস্টম বৈশিষ্ট্য

লেআউট এবং রঙ

মার্কআপ

শৈলী

স্প্লিট বোতাম ধারক স্টাইলিং

<বোতাম <button> স্টাইলিং

একটি নোট সম্পর্কে :focus-visible

পপআপ বোতাম স্টাইল করা

পপআপ স্টাইলিং

জেনেরিক <svg> আইকন শৈলী

ডান-থেকে-বামে লেআউট

জাভাস্ক্রিপ্ট

রোভিং সূচক

টগল করা aria-expanded

Escape কী সক্রিয় করা হচ্ছে

স্প্লিট বোতামে ক্লিক

উপসংহার

কমিউনিটি রিমিক্স

<বোতাম `<button>` স্টাইলিং

একটি নোট সম্পর্কে `:focus-visible`

জেনেরিক `<svg>` আইকন শৈলী

টগল করা `aria-expanded`

`Escape` কী সক্রিয় করা হচ্ছে

<বোতাম `<button>` স্টাইলিং

একটি নোট সম্পর্কে `:focus-visible`

জেনেরিক `<svg>` আইকন শৈলী

টগল করা `aria-expanded`

`Escape` কী সক্রিয় করা হচ্ছে