एक से ज़्यादा कॉम्पोनेंट चुनने की सुविधा का इस्तेमाल करना

उपयोगकर्ता अनुभवों को क्रम से लगाने और फ़िल्टर करने के लिए, रिस्पॉन्सिव, अडैप्टिव, और ऐक्सेस किए जा सकने वाले एक से ज़्यादा कॉम्पोनेंट बनाने के तरीके के बारे में बुनियादी जानकारी.

Adam Argyle

इस पोस्ट में, मुझे एक से ज़्यादा विकल्पों वाले कॉम्पोनेंट को बनाने के तरीके के बारे में लोगों के साथ अपनी सोच को शेयर करना है. इसे आज़माएं डेमो के लिए उपलब्ध है.

अगर आपको वीडियो देखना है, तो इस पोस्ट का YouTube वर्शन यहां देखें:

खास जानकारी

उपयोगकर्ताओं को अक्सर आइटम दिखाए जाते हैं. इसमें कभी-कभी कई आइटम शामिल होते हैं. कुछ मामलों में, सूची को छोटा करने का एक अच्छा तरीका हो सकता है ताकि विकल्पों का ओवरलोड. यह ब्लॉग पोस्ट में विकल्पों को कम करने के लिए, यूआई को फ़िल्टर करने के बारे में बताया गया है. यह ऐसा करता है आइटम के ऐसे एट्रिब्यूट प्रज़ेंट करना जिन्हें लोग चुन सकें या उनसे चुने हुए का निशान हटा सकें. इससे नतीजे कम हो जाते हैं इससे ज़्यादा विकल्प मिलेंगे.

इंटरैक्शन

इसका मकसद सभी उपयोगकर्ताओं और उनके अलग-अलग इनपुट टाइप इस्तेमाल कर सकते हैं. इस मॉडल को कस्टमाइज़ किए जा सकने वाले और रिस्पॉन्सिव विज्ञापन के हिसाब से डिलीवर किया जाएगा कॉम्पोनेंट जोड़े जाते हैं. डेस्कटॉप और कीबोर्ड के लिए चेकबॉक्स का एक परंपरागत साइडबार और स्क्रीन रीडर, और <select multiple> टच उपयोगकर्ताओं के लिए.

डेस्कटॉप के बजाय, टच के लिए पहले से मौजूद एक से ज़्यादा विकल्पों को इस्तेमाल करने के इस फ़ैसले से काम की बचत होती है और काम आसान हो जाता है. हालांकि, मेरा मानना है कि यह एक ही कॉम्पोनेंट में पूरे रिस्पॉन्सिव अनुभव को बनाने के बजाय, कम कोड क़र्ज़ के साथ सही अनुभव देता है.

छूकर

टच कॉम्पोनेंट (स्क्रीन के वे हिस्से जहां छूने पर कोई कार्रवाई होती है) की वजह से जगह कम होती है और यह उपयोगकर्ता के इंटरैक्शन को सटीक बनाने में मदद करता है मोबाइल. यह चेकबॉक्स के पूरे साइडबार को <select> बिल्ट-इन ओवरले टच का अनुभव. यह जानकारी दिखाकर सटीक इनपुट देने में मदद करता है ये सिस्टम से मिलने वाला एक बड़ा टच ओवरले है.

कीबोर्ड और गेमपैड

नीचे कीबोर्ड से <select multiple> इस्तेमाल करने का तरीका दिखाया गया है.

पहले से मौजूद एक से ज़्यादा चुने गए विकल्पों को स्टाइल नहीं किया जा सकता. यह सिर्फ़ छोटे साइज़ में उपलब्ध है लेआउट बहुत सारे विकल्प दिखाने के लिए सही नहीं है. देखें कि कैसे आप उस छोटे से बॉक्स में ढेर सारे विकल्प दिख जाएंगे? आप इसका साइज़ बदल सकते हैं, लेकिन यह अभी भी चेकबॉक्स के साइडबार की तरह उपयोग नहीं हो सकता.

मार्कअप

दोनों कॉम्पोनेंट एक ही <form> एलिमेंट में शामिल होंगे. के नतीजे चेकबॉक्स या एक से ज़्यादा विकल्प चुनने की सुविधा का इस्तेमाल किया जाएगा. साथ ही, इस फ़ॉर्म का इस्तेमाल इन कामों के लिए किया जाएगा ग्रिड को फ़िल्टर करने के साथ-साथ इसे सर्वर पर भी सबमिट किया जा सकता है.

<form>

</form>

चेकबॉक्स वाला कॉम्पोनेंट

