একটি ভাসমান অ্যাকশন বোতাম (এফএবি) উপাদান তৈরি করা

রঙ-অভিযোজিত, প্রতিক্রিয়াশীল, এবং অ্যাক্সেসযোগ্য FAB উপাদানগুলি কীভাবে তৈরি করা যায় তার একটি ভিত্তিগত ওভারভিউ।

Adam Argyle

এই পোস্টে আমি কীভাবে রঙ-অভিযোজিত, প্রতিক্রিয়াশীল, এবং অ্যাক্সেসযোগ্য FAB উপাদানগুলি তৈরি করতে পারি সে সম্পর্কে আমার চিন্তাভাবনা শেয়ার করতে চাই। ডেমো চেষ্টা করুন এবং উৎস দেখুন !

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

ওভারভিউ

FABs ডেস্কটপের চেয়ে মোবাইলে বেশি সাধারণ, কিন্তু তারা উভয় পরিস্থিতিতেই প্রচলিত। তারা প্রাথমিক ক্রিয়াগুলিকে সামনে রাখে, তাদের সুবিধাজনক এবং সর্বব্যাপী করে তোলে। এই ব্যবহারকারীর অভিজ্ঞতার শৈলীটি ম্যাটেরিয়াল UI দ্বারা বিখ্যাত হয়েছে এবং ব্যবহার এবং স্থান নির্ধারণের জন্য তাদের পরামর্শ এখানে পাওয়া যাবে।

উপাদান এবং শৈলী

এই নিয়ন্ত্রণগুলির জন্য এইচটিএমএল একটি ধারক উপাদান এবং এক বা একাধিক বোতামের সেট জড়িত। ধারকটি ভিউপোর্টের মধ্যে FAB গুলিকে অবস্থান করে এবং বোতামগুলির মধ্যে একটি ফাঁক পরিচালনা করে৷ বোতামগুলি ছোট বা ডিফল্ট হতে পারে, প্রাথমিক এবং মাধ্যমিক ক্রিয়াগুলির মধ্যে কিছু সুন্দর বৈচিত্র্য দেয়।

FAB ধারক

এই উপাদানটি একটি নিয়মিত <div> হতে পারে তবে আসুন আমাদের অদৃষ্ট ব্যবহারকারীদের একটি উপকার করি এবং এই ধারকটির উদ্দেশ্য এবং বিষয়বস্তু ব্যাখ্যা করার জন্য কিছু সহায়ক বৈশিষ্ট্যের সাথে এটি ট্যাগ করি৷

FABs মার্কআপ

শৈলীর জন্য CSS-এর জন্য একটি .fabs ক্লাস দিয়ে শুরু করুন, তারপর role="group" এবং aria-label যোগ করুন যাতে এটি শুধুমাত্র একটি সাধারণ ধারক নয়, এটির নামকরণ এবং উদ্দেশ্যমূলক।

<div class="fabs" role="group" aria-label="Floating action buttons">
  <!-- buttons will go here -->
</div>

FABs শৈলী

FAB-গুলিকে সুবিধাজনক করার জন্য তারা সর্বদা ভিউপোর্টের মধ্যে থাকে। এটি অবস্থান fixed জন্য একটি মহান ব্যবহার ক্ষেত্রে. এই ভিউপোর্ট পজিশনের মধ্যে আমি inset-block এবং inset-inline ব্যবহার করতে বেছে নিয়েছি যাতে পজিশনটি ব্যবহারকারীর ডকুমেন্ট মোডের প্রশংসা করবে, যেমন ডান-থেকে-বামে বা বাম থেকে ডানে। কাস্টম বৈশিষ্ট্যগুলি পুনরাবৃত্তি রোধ করতে এবং ভিউপোর্টের নীচে এবং পাশের প্রান্ত থেকে সমান দূরত্ব নিশ্চিত করতে ব্যবহার করা হয়:

.fabs {
  --_viewport-margin: 2.5vmin;

  position: fixed;
  z-index: var(--layer-1);

  inset-block: auto var(--_viewport-margin);
  inset-inline: auto var(--_viewport-margin);
}

