নির্বাচিত আইটেমগুলি গ্রুপিং করা একটি ডিজাইন পছন্দ যা প্রায়শই ব্যবহারকারীদের দ্রুত উপলব্ধি করতে সহায়তা করে যে কোন আইটেমগুলি নির্বাচিত এবং নির্বাচিত হয়। উদাহরণস্বরূপ, চেক-অফ আইটেমগুলি করণীয় তালিকায় তালিকাটি সরিয়ে দেয়, ব্যবহারকারীদের যখন তারা তালিকার পুনর্বিবেচনা করে তখন অবশিষ্ট কাজগুলিতে ফোকাস করতে দেয়।
আমরা একটি ইউআই ডিজাইন করব যা অনুরূপ গ্রুপিং প্যাটার্ন অনুসরণ করে। নির্বাচিত আইটেমগুলির তালিকাটি কেবল পুনরায় সাজানোর পরিবর্তে, আমরা সেগুলি সিএসএস গ্রিড ব্যবহার করে অনুভূমিকভাবেও রাখব। এটি নির্বাচিত এবং নির্বাচিত আইটেমগুলির মধ্যে আরও পার্থক্য করে।
আমরা এর জন্য দুটি পদ্ধতির অন্বেষণ করব। একটি ব্যবহার জড়িত auto-fillকোনটি উপযুক্ত যখন নির্বাচিত আইটেমগুলি গ্রিড ধারকটির সীমানা ছাড়িয়ে যায় না, একটি স্থিতিশীল বিন্যাস নিশ্চিত করে। বিপরীতে, সিএসএস গ্রিডের span কীওয়ার্ড আরও একটি পদ্ধতির সরবরাহ করে যা বৃহত্তর নমনীয়তা সরবরাহ করে।
উভয় পদ্ধতির জন্য এইচটিএমএল একই:
<ul>
<li>
<label>
<input type="checkbox" />
<div class=icon>🍱</div>
<div class=text>Bento</div>
</label>
</li>
<li>
<label>
<input type="checkbox" />
<div class=icon>🍡</div>
<div class=text>Dangos</div>
</label>
</li>
<!-- more list items -->
</ul>মার্কআপটি একটি আনর্ডার্ড তালিকা (সমন্বিত (<ul>)। তবে আমাদের অগত্যা ব্যবহার করতে হবে না <ul> এবং <li> আইটেমগুলির বিন্যাস যেহেতু উপাদানগুলি সিএসএস গ্রিড বৈশিষ্ট্য দ্বারা নির্ধারিত হবে। নোট করুন যে আমি একটি অন্তর্নিহিত ব্যবহার করছি <label> চারপাশে <input> উপাদানগুলি বেশিরভাগ জিনিসগুলির চারপাশে অতিরিক্ত মোড়কের প্রয়োজন এড়ানোর উপায় হিসাবে, তবে এটি সুস্পষ্ট লেবেলগুলি সাধারণত সহায়ক প্রযুক্তি দ্বারা আরও ভাল সমর্থিত হয়।
পদ্ধতি 1: ব্যবহার auto-fill
ul {
width: 250px;
display: grid;
gap: 14px 10px;
grid-template-columns: repeat(auto-fill, 40px);
justify-content: center;
/* etc. */
}দ্য <ul> উপাদান, যা আইটেম রয়েছে, একটি আছে display: grid স্টাইলের নিয়ম, এটিকে গ্রিড পাত্রে পরিণত করা। এটির ফাঁকও রয়েছে 14px এবং 10px এর গ্রিড সারি এবং কলামগুলির মধ্যে। গ্রিড সামগ্রীটি ন্যায়সঙ্গত (ইনলাইন প্রান্তিককরণ) থেকে ন্যায়সঙ্গত center।
দ্য grid-template-columns সম্পত্তি গ্রিডে কীভাবে কলাম ট্র্যাকগুলি আকার দেওয়া হবে তা নির্দিষ্ট করে। প্রাথমিকভাবে, সমস্ত আইটেম একক কলামে থাকবে। যাইহোক, যখন আইটেমগুলি নির্বাচন করা হয়, সেগুলি প্রথম সারিতে স্থানান্তরিত হবে এবং প্রতিটি নির্বাচিত আইটেম তার নিজস্ব কলামে থাকবে। এই ঘোষণার মূল অংশটি হ’ল auto-fill মান।
দ্য auto-fill মান যুক্ত করা হয় যেখানে পুনরাবৃত্তি গণনা হয় repeat() ফাংশন। এটি প্রতিটি কলামের ট্র্যাক আকারের সাথে প্রদত্ত আকারে কলামগুলি পুনরাবৃত্তি নিশ্চিত করে repeat() (40px আমাদের উদাহরণে), এটি গ্রিড ধারকটির সীমানার ভিতরে ফিট করবে।
আপাতত, আসুন নিশ্চিত করুন যে তালিকা আইটেমগুলি একটি একক কলামে অবস্থিত:
li {
width: inherit;
grid-column: 1;
/* Equivalent to:
grid-column-start: 1;
grid-column-end: auto; */
/* etc. */
}যখন কোনও আইটেম চেক করা হয়, তখনই যখন একটি <li> উপাদান :has() ক :checked চেকবক্স, আমরা এটি নির্বাচন করছি। এবং যখন আমরা করি, <li> দেওয়া হয় a grid-area এটি এটিকে প্রথম সারিতে রাখে এবং এর কলামটি প্রথম সারিতে গ্রিডের মধ্যে অটো-স্থাপন করা হবে এর মান অনুযায়ী grid-template-columns গ্রিড ধারক সম্পত্তি (<ul>)। এটি নির্বাচিত আইটেমগুলিকে তালিকার শীর্ষে গ্রুপে পরিণত করে এবং অনুভূমিকভাবে সাজানো হয়:
li {
width: inherit;
grid-column: 1;
/* etc. */
&:has(:checked) {
grid-area: 1;
/* Equivalent to:
grid-row-start: 1;
grid-column-start: auto;
grid-row-end: auto;
grid-column-end: auto; */
width: 40px;
/* etc. */
}
/* etc. */
}এবং এটি আমাদের চূড়ান্ত ফলাফল দেয়! আসুন আমি আপনাকে দেখাতে চাই দ্বিতীয় পদ্ধতির সাথে তুলনা করি।
পদ্ধতি 2: ব্যবহার span কীওয়ার্ড
আমাদের প্রয়োজন হবে না grid-template-columns সম্পত্তি এখন। এখানে নতুন <ul> স্টাইল রুলসেট:
ul {
width: 250px;
display: grid;
gap: 14px 10px;
justify-content: center;
justify-items: center;
/* etc. */
}অন্তর্ভুক্তি justify-items আমরা এক মুহুর্তের মধ্যে যেমন দেখব তেমন গ্রিড আইটেমগুলির প্রান্তিককরণে সহায়তা করবে। এখানে আপডেট হওয়া শৈলী এখানে <li> উপাদান:
li {
width: inherit;
grid-column: 1 / span 6;
/* Equivalent to:
grid-column-start: 1;
grid-column-end: span 6; */
/* etc. */
}আগের মতো, প্রতিটি আইটেম প্রথম কলামে স্থাপন করা হয়েছে তবে এখন সেগুলিও span ছয়টি কলাম ট্র্যাক (যেহেতু ছয়টি আইটেম রয়েছে)। এটি নিশ্চিত করে যে যখন গ্রিডে একাধিক কলাম উপস্থিত হয়, যেমন আইটেমগুলি নির্বাচন করা হয়, নিম্নলিখিত নির্বাচিত আইটেমগুলি নির্বাচিত আইটেমগুলির অধীনে একটি একক কলামে থাকে – এখন একাধিক কলাম ট্র্যাক জুড়ে অনির্ধারিত আইটেমগুলি বিস্তৃত। দ্য justify-items: center ঘোষণাগুলি আইটেমগুলিকে কেন্দ্রে সারিবদ্ধ রাখবে।
li {
width: inherit;
grid-column: 1 / span 6;
/* etc. */
&:has(:checked) {
grid-area: 1;
width: 120px;
/* etc. */
}
/* etc. */
}নির্বাচিত আইটেমগুলির প্রস্থটি পূর্ববর্তী উদাহরণ থেকে বাড়ানো হয়েছে, সুতরাং নির্বাচিত আইটেমগুলি ধারকটিকে উপচে পড়লে নির্বাচন ইউআইয়ের বিন্যাসটি দেখা যায়।
নির্বাচন আদেশ
নির্বাচিত এবং নির্বাচিত আইটেমগুলির ক্রম উত্স আদেশের মতোই থাকবে। যদি অন-স্ক্রিন অর্ডারটি ব্যবহারকারীর নির্বাচনের সাথে মেলে তবে গতিশীলভাবে একটি বর্ধিতকরণ নির্ধারণ করুন order আইটেমগুলি নির্বাচিত হওয়ার সাথে সাথে মান।
onload = ()=>{
let i=1;
document.querySelectorAll('input').forEach((input)=>{
input.addEventListener("click", () => {
input.parentElement.parentElement.style.order = input.checked ? i++ : (i--, 0);
});
});
}মোড়ানো আপ
সিএসএস গ্রিড উভয় পদ্ধতির একটি টন কনফিগারেশন ছাড়াই খুব নমনীয় করতে সহায়তা করে। ব্যবহার করে auto-fill উভয় অক্ষ (সারি বা কলাম) এ আইটেম রাখার জন্য, নির্বাচিত আইটেমগুলি একই পাত্রে অনির্বাচিত আইটেমগুলির বিন্যাসকে বিরক্ত না করে সহজেই গ্রিড ধারকটির মধ্যে গোষ্ঠীভুক্ত করা যেতে পারে, যতক্ষণ না নির্বাচিত আইটেমগুলি ধারকটিকে ওভারফ্লো করে না।
যদি তারা ধারকটিকে উপচে পড়ে থাকে তবে ব্যবহার করে span নির্বাচিত আইটেমগুলির গোষ্ঠী প্রদত্ত অক্ষগুলিতে কতক্ষণ পাবে তা নির্বিশেষে লেআউটটি বজায় রাখতে সহায়তা করে। ইউআইয়ের জন্য কিছু ডিজাইনের বিকল্পগুলি তালিকার শেষে নির্বাচিত আইটেমগুলিকে গোষ্ঠীভুক্ত করছে বা অনুভূমিক এবং উল্লম্ব কাঠামোটি অদলবদল করছে।
সিএসএস গ্রিডের সাথে একত্রে বাছাইয়ের তালিকা আইটেমগুলি গ্রুপিং করা মূলত প্রকাশিত সিএসএস-ট্রিকসযা অংশ ডিজিটাল ওসিয়ান পরিবার। আপনার উচিত নিউজলেটার পান।