चेकबॉक्स के समूह <fieldset> तत्व और दिया गया <legend>. जब HTML की संरचना इस प्रकार की जाती है, तो स्क्रीन रीडर और FormData तत्वों के संबंध को अपने आप समझ लेती है.

<form>
  <fieldset>
    <legend>New</legend>
    … checkboxes …
  </fieldset>
</form>

ग्रुप मौजूद होने के बाद, इसके लिए <label> और <input type="checkbox"> जोड़ें करते हैं. मैंने अपने कारोबार को <div> में रैप करने का विकल्प चुना है, ताकि सीएसएस gap प्रॉपर्टी लेबल के मल्टीलाइन होने पर, उन्हें समान दूरी और अलाइनमेंट बनाए रखने में मदद मिलती है.

<form>
  <fieldset>
    <legend>New</legend>
    <div>
      <input type="checkbox" id="last 30 days" name="new" value="last 30 days">
      <label for="last 30 days">Last 30 Days</label>
    </div>
    <div>
      <input type="checkbox" id="last 6 months" name="new" value="last 6 months">
      <label for="last 6 months">Last 6 Months</label>
    </div>
   </fieldset>
</form>

<select multiple> कॉम्पोनेंट

<select> एलिमेंट की यह सुविधा शायद ही कभी इस्तेमाल की जाती है multiple. जब एट्रिब्यूट का इस्तेमाल किसी <select> एलिमेंट के साथ किया जाता है, तो उपयोगकर्ता ये काम कर सकता है सूची में से कई विकल्प चुनें. यह एक रेडियो सूची से इंटरैक्शन को बदलने जैसा है चेकबॉक्स सूची में जोड़ सकते हैं.

<form>
  <select multiple="true" title="Filter results by category">
    …
  </select>
</form>

<select> में ग्रुप बनाने और लेबल करने के लिए, <optgroup> और उसे एक label एट्रिब्यूट और वैल्यू दें. यह एलिमेंट और एट्रिब्यूट वैल्यू, <fieldset> और <legend> एलिमेंट से मिलती-जुलती है.

<form>
  <select multiple="true" title="Filter results by category">
    <optgroup label="New">
      …
    </optgroup>
  </select>
</form>

अब <option> फ़िल्टर के एलिमेंट शामिल करें.

<form>
  <select multiple="true" title="Filter results by category">
    <optgroup label="New">
      <option value="last 30 days">Last 30 Days</option>
      <option value="last 6 months">Last 6 Months</option>
    </optgroup>
  </select>
</form>

सहायक टेक्नोलॉजी की जानकारी देने के लिए, काउंटर की मदद से इनपुट ट्रैक करना

स्थिति भूमिका तकनीक का इस्तेमाल इस उपयोगकर्ता अनुभव में किया जा सकता है, ताकि स्क्रीन रीडर और अन्य सहायक टेक्नोलॉजी के लिए फ़िल्टर. YouTube वीडियो सुविधा को दिखाता है. इंटिग्रेशन की शुरुआत एचटीएमएल और एट्रिब्यूट से होती है role="status".

<div role="status" class="sr-only" id="applied-filters"></div>

यह एलिमेंट, कॉन्टेंट में किए गए बदलावों को तेज़ आवाज़ में पढ़कर सुनाता है. हम अपडेट की गई सीएसएस का कॉन्टेंट काउंटर उपयोगकर्ता चेकबॉक्स से इंटरैक्ट करते हैं. ऐसा करने के लिए हमें सबसे पहले एक इनपुट और स्टेट एलिमेंट के पैरंट एलिमेंट पर नाम वाले काउंटर का इस्तेमाल करें.

aside {
  counter-reset: filters;
}

डिफ़ॉल्ट रूप से, यह संख्या 0 होगी, जो कि बहुत अच्छी है, कुल संख्या :checked नहीं है डिफ़ॉल्ट रूप से सेट है.

इसके बाद, अपने नए काउंटर को बढ़ाने के लिए, हम <aside> एलिमेंट जो :checked हैं. जैसे-जैसे उपयोगकर्ता इनपुट की स्थिति बदलता है, वैसे-वैसे filters काउंटर बराबर हो जाएगा.

aside :checked {
  counter-increment: filters;
}

सीएसएस को अब चेकबॉक्स के यूज़र इंटरफ़ेस (यूआई) और स्टेटस रोल के बारे में जानकारी मिल गई है तत्व खाली है और मानों की प्रतीक्षा कर रहा है. हालांकि, सीएसएस देने वाली कंपनी, पिछले 10 दिनों में याद, counter() फ़ंक्शन, pseudo से वैल्यू को ऐक्सेस करने की अनुमति देता है एलिमेंट कॉन्टेंट:

aside #applied-filters::before {
  content: counter(filters) " filters ";
}

स्थिति भूमिका एलिमेंट के लिए एचटीएमएल अब "2 फ़िल्टर " किसी स्क्रीन पर रीडर. यह एक अच्छी शुरुआत है, लेकिन हम इससे बेहतर कर सकते हैं, जैसे नतीजे मिलते हैं, जिनसे फ़िल्टर अपडेट हो जाते हैं. हम यह काम JavaScript से करेंगे, क्योंकि यह कि काउंटर क्या कर सकते हैं.

नेस्ट किए जाने का रोमांच

CSS के साथ काउंटर एल्गोरिदम को अच्छा लगा nesting-1, क्योंकि मैंने सभी वेब ब्राउज़र पर एक ही ब्लॉक में लॉजिक लगाना. पढ़ने और अपडेट करने के लिए पोर्टेबल और एक ही जगह पर जैसा महसूस होता है.

aside {
  counter-reset: filters;

  & :checked {
    counter-increment: filters;
  }

  & #applied-filters::before {
    content: counter(filters) " filters ";
  }
}

लेआउट

इस सेक्शन में, दो कॉम्पोनेंट के बीच के लेआउट के बारे में बताया गया है. ज़्यादातर लेआउट स्टाइल, डेस्कटॉप चेकबॉक्स कॉम्पोनेंट के लिए होते हैं.

फ़ॉर्म

लोगों के लिए, कॉन्टेंट को आसानी से पढ़ने और पूरा करने के लिए, इस फ़ॉर्म में ज़्यादा से ज़्यादा 30 वर्णों की चौड़ाई, हर एक के लिए ऑप्टिकल लाइन की चौड़ाई सेट करना फ़िल्टर लेबल. यह फ़ॉर्म, ग्रिड लेआउट और gap प्रॉपर्टी का इस्तेमाल करके, फ़ील्डसेट.

form {
  display: grid;
  gap: 2ch;
  max-inline-size: 30ch;
}

<select> एलिमेंट

लेबल और चेकबॉक्स, दोनों की सूची मोबाइल पर बहुत ज़्यादा जगह लेती है. इसलिए, लेआउट यह देखने के लिए जांच करता है कि उपयोगकर्ता का प्राइमरी पॉइंटिंग डिवाइस बदल गया है या नहीं को छूने का अनुभव.

@media (pointer: coarse) {
  select[multiple] {
    display: block;
  }
}

coarse वैल्यू बताती है कि उपयोगकर्ता इससे इंटरैक्ट नहीं कर पाएगा प्राथमिक इनपुट डिवाइस के साथ उच्च मात्रा में सटीकता के साथ स्क्रीन. मोबाइल डिवाइस, तो मुख्य इंटरैक्शन के रूप में अक्सर coarse पॉइंटर की वैल्यू होती है स्पर्श है. डेस्कटॉप डिवाइस पर, पॉइंटर की वैल्यू अक्सर fine होती है, क्योंकि यह सामान्य है माउस या अन्य उच्च सटीकता वाले इनपुट डिवाइस को कनेक्ट करने के लिए.

फ़ील्डसेट

<legend> वाले <fieldset> की डिफ़ॉल्ट शैली और लेआउट यूनीक है:

आम तौर पर, अपने चाइल्ड एलिमेंट को स्पेस करने के लिए मैं gap प्रॉपर्टी का इस्तेमाल करता/करती हूं, लेकिन यह यूनीक <legend> की पोज़िशन सेट करने पर, समान दूरी वाला सेट बनाना मुश्किल हो जाता है बच्चे. gap के बजाय, आस-पास मौजूद सिबलिंग सिलेक्टर और margin-block-start का इस्तेमाल किया गया है.

fieldset {
  padding: 2ch;

  & > div + div {
    margin-block-start: 2ch;
  }
}

इससे <legend> को केवल <div> बच्चे.

फ़िल्टर लेबल और चेकबॉक्स

<fieldset> के डायरेक्ट चाइल्ड के रूप में और फ़ॉर्म की अधिकतम चौड़ाई के अंदर 30ch, ज़्यादा लंबा होने पर लेबल टेक्स्ट रैप किया जा सकता है. टेक्स्ट को रैप करना बढ़िया है, लेकिन टेक्स्ट और चेकबॉक्स में गलत अलाइनमेंट नहीं होना चाहिए. इसके लिए, Flexbox बिलकुल सही है.

fieldset > div {
  display: flex;
  gap: 2ch;
  align-items: baseline;
}

ऐनिमेशन ग्रिड

लेआउट ऐनिमेशन Isotope से किया जाता है. ऐप्लिकेशन इंटरैक्टिव सॉर्ट और फ़िल्टर करने के लिए बेहतर और असरदार प्लगिन.

JavaScript

बेहतरीन ऐनिमेटेड, इंटरैक्टिव ग्रिड, JavaScript को व्यवस्थित करने में मदद करने के अलावा कुछ किनारों को पॉलिश करने के लिए इस्तेमाल किया जाता है.

उपयोगकर्ता के इनपुट को सामान्य बनाना

इस डिज़ाइन में इनपुट देने के दो अलग-अलग तरीके होते हैं. इन दोनों के ज़रिए एक ही फ़ॉर्म में इनपुट दिया जा सकता है हस्ताक्षर की क्रम से लगाना एक ही. हालांकि, कुछ JavaScript की मदद से हम यह काम कर सकते हैं डेटा को नॉर्मलाइज़ कर सकते हैं.

मैंने <select> एलिमेंट डेटा स्ट्रक्चर को, ग्रुप किए गए चेकबॉक्स के हिसाब से अलाइन करने का विकल्प चुना है स्ट्रक्चर. ऐसा करने के लिए, input इवेंट लिसनर को <select> एलिमेंट में जोड़ा जाता है, जहां यह selectedOptions मैप किए जाते हैं.

document.querySelector('select').addEventListener('input', event => {
  // make selectedOptions iterable then reduce a new array object
  let selectData = Array.from(event.target.selectedOptions).reduce((data, opt) => {
    // parent optgroup label and option value are added to the reduce aggregator
    data.push([opt.parentElement.label.toLowerCase(), opt.value])
    return data
  }, [])
})

अब फ़ॉर्म सबमिट करना सुरक्षित है. अगर ऐसा है, तो Isotope को निर्देश दें फ़िल्टर चुनें.

स्टेटस भूमिका वाले एलिमेंट को पूरा करना

एलिमेंट में सिर्फ़ चेकबॉक्स के आधार पर, फ़िल्टर की संख्या का हिसाब लगाया जाता है और उसे कैलकुलेट किया जाता है बातचीत हुई, लेकिन मुझे लगा कि लोगों को नतीजे पाने और यह पक्का करने के लिए कि <select> एलिमेंट के विकल्पों को भी गिना जाए.

counter() में एलिमेंट के लिए <select> विकल्प दिख रहा है

डेटा नॉर्मलाइज़ेशन सेक्शन में, इनपुट पर पहले ही लिसनर बनाया गया था. पर इस फ़ंक्शन के बाद, चुने गए फ़िल्टर की संख्या और नतीजों की संख्या सबसे ज़्यादा इस्तेमाल किए जाते हैं. ये वैल्यू, स्टेट रोल एलिमेंट को भेजी जा सकती हैं इस तरह.

let statusRoleElement = document.querySelector('#applied-filters')
statusRoleElement.style.counterSet = selectData.length

role="status" एलिमेंट में नतीजे दिखते हैं

:checked, चुने गए फ़िल्टर की संख्या को एक बिल्ट-इन तरीका उपलब्ध कराता है, ताकि स्टेटस रोल एलिमेंट, लेकिन फ़िल्टर किए गए नतीजे नहीं दिखते. JavaScript को चेकबॉक्स के साथ इंटरैक्शन और फ़िल्टर करने के बाद ग्रिड के तौर पर, <select> एलिमेंट की तरह ही textContent जोड़ें.

document
  .querySelector('aside form')
  .addEventListener('input', e => {
    // isotope demo code
    let filterResults = IsotopeGrid.getFilteredItemElements().length
    document.querySelector('#applied-filters').textContent = `giving ${filterResults} results`
})

कुल मिलाकर, इस काम के लिए "2 फ़िल्टर से 25 नतीजे देने" का एलान किया गया है.

अब हमारा शानदार सहायक तकनीकी अनुभव उन सभी उपयोगकर्ता उससे इंटरैक्ट करें.

नतीजा

अब जब आपको पता है कि मैंने इसे कैसे किया, तो आप कैसे करेंगे ‽ 🙂

आइए, हम अलग-अलग तरह के काम करते हैं और वेब पर काम करने के सभी तरीके सीखते हैं. एक डेमो बनाएं, मुझे ट्वीट करें और मैं इसे जोड़ दूंगा कम्यूनिटी रीमिक्स बनाने के लिए यहां दिए गए सेक्शन पर जाएं!

कम्यूनिटी रीमिक्स

फ़िलहाल, यहां कोई कॉन्टेंट मौजूद नहीं है!