এরপর আমি কন্টেইনার ডিসপ্লে flex দিই এবং এর লেআউটের দিক পরিবর্তন করে column-reverse । এটি বাচ্চাদের একে অপরের উপরে (কলাম) স্তুপ করে রাখে এবং তাদের ভিজ্যুয়াল ক্রমকেও বিপরীত করে। এটি প্রথম ফোকাসযোগ্য উপাদানটিকে শীর্ষের পরিবর্তে নীচের উপাদানে পরিণত করার প্রভাব রাখে, যেখানে ফোকাস সাধারণত HTML নথিতে যায়৷ ভিজ্যুয়াল ক্রমটি উল্টানো দৃষ্টিগ্রাহ্য ব্যবহারকারী এবং কীবোর্ড ব্যবহারকারীদের জন্য অভিজ্ঞতাকে একত্রিত করে, যেহেতু মিনি বোতামের চেয়ে বড় প্রাথমিক অ্যাকশনের স্টাইল দৃষ্টিভঙ্গি ব্যবহারকারীদের কাছে ইঙ্গিত দেয় যে এটি একটি প্রাথমিক ক্রিয়া, এবং কীবোর্ড ব্যবহারকারীরা এটিকে উত্সের প্রথম আইটেম হিসাবে ফোকাস করবে .

.fabs {
  …

  display: flex;
  flex-direction: column-reverse;
  place-items: center;
  gap: var(--_viewport-margin);
}

কেন্দ্রীকরণ place-items সাথে পরিচালনা করা হয়, এবং gap পাত্রে রাখা যেকোনো FAB বোতামগুলির মধ্যে স্থান যোগ করে।

FAB বোতাম

কিছু বোতাম স্টাইল করার সময় যেন তারা সবকিছুর উপরে ভাসছে।

ডিফল্ট FAB

স্টাইল করার প্রথম বোতামটি হল ডিফল্ট বোতাম। এটি সমস্ত FAB বোতামের ভিত্তি হিসাবে কাজ করবে। পরে আমরা একটি বৈকল্পিক তৈরি করব যা এই বেস শৈলীগুলির যতটা সম্ভব কম সংশোধন করার সময় একটি বিকল্প চেহারা অর্জন করবে।

FAB মার্কআপ

<button> উপাদানটি সঠিক পছন্দ। আমরা এটিকে ভিত্তি হিসাবে শুরু করব কারণ এটি দুর্দান্ত মাউস, স্পর্শ এবং কীবোর্ড ব্যবহারকারীর অভিজ্ঞতার সাথে আসে। এই মার্কআপের সবচেয়ে গুরুত্বপূর্ণ দিক হল aria-hidden="true" সহ স্ক্রীনরিডার ব্যবহারকারীদের থেকে আইকনটি লুকিয়ে রাখা এবং <button> মার্কআপেই প্রয়োজনীয় লেবেল টেক্সট যোগ করা। এই ক্ষেত্রে লেবেল যোগ করার সময় আমি একটি title যোগ করতেও পছন্দ করি যাতে মাউস ব্যবহারকারীরা আইকনটি কী যোগাযোগ করতে চায় সে সম্পর্কে তথ্য পেতে পারে।

<button data-icon="plus" class="fab" title="Add new action" aria-label="Add new action">
  <svg aria-hidden="true" width="24" height="24" viewBox="0 0 24 24">...</svg>
</button>

FAB শৈলী

প্রথমে আসুন বোতামটিকে একটি শক্তিশালী ছায়া সহ একটি প্যাডযুক্ত বৃত্তাকার বোতামে পরিণত করি, কারণ এইগুলি হল বোতামের প্রথম সংজ্ঞায়িত বৈশিষ্ট্য:

.fab {
  --_size: 2rem;

  padding: calc(var(--_size) / 2);
  border-radius: var(--radius-round);
  aspect-ratio: 1;
  box-shadow: var(--shadow-4);
}

এর পরে রঙ যোগ করা যাক. আমরা একটি কৌশল ব্যবহার করব যা আমরা আগে জিইউআই চ্যালেঞ্জে ব্যবহার করেছি। কাস্টম বৈশিষ্ট্যগুলির একটি পরিষ্কার নামযুক্ত সেট তৈরি করুন যা স্থিরভাবে হালকা এবং গাঢ় রং ধরে রাখে, তারপর একটি অভিযোজিত কাস্টম বৈশিষ্ট্য যা রঙের জন্য ব্যবহারকারীর সিস্টেম পছন্দের উপর নির্ভর করে আলো বা অন্ধকার ভেরিয়েবলে সেট করা হবে:

.fab {
  …

  /* light button and button hover */
  --_light-bg: var(--pink-6);
  --_light-bg-hover: var(--pink-7);

  /* dark button and button hover */
  --_dark-bg: var(--pink-4);
  --_dark-bg-hover: var(--pink-3);

  /* adaptive variables set to light by default */
  --_bg: var(--_light-bg);

  /* static icon colors set to the adaptive foreground variable */
  --_light-fg: white;
  --_dark-fg: black;
  --_fg: var(--_light-fg);

  /* use the adaptive properties on some styles */
  background: var(--_bg);
  color: var(--_fg);

  &:is(:active, :hover, :focus-visible) {
    --_bg: var(--_light-bg-hover);

    @media (prefers-color-scheme: dark) {
      --_bg: var(--_dark-bg-hover);
    }
  }

  /* if users prefers dark, set adaptive props to dark */
  @media (prefers-color-scheme: dark) {
    --_bg: var(--_dark-bg);
    --_fg: var(--_dark-fg);
  }
}

