स्प्लिट बटन वाला कॉम्पोनेंट बनाने के तरीके के बारे में खास जानकारी.
इस पोस्ट में, मैं आपको स्प्लिट बटन बनाने के तरीके के बारे में बताना चाहती हूं . डेमो देखें.
अगर आपको वीडियो देखना है, तो इस पोस्ट का YouTube वर्शन यहां देखें:
खास जानकारी
स्प्लिट बटन ऐसे बटन होते हैं जो मुख्य बटन और अतिरिक्त बटन की सूची को छिपा देती है. वे काम के हैं सेकंडरी को नेस्ट करते समय, किसी सामान्य कार्रवाई को दिखाने के लिए, कम इस्तेमाल होता है कार्रवाई नहीं की जा सकती. काम को बेहतर बनाने में मदद करने के लिए, स्प्लिट बटन का इस्तेमाल करना फ़ायदेमंद हो सकता है कम से कम महसूस होता है. एक ऐडवांस स्प्लिट बटन, उपयोगकर्ता की पिछली कार्रवाई को भी याद रख सकता है और उसे मुख्य पद पर प्रमोट कर सकता है.
आपको अपने ईमेल ऐप्लिकेशन में एक सामान्य स्प्लिट बटन मिल सकता है. मुख्य कार्रवाई भेज दिया जाता है, लेकिन आप बाद में इसे भेज सकते हैं या इसके बजाय ड्राफ़्ट को सेव कर सकते हैं:
इस शेयर की गई कार्रवाई वाली जगह अच्छी है, क्योंकि इसमें उपयोगकर्ता को आस-पास देखने की ज़रूरत नहीं होती. वे यह जान लें कि स्प्लिट बटन में ईमेल से जुड़ी ज़रूरी कार्रवाइयां मौजूद हैं.
पार्ट
चलिए, स्प्लिट बटन के बारे में चर्चा करने से पहले, इसके ज़रूरी हिस्सों के बारे में जानते हैं ऑर्कस्ट्रैशन और फ़ाइनल उपयोगकर्ता अनुभव के बारे में बताया जा सकता है. VisBug की सुलभता यहां कॉम्पोनेंट का मैक्रो व्यू दिखाने के लिए, जांच टूल का इस्तेमाल किया गया है एचटीएमएल, स्टाइल, और सुलभता के बारे में ज़रूरी जानकारी दी गई है.
टॉप लेवल स्प्लिट बटन का कंटेनर
सबसे ऊंचे लेवल का कॉम्पोनेंट एक इनलाइन फ़्लेक्सबॉक्स है, जिसमें
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 का इस्तेमाल नहीं कर सकता, क्योंकि यह पॉप-अप की क्लिप को
विज़ुअल तौर पर.
<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;
}
कुछ सीएसएस की मदद से, इंटरैक्शन की स्थितियां जोड़ना pseudo-classes और मैचिंग का इस्तेमाल कस्टम प्रॉपर्टी बनाएं:
.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-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);
}
सीएसएस की मदद से, कर्सर घुमाकर, फ़ोकस करने, और एक्टिव स्थितियों में लेयर बनाने की सुविधा पाएं
नेस्ट करना और
: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 एलिमेंट, कस्टम प्रॉपर्टी का इस्तेमाल करके फ़्लोटिंग कार्ड बटन की सूची है
और सापेक्ष इकाइयां सूक्ष्म रूप से छोटी हों,
और अपने ब्रैंड के बारे में लोगों को बताने के लिए रंगों का इस्तेमाल करें. ध्यान दें कि आइकॉन में कम कंट्रास्ट,
और परछाइयां ढीली हो जाती हैं और इस पर परछाई नीले रंग की तरह दिखती है. बटन से पसंद करने की सुविधा,
इन छोटी-छोटी जानकारी को एक जगह पर रखने की वजह से, एक बेहतर यूज़र इंटरफ़ेस (यूआई) और उपयोगकर्ता अनुभव मिलता है.
.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 के बजाय, padding-block और padding-inline को जोड़ा गया
शॉर्टहैंड की मदद से, लॉजिकल साइड की पैडिंग के फ़ायदे पाएं.
- border-end-start-radius और
दोस्त यह कर पाएंगे
दस्तावेज़ की दिशा के आधार पर गोल कोने.
- width के बजाय inline-size से यह पक्का होता है कि साइज़, फ़िज़िकल डाइमेंशन के हिसाब से न हो.
- border-inline-start शुरुआत में एक बॉर्डर जोड़ता है, जो स्क्रिप्ट की दिशा के आधार पर दाईं या बाईं ओर हो सकता है.
JavaScript
नीचे दिए गए करीब-करीब सभी JavaScript सुलभता को बेहतर बनाने के लिए हैं. मेरे दो हेल्पर लाइब्रेरी का इस्तेमाल टास्क को थोड़ा आसान बनाने के लिए किया जाता है. 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 इंटरैक्शन को बेहतर बनाने के लिए किया जाता है. इसके लिए, स्क्रीन रीडर के सही एट्रिब्यूट को टॉगल किया जाता है.
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)
})
नतीजा
अब जब आपको पता है कि मैंने इसे कैसे किया, तो आप कैसे करेंगे ‽ 🙂
आइए, हम अलग-अलग तरह के काम करते हैं और वेब पर काम करने के सभी तरीके सीखते हैं. एक डेमो बनाएं, मुझे ट्वीट करें और मैं इसे जोड़ दूंगा कम्यूनिटी रीमिक्स बनाने के लिए यहां दिए गए सेक्शन पर जाएं!