এরপর SVG আইকনগুলিকে স্থানের সাথে মানানসই করতে সাহায্য করার জন্য কিছু শৈলী যোগ করুন৷

.fab {
  …

  & > svg {
    inline-size: var(--_size);
    block-size: var(--_size);
    stroke-width: 3px;
  }
}

অবশেষে, বোতাম থেকে ট্যাপ হাইলাইটটি সরিয়ে দিন যেহেতু আমরা ইন্টারঅ্যাকশনের জন্য আমাদের নিজস্ব ভিজ্যুয়াল প্রতিক্রিয়া যোগ করেছি:

.fab {
  -webkit-tap-highlight-color: transparent;
}

মিনি FAB

এই বিভাগের লক্ষ্য হল FAB বোতামের জন্য একটি বৈকল্পিক তৈরি করা। ডিফল্ট অ্যাকশনের থেকে কিছু FAB-কে ছোট করে, ব্যবহারকারী যে ক্রিয়াটি প্রায়শই করে তা আমরা প্রচার করতে পারি।

মিনি FAB মার্কআপ

এইচটিএমএল একটি FAB এর মতই কিন্তু আমরা একটি ".mini" ক্লাস যোগ করি যাতে CSS কে ভেরিয়েন্টে একটি হুক দিতে পারে।

<button data-icon="heart" class="fab mini" title="Like action" aria-label="Like action">
  <svg aria-hidden="true" width="24" height="24" viewBox="0 0 24 24">...</svg>
</button>

মিনি FAB শৈলী

কাস্টম বৈশিষ্ট্য ব্যবহার করার জন্য ধন্যবাদ, শুধুমাত্র পরিবর্তন প্রয়োজন --_size ভেরিয়েবলের একটি সমন্বয়।

.fab.mini {
  --_size: 1.25rem;
}

অ্যাক্সেসযোগ্যতা

FAB-এর সাথে অ্যাক্সেসযোগ্যতার জন্য মনে রাখার সবচেয়ে গুরুত্বপূর্ণ অংশটি হল পৃষ্ঠার কীবোর্ড প্রবাহের মধ্যে বসানো। এই ডেমোতে শুধুমাত্র FABs আছে, কীবোর্ডের ক্রম এবং প্রবাহের ক্ষেত্রে প্রতিদ্বন্দ্বিতা করার কিছু নেই, যার মানে এটিতে একটি অর্থপূর্ণ কীবোর্ড প্রবাহ প্রদর্শন করার সুযোগ নেই। এমন একটি পরিস্থিতিতে যেখানে ফোকাস করার জন্য প্রতিযোগী উপাদান রয়েছে, আমি পরামর্শ দিচ্ছি যে সেই প্রবাহে কোন ব্যবহারকারীকে FAB বোতামের প্রবাহে প্রবেশ করা উচিত তা নিয়ে গভীরভাবে চিন্তা করা।

কীবোর্ড মিথস্ক্রিয়া প্রদর্শন

ব্যবহারকারী একবার FAB কন্টেইনারে ফোকাস করলে, আমরা ইতিমধ্যেই role="group" এবং aria-label="floating action buttons" যোগ করেছি যা স্ক্রিন রিডার ব্যবহারকারীদের তাদের ফোকাস করা বিষয়বস্তু সম্পর্কে অবহিত করে। কৌশলগতভাবে আমি ডিফল্ট FAB প্রথমে রেখেছি, যাতে ব্যবহারকারীরা প্রথমে প্রাথমিক অ্যাকশন খুঁজে পায়। আমি তারপর flex-direction: column-reverse; সহজে অ্যাক্সেসের জন্য ব্যবহারকারীদের আঙুলের কাছাকাছি, নীচের দিকে প্রাথমিক বোতামটি দৃশ্যত অর্ডার করতে। এটি একটি চমৎকার জয় কারণ ডিফল্ট বোতামটি দৃশ্যত বিশিষ্ট এবং কীবোর্ড ব্যবহারকারীদের জন্য প্রথম, তাদের খুব একই রকম অভিজ্ঞতা দেয়।

সবশেষে, স্ক্রীন রিডার ব্যবহারকারীদের থেকে আপনার আইকনগুলি লুকিয়ে রাখতে ভুলবেন না এবং নিশ্চিত করুন যে আপনি তাদের বোতামের জন্য একটি লেবেল প্রদান করেছেন যাতে এটি একটি রহস্য নয়৷ এটি HTML-এ ইতিমধ্যেই <svg> এ aria-hidden="true" এবং <button> s-এ aria-label="Some action" দিয়ে করা হয়েছে।

অ্যানিমেশন

ব্যবহারকারীর অভিজ্ঞতা বাড়ানোর জন্য বিভিন্ন ধরনের অ্যানিমেশন যোগ করা যেতে পারে। অন্যান্য GUI চ্যালেঞ্জের মতো, আমরা একটি কম গতির অভিজ্ঞতা এবং একটি সম্পূর্ণ গতির অভিজ্ঞতার অভিপ্রায় ধরে রাখতে কয়েকটি কাস্টম বৈশিষ্ট্য সেট আপ করব। ডিফল্টরূপে শৈলী অনুমান করবে ব্যবহারকারী কম গতি চায়, তারপর prefers-reduced-motion মিডিয়া ক্যোয়ারী ব্যবহার করে রূপান্তর মানটিকে সম্পূর্ণ গতিতে অদলবদল করে।

কাস্টম বৈশিষ্ট্য সহ একটি হ্রাস গতির কৌশল

নিম্নলিখিত CSS-এ তিনটি কাস্টম বৈশিষ্ট্য তৈরি করা হয়েছে: --_motion-reduced , --_motion-ok , এবং --_transition । প্রথম দুটিতে ব্যবহারকারীর পছন্দ অনুযায়ী উপযুক্ত ট্রানজিশন রাখা হয় এবং শেষ পরিবর্তনশীল --_transition যথাক্রমে --_motion-reduced বা --_motion-ok সেট করা হবে।

.fab {
  /* box-shadow and background-color can safely be transitioned for reduced motion users */
  --_motion-reduced:
    box-shadow .2s var(--ease-3),
    background-color .3s var(--ease-3);

  /* add transform and outline-offset for users ok with motion */
  --_motion-ok:
    var(--_motion-reduced),
    transform .2s var(--ease-3),
    outline-offset 145ms var(--ease-2);

  /* default the transition styles to reduced motion */
  --_transition: var(--_motion-reduced);

  /* set the transition to our adaptive transition custom property*/
  transition: var(--_transition);

  /* if motion is ok, update the adaptive prop to the respective transition prop */
  @media (prefers-reduced-motion: no-preference) {
    --_transition: var(--_motion-ok);
  }
}

উপরিউক্তের জায়গায়, box-shadow , background-color , transform এবং outline-offset পরিবর্তনগুলি পরিবর্তন করা যেতে পারে, যা ব্যবহারকারীকে চমৎকার UI প্রতিক্রিয়া দেয় যে তাদের মিথস্ক্রিয়া গৃহীত হয়েছে।

এরপরে, translateY কিছুটা সামঞ্জস্য করে :active অবস্থাতে একটু বেশি ফ্লেয়ার যোগ করুন, এটি বোতামটিকে একটি সুন্দর চাপা প্রভাব দেয়:

.fab {
  …

  &:active {
    @media (prefers-reduced-motion: no-preference) {
      transform: translateY(2%);
    }
  }
}

তারপর সবশেষে, বোতামে SVG আইকনে যেকোনো পরিবর্তন পরিবর্তন করুন:

.fab {
  …

  &[data-icon="plus"]:hover > svg {
    transform: rotateZ(.25turn);
  }

  & > svg {
    @media (prefers-reduced-motion: no-preference) {
      will-change: transform;
      transition: transform .5s var(--ease-squish-3);
    }
  }
}

দ্রষ্টব্য: ইজিং ফাংশন --ease-squish-3 ওপেন প্রপসের অংশ এবং ঘূর্ণনের উপর ইলাস্টিক বাউন্সি প্রভাবের জন্য দায়ী। ওপেন প্রপস ডকুমেন্ট ওয়েবসাইটে এর মতো আরও প্রপস খুঁজুন।

উপসংহার

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

আসুন আমাদের পদ্ধতির বৈচিত্র্য আনুন এবং ওয়েবে তৈরি করার সমস্ত উপায় শিখি।

একটি ডেমো তৈরি করুন, আমাকে লিঙ্কগুলি টুইট করুন এবং আমি নীচের সম্প্রদায়ের রিমিক্স বিভাগে এটি যুক্ত করব!

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

এখানে এখনো দেখার কিছু নেই।

সম্পদ

• Github-এ সোর্স কোড