प्रोग्रामिंग
पृष्ठ संपादन का अनुरोध करते समय हेडर, बटन, अंतराल, माउस होवर और प्रतिक्रियाशील बदलावों के नाम खोजने योग्य संदर्भ।
63 परिणाम
पेज संरचना
Header
पृष्ठ का शीर्ष क्षेत्र, जिसमें आमतौर पर साइट का शीर्षक, नेविगेशन, थीम नियंत्रण, भाषा नियंत्रण और मेनू बटन होते हैं।
हेडर पैडिंग, ऊंचाई, बॉर्डर या स्थिति बदलने से शीर्ष क्षेत्र कितना ऊंचा और स्थिर महसूस होता है, यह बदल जाता है।
एक लंबा हेडर दृश्यमान सामग्री क्षेत्र को कम कर सकता है, खासकर मोबाइल उपकरणों पर।
headerpaddingheightpositionborder-bottomमोबाइल हेडर शीर्षक को छोटा करें जबकि हेडर की ऊंचाई समान रखें।
पेज संरचना
Footer
पृष्ठ का निचला क्षेत्र, जिसका उपयोग अक्सर लिंक, कानूनी पाठ, संपर्क जानकारी या छोटे नेविगेशन के लिए किया जाता है।
फ़ूटर पैडिंग और बॉर्डर में परिवर्तन, सांस लेने की जगह और ऊपर की सामग्री से अलगाव की मात्रा को प्रभावित करते हैं।
footerpaddingborder-topmargin-topफ़ुटर में अधिक शीर्ष पैडिंग जोड़ें ताकि यह सामग्री से जुड़ा हुआ न लगे।
पेज संरचना
Section
एक बड़ा सामग्री क्षेत्र जो संबंधित सामग्री को समूहित करता है, जैसे कि हीरो, टूल सूची, संदर्भ कार्ड या लेख ब्लॉक।
अनुभाग पैडिंग पृष्ठ की लंबवत लय को बदलता है। पृष्ठभूमि परिवर्तन अनुभाग को अलग महसूस कराते हैं।
sectionpadding-blockborder-topbackgroundमोबाइल पर टूल सेक्शन के लंबवत पैडिंग को कम करें।
पेज संरचना
Container
एक आंतरिक रैपर जो बड़े स्क्रीन पर पृष्ठ सामग्री को बहुत चौड़ा होने से रोकता है।
'Increasing' मैक्स-विड्थ (max-width) सामग्री को अधिक चौड़ा बनाता है। साइड पैडिंग (side padding) बढ़ाने से सामग्री को स्क्रीन के किनारों से दूर रखा जाता है।
max-widthmargin-inlinepadding-inlineमुख्य कंटेनर को डेस्कटॉप पर थोड़ा संकरा बनाएं।
पेज संरचना
Card
एक फ़्रेमयुक्त ब्लॉक जो एक दोहराए जाने वाले आइटम को प्रस्तुत करता है, जैसे कि एक टूल, संदर्भ प्रविष्टि या परिणाम।
कार्ड पैडिंग, बॉर्डर, रेडियस और शैडो यह नियंत्रित करते हैं कि प्रत्येक आइटम कितना घना या प्रमुख महसूस होता है।
borderborder-radiuspaddingbackgroundbox-shadowसंदर्भ कार्ड को उनके पैडिंग को कम करके अधिक संक्षिप्त बनाएं।
पेज संरचना
Panel
एक फ़्रेमयुक्त कार्य क्षेत्र, आमतौर पर नियंत्रण, इनपुट, सेटिंग्स या आउटपुट रखता है।
पैनल स्पेसिंग और लेआउट में परिवर्तन से यह प्रभावित होता है कि दोहराए जाने वाले टूल का उपयोग करना कितना आसान लगता है।
borderbackgroundpaddingdisplayडेस्कटॉप पर पैनल नियंत्रणों को एक पंक्ति में संरेखित करें और मोबाइल पर उन्हें एक के ऊपर एक रखें।
पेज संरचना
Navigation
लिंक या बटन का एक समूह जिसका उपयोग प्रमुख पृष्ठों या श्रेणियों के बीच नेविगेट करने के लिए किया जाता है।
गैप, संरेखण और दृश्यता नियम यह बदलते हैं कि डेस्कटॉप और मोबाइल पर नेविगेशन कैसे व्यवहार करता है।
navdisplaygapalign-itemsछोटे स्क्रीन पर नेविगेशन लिंक छिपाएं और मेनू बटन को दिखाई दें रखें।
पेज संरचना
Menu
लिंक या क्रियाओं की एक सूची जो एक बटन से खुलती है।
स्थिति, चौड़ाई और ज़ेड-इंडेक्स यह निर्धारित करते हैं कि मेनू कहां खुलता है और क्या यह अन्य सामग्री के ऊपर दिखाई देता है।
यदि मेनू को सामान्य दस्तावेज़ प्रवाह में रखा गया है, तो यह पूरे पृष्ठ को नीचे धकेल सकता है।
positionrighttopz-indexwidthमेनू को एक फ्लोटिंग पैनल के रूप में खोलें जो दाईं ओर संरेखित है।
पेज संरचना
Sidebar
पृष्ठ के बाईं या दाईं ओर एक ऊर्ध्वाधर क्षेत्र, जिसका उपयोग अक्सर नेविगेशन या फ़िल्टर के लिए किया जाता है।
साइडबार की चौड़ाई और प्रतिक्रियाशील नियम यह निर्धारित करते हैं कि यह दिखाई देता है, संक्षिप्त होता है या सामग्री के नीचे चला जाता है।
asidewidthpositiongrid-template-columnsफ़िल्टर साइडबार को मोबाइल पर सामग्री के नीचे ले जाएं।
पेज संरचना
Hero
पृष्ठ का पहला बड़ा खंड जो मुख्य उद्देश्य या कार्रवाई का परिचय देता है।
हीरो पैडिंग, शीर्षक का आकार और लेआउट पहले प्रभाव को प्रभावित करते हैं और पहले व्यूपोर्ट में कितनी सामग्री फिट होती है।
paddingbackgroundmin-heightgridमोबाइल पर हीरो शीर्षक के आकार को कम करें ताकि क्रिया बटन दिखाई रहें।
स्पेसिंग और आकार
Padding
किसी तत्व के अंदर की जगह, बॉर्डर और सामग्री के बीच।
'Increasing' पैडिंग-टॉप (padding-top) तत्व के अंदर की सामग्री के ऊपर अधिक स्थान जोड़ता है।
अधिक पैडिंग आमतौर पर तत्व के दृश्य आकार को बढ़ाता है।
paddingpadding-toppadding-rightpadding-bottompadding-leftहेडर के शीर्ष पैडिंग को थोड़ा बढ़ाएं।
स्पेसिंग और आकार
Margin
किसी तत्व के बाहर की जगह, इसके और आसन्न तत्वों के बीच।
'Increasing' मार्जिन-बॉटम (margin-bottom) अगले तत्व को नीचे और अधिक धकेलता है।
marginmargin-topmargin-rightmargin-bottommargin-leftहीरो सेक्शन और टूल लिस्ट के बीच अधिक मार्जिन जोड़ें।
स्पेसिंग और आकार
Gap
फ्लेक्स या ग्रिड लेआउट के अंदर आइटम के बीच की जगह।
'Increasing' विकल्प का उपयोग करके, आप संबंधित तत्वों को एक-दूसरे से दूर कर सकते हैं, बिना पूरे समूह के चारों ओर अतिरिक्त स्थान जोड़े।
gaprow-gapcolumn-gapथीम बटन, भाषा बटन और मेनू बटन के बीच के अंतर को कम करें।
स्पेसिंग और आकार
Width
किसी तत्व का क्षैतिज आकार।
एक निश्चित चौड़ाई तत्व को स्थिर रखती है। अधिकतम-चौड़ाई इसे छोटे स्क्रीन पर सिकुड़ने देती है।
widthmin-widthmax-widthमेनू पैनल की चौड़ाई को उसके सबसे लंबे आइटम से मिलाएं।
स्पेसिंग और आकार
Height
किसी तत्व का ऊर्ध्वाधर आकार।
निश्चित ऊंचाई हेडर को स्थिर रख सकती है। `max-height` के साथ ओवरफ़्लो ड्रॉपडाउन को बहुत ऊंचे होने से रोक सकता है।
heightmin-heightmax-heightशीर्षक को छोटा करते समय हेडर की ऊंचाई को स्थिर रखें।
स्पेसिंग और आकार
Max width
अधिकतम चौड़ाई जो किसी तत्व तक पहुंच सकता है।
अधिकतम-चौड़ाई को कम करने से बड़े स्क्रीन पर टेक्स्ट लाइनें छोटी हो जाती हैं और पैनल संकरे हो जाते हैं।
max-widthwidthड्रॉपडाउन पर एक अधिकतम-चौड़ाई सेट करें ताकि यह पृष्ठ के बहुत अधिक भाग को न ढंके।
स्पेसिंग और आकार
Top / Right / Bottom / Left
स्थिति ऑफ़सेट का उपयोग स्थित तत्वों के साथ किया जाता है।
right: 0 एक फ्लोटिंग पैनल को उसके स्थित पैरेंट के दाहिने किनारे पर संरेखित करता है।
toprightbottomleftinsetखुले मेनू पैनल को हेडर नियंत्रणों के दाहिने किनारे पर संरेखित करें।
टेक्स्ट
Font size
पाठ का आकार।
फ़ॉन्ट आकार को कम करने से लंबे लेबल मोबाइल हेडर जैसे तंग स्थानों में फिट हो सकते हैं।
font-sizetext-smtext-lgमोबाइल साइट शीर्षक को छोटा करें लेकिन इसे एक ही पंक्ति में रखें।
टेक्स्ट
Font weight
पाठ कितना मोटा या बोल्ड दिखाई देता है।
फ़ॉन्ट-वज़न बढ़ाने से लेबल अधिक प्रमुख हो जाते हैं बिना उनका आकार बदले।
font-weightfont-boldfont-semiboldश्रेणी लेबल को थोड़ा बोल्ड करें।
टेक्स्ट
Line height
प्रत्येक टेक्स्ट लाइन द्वारा अधिग्रहित ऊर्ध्वाधर स्थान।
'Increasing' लाइन-हाइट (line-height) से पैराग्राफ को पढ़ना आसान हो जाता है। इसे कम करने से, UI लेबल अधिक कॉम्पैक्ट हो जाते हैं।
line-heightleadingहीरो विवरण में पैराग्राफ लाइन-ऊंचाई बढ़ाएं।
टेक्स्ट
Letter spacing
व्यक्तिगत अक्षरों के बीच की जगह।
छोटा सकारात्मक स्पेसिंग अपरकेस लेबल को अधिक स्पष्ट महसूस करने में मदद कर सकता है। बहुत अधिक स्पेसिंग से कोरियाई टेक्स्ट अजीब लग सकता है।
letter-spacingtrackingकॉम्पैक्ट बटन से नकारात्मक अक्षर रिक्ति को हटा दें।
टेक्स्ट
Text align
कंटेनर के अंदर टेक्स्ट का क्षैतिज संरेखण।
दाईं ओर संरेखित मेनू टेक्स्ट से मेनू को दाईं किनारे से जुड़ा हुआ महसूस हो सकता है।
text-alignमेनू पैनल के अंदर मेनू आइटम टेक्स्ट को दाईं ओर संरेखित करें।
टेक्स्ट
Wrap / No wrap
क्या लंबा पाठ अगली पंक्ति में जा सकता है या इसे एक ही पंक्ति में रहना चाहिए।
नो-रैप एक हेडर को स्थिर रखता है, जबकि रैपिंग अधिक टेक्स्ट दिखा सकता है लेकिन आमतौर पर ऊंचाई बढ़ाता है।
white-spaceword-breakoverflow-wrapमोबाइल शीर्षक को एक पंक्ति में रखें और ओवरफ़्लो को ट्रंकेट करें।
टेक्स्ट
Truncate / Ellipsis
एक-पंक्ति टेक्स्ट को काटने और डॉट्स दिखाने का एक तरीका।
छोटा करने से लेआउट टूटना से रोका जा सकता है जब लेबल अपेक्षित से लंबे हों।
overflowtext-overflowwhite-spaceबहुत छोटे स्क्रीन पर साइट शीर्षक को छोटा करें।
रंग और पृष्ठभूमि
Color
टेक्स्ट या आइकन का रंग।
रंग बदलने से पठनीयता और दृश्य प्राथमिकता प्रभावित होती है।
colorडार्क मोड में चयनित भाषा पाठ को दिखाई दें।
रंग और पृष्ठभूमि
Background
किसी तत्व की सामग्री के पीछे का रंग या छवि।
पृष्ठभूमि परिवर्तन पैनलों को अलग कर सकते हैं, सक्रिय अवस्थाओं को उजागर कर सकते हैं, या कंट्रास्ट में सुधार कर सकते हैं।
backgroundbackground-colorडार्क मोड में चयनित भाषा आइटम के लिए एक गहरे पृष्ठभूमि का उपयोग करें।
रंग और पृष्ठभूमि
Opacity
किसी तत्व की पारदर्शिता की डिग्री।
कम अपारदर्शिता तत्वों को शांत बनाती है, लेकिन यह पठनीयता को कम कर सकती है।
opacityrgbacolor-mixअक्षम नियंत्रणों को पाठ को अपठनीय बनाने के बिना थोड़ा धुंधला दिखाएं।
रंग और पृष्ठभूमि
Gradient
दो या दो से अधिक रंगों के बीच एक सहज संक्रमण।
सूक्ष्म ग्रेडिएंट गहराई जोड़ सकते हैं, लेकिन मजबूत ग्रेडिएंट टूल को कम व्यावहारिक महसूस करा सकते हैं।
linear-gradientradial-gradientbackground-imageहीरो बैकग्राउंड को सूक्ष्म रखें और मजबूत ग्रेडिएंट से बचें।
रंग और पृष्ठभूमि
Accent color
एक दोहराया गया हाइलाइट रंग जिसका उपयोग लेबल, सक्रिय अवस्थाओं या महत्वपूर्ण क्रियाओं के लिए किया जाता है।
उच्चारण रंग बदलने से पृष्ठ की दृश्य पहचान और जोर बदल जाता है।
colorbackgroundborder-coloraccent-colorश्रेणी लेबल और सक्रिय चिप्स के लिए समान हरे रंग के उच्चारण का उपयोग करें।
रंग और पृष्ठभूमि
Contrast
अग्रभूमि और पृष्ठभूमि रंगों के बीच का अंतर।
उच्च कंट्रास्ट पठनीयता में सुधार करता है, खासकर डार्क मोड और मोबाइल स्क्रीन पर।
colorbackground-colorगहरे मोड में ड्रॉपडाउन आइटम का कंट्रास्ट बढ़ाएं।
बॉर्डर और आकार
Border
एक तत्व के चारों ओर एक रेखा।
बॉर्डर की चौड़ाई और रंग यह नियंत्रित करते हैं कि कोई बॉक्स या बटन पृष्ठभूमि से कितना अलग है।
borderborder-colorborder-widthborder-styleडार्क मोड में मेनू पैनल का बॉर्डर थोड़ा गहरा होना चाहिए।
बॉर्डर और आकार
Border radius
किसी बॉक्स या बटन के कोनों कितने गोल हैं।
एक छोटी त्रिज्या व्यावहारिक और कॉम्पैक्ट लगती है। एक बड़ी त्रिज्या नरम और अधिक चंचल लगती है।
border-radiusकार्ड को 8px बॉर्डर त्रिज्या पर रखें।
बॉर्डर और आकार
Box shadow
एक तत्व के चारों ओर एक छाया जो इसे पृष्ठ से ऊपर उठने का एहसास कराती है।
मजबूत छायाएं फ्लोटिंग मेनू या मॉडलों को लेयर्ड महसूस कराती हैं। बहुत अधिक छाया भारी लग सकती है।
box-shadowफ्लोटिंग मेनू पैनल में एक सूक्ष्म छाया जोड़ें।
बॉर्डर और आकार
Outline
एक रेखा जो एक तत्व के चारों ओर दिखाई देती है, अक्सर जब इसे कीबोर्ड नेविगेशन द्वारा फोकस किया जाता है।
एक स्पष्ट रूपरेखा कीबोर्ड उपयोगकर्ताओं को यह जानने में मदद करती है कि कौन सा नियंत्रण सक्रिय है।
outlineoutline-offset:focus-visibleआइकन बटन पर एक दृश्य फोकस आउटलाइन रखें।
बॉर्डर और आकार
Divider
एक रेखा जिसका उपयोग अनुभागों या समूहों को अलग करने के लिए किया जाता है।
एक विभाजक श्रेणी सीमाओं को स्पष्ट कर सकता है बिना बहुत अधिक दृश्य भार जोड़े।
border-topborder-bottomhrमेनू श्रेणियों के बीच सूक्ष्म विभाजक जोड़ें।
लेआउट और स्थिति
Display
किसी तत्व का मूल लेआउट मोड।
प्रदर्शन: none एक तत्व को छिपाता है। flex और grid चाइल्ड आइटम को व्यवस्थित करते हैं।
displaydisplay: nonedisplay: flexdisplay: gridमोबाइल स्क्रीन पर डेस्कटॉप नेविगेशन छिपाएं।
लेआउट और स्थिति
Flex
वस्तुओं को एक पंक्ति या स्तंभ में व्यवस्थित करने की एक विधि।
flex-direction: column आइटम को लंबवत रूप से स्टैक करता है। flex-wrap आइटम को अगली पंक्ति में ले जाने की अनुमति देता है।
display: flexflex-directionflex-wrapgapहेडर नियंत्रणों को एक फ्लेक्स पंक्ति में रखें।
लेआउट और स्थिति
Grid
सामग्री को पंक्तियों और स्तंभों में व्यवस्थित करने की एक विधि।
ग्रिड कॉलम बदलने से प्रति पंक्ति दिखाई देने वाले कार्ड की संख्या नियंत्रित होती है।
display: gridgrid-template-columnsgrid-columngapचौड़े डेस्कटॉप स्क्रीन पर प्रति पंक्ति चार टूल कार्ड दिखाएं।
लेआउट और स्थिति
Align items
फ्लेक्स या ग्रिड के अंदर क्रॉस अक्ष के अंदर आइटम कैसे संरेखित होते हैं।
align-items: केंद्र लंबवत रूप से हेडर पंक्ति में नियंत्रणों को केंद्रित करता है।
align-itemsplace-itemsशीर्षक और हेडर बटन को लंबवत रूप से केंद्रित करें।
लेआउट और स्थिति
Justify content
फ्लेक्स या ग्रिड के अंदर मुख्य अक्ष के अंदर आइटम कैसे वितरित किए जाते हैं।
justify-content: space-between समूहों को विपरीत दिशाओं में धकेलता है।
justify-contentjustify-itemsmargin-left: autoशीर्षक को बाईं ओर और नियंत्रणों को दाईं ओर रखें।
लेआउट और स्थिति
Position
एक तत्व पृष्ठ या किसी अन्य तत्व के संबंध में कैसे स्थित है।
position: absolute एक ड्रॉपडाउन को पेज लेआउट को नीचे धकेलने से बचाते हुए तैरने देता है।
positionrelativeabsolutefixedstickyमेनू पैनल को निरपेक्ष बनाएं ताकि यह पृष्ठ को नीचे न धके।
लेआउट और स्थिति
Z-index
स्थित तत्वों का स्टैकिंग क्रम।
एक उच्च z-इंडेक्स ड्रॉपडाउन को पृष्ठ सामग्री के ऊपर रख सकता है।
z-इंडेक्स केवल तभी पूर्वानुमानित रूप से काम करता है जब स्थिति और स्टैकिंग संदर्भों पर विचार किया जाता है।
z-indexpositionमेनू पैनल के ऊपर भाषा ड्रॉपडाउन को ऊपर उठाएं।
लेआउट और स्थिति
Overflow
क्या होता है जब सामग्री अपने कंटेनर से बड़ी होती है।
overflow-y: auto एक लंबी मेनू को स्क्रीन से बाहर निकलने के बजाय स्क्रॉल करने की अनुमति देता है।
overflowoverflow-xoverflow-ymax-heightलंबे ड्रॉपडाउन मेनू को अधिकतम-ऊंचाई के अंदर स्क्रॉल करने दें।
रेस्पॉन्सिव
Breakpoint
एक स्क्रीन चौड़ाई जहाँ लेआउट बदल जाता है।
एक ब्रेकपॉइंट बदलने से यह तय होता है कि टैबलेट मोबाइल या डेस्कटॉप की तरह व्यवहार करते हैं या नहीं।
@mediasmmdlgxlटैबलेट को शीर्ष नेविगेशन के लिए डेस्कटॉप के रूप में मानें।
रेस्पॉन्सिव
Mobile
छोटे फोन-आकार के स्क्रीन के लिए डिज़ाइन की गई शैलियाँ।
मोबाइल शैलियाँ अक्सर फ़ॉन्ट आकार को कम करती हैं, कॉलम को स्टैक करती हैं और नियंत्रणों को टच-फ्रेंडली रखती हैं।
@mediamax-widthsmमोबाइल पर, कार्ड को एक कॉलम में स्टैक करें।
रेस्पॉन्सिव
Desktop
चौड़े लैपटॉप या डेस्कटॉप स्क्रीन के लिए डिज़ाइन की गई शैलियाँ।
डेस्कटॉप शैलियों में अधिक कॉलम, क्षैतिज नेविगेशन और चौड़े सामग्री कंटेनर का उपयोग किया जा सकता है।
@mediamin-widthlgxlडेस्कटॉप पर, श्रेणी नेविगेशन को हेडर में दिखाई दें।
रेस्पॉन्सिव
Viewport
ब्राउज़र या डिवाइस स्क्रीन का दृश्य क्षेत्र।
व्यूपोर्ट इकाइयां दृश्यमान स्क्रीन के सापेक्ष आकारों को बनाती हैं।
vwvh100vw100vhमेनू की चौड़ाई को व्यूपोर्ट तक सीमित करें ताकि यह फोन पर ओवरफ्लो न हो।
रेस्पॉन्सिव
Responsive
एक डिज़ाइन जो विभिन्न स्क्रीन आकारों के अनुकूल होता है।
उत्तरदायी नियम एक ही घटक को डेस्कटॉप पर क्षैतिज और मोबाइल पर लंबवत बना सकते हैं।
@mediaclampmin()max()नियंत्रणों को उनके क्रम को बदले बिना उत्तरदायी बनाएं।
इंटरैक्शन अवस्थाएँ
Hover
जब माउस पॉइंटर किसी तत्व पर होता है तो स्थिति।
होवर शैल पृष्ठभूमि, पाठ रंग, बॉर्डर या छाया को बदलकर दिखा सकती हैं कि कोई आइटम इंटरैक्टिव है।
टच डिवाइस में विश्वसनीय होवर व्यवहार नहीं होता है, इसलिए महत्वपूर्ण क्रियाएं क्लिक या टैप द्वारा भी काम करनी चाहिए।
:hoverbackgroundcolortransitionमेनू आइटम पर होवर करने पर पृष्ठभूमि रंग परिवर्तन जोड़ें।
इंटरैक्शन अवस्थाएँ
Active
एक बटन या लिंक दबाए जाने पर छोटी स्थिति।
सक्रिय शैलियाँ बटन को थोड़े रंग या स्थिति परिवर्तन के साथ स्पर्शनीय महसूस करा सकती हैं।
:activetransformbackgroundटूलबार बटन में एक हल्का दबा हुआ प्रभाव जोड़ें।
इंटरैक्शन अवस्थाएँ
Focus
जब कोई इनपुट, बटन या लिंक कीबोर्ड या टाइपिंग के लिए वर्तमान में चयनित होता है तो स्थिति।
फोकस शैलियाँ कीबोर्ड नेविगेशन को दृश्यमान और सुलभ बनाती हैं।
:focus:focus-visibleoutlineखोज इनपुट फोकस रिंग को उच्चारण रंग से मिलाएं।
इंटरैक्शन अवस्थाएँ
Disabled
एक अवस्था जहाँ एक नियंत्रण दिखाई दे रहा है लेकिन इसका उपयोग नहीं किया जा सकता है।
अक्षम शैलियाँ अक्सर कंट्रास्ट को कम करती हैं और पॉइंटर इंटरैक्शन को हटा देती हैं।
:disabledopacitycursorpointer-eventsअक्षम बटन को स्पष्ट रूप से निष्क्रिय बनाएं लेकिन फिर भी पठनीय रखें।
इंटरैक्शन अवस्थाएँ
Selected
सूची, टैब समूह या मेनू में वर्तमान में चयनित आइटम की स्थिति।
चयनित शैलियों को आमतौर पर सामान्य आइटम की तुलना में मजबूत पृष्ठभूमि या टेक्स्ट रंग की आवश्यकता होती है।
aria-currentdata-statebackgroundcolorचयनित श्रेणी चिप को अन्य से स्पष्ट रूप से अलग करें।
इंटरैक्शन अवस्थाएँ
Open / Closed
क्या कोई ड्रॉपडाउन, मेनू या एकॉर्डियन पैनल वर्तमान में दिखाई दे रहा है।
ओपन और क्लोज स्टेट के लिए प्लस/माइनस आइकन या तीर रोटेशन जैसे स्पष्ट संकेतकों की आवश्यकता होती है।
aria-expandeddisplayheightvisibilityडिफ़ॉल्ट रूप से सभी मेनू श्रेणियों को बंद रखें।
UI घटक
Button
एक नियंत्रण जो क्लिक या टैप करने पर एक क्रिया करता है।
बटन पैडिंग, बॉर्डर, रंग और अवस्थाएं निर्धारित करती हैं कि यह कितना आसान और महत्वपूर्ण लगता है।
buttonpaddingborderbackgroundcursorप्राथमिक क्रिया बटन को द्वितीयक बटन से अधिक प्रमुख बनाएं।
UI घटक
Icon button
एक बटन जो मुख्य रूप से पाठ के बजाय एक आइकन द्वारा दर्शाया जाता है।
स्थिर चौड़ाई और ऊंचाई आइकन बटन को राज्यों के बदलने पर स्थानांतरित होने से रोकती है।
buttonwidthheightaria-labeldisplay: gridमेनू आइकन बटन को वर्गाकार रखें और इसे भाषा बटन के साथ संरेखित करें।
UI घटक
Dropdown
एक फ्लोटिंग सूची जो एक बटन या चयन नियंत्रण दबाने के बाद दिखाई देती है।
ड्रॉपडाउन की स्थिति, चौड़ाई, अधिकतम ऊंचाई और z-इंडेक्स प्लेसमेंट और लेयरिंग को नियंत्रित करते हैं।
positiontoprightz-indexbox-shadowजब भाषा ड्रॉपडाउन खुलता है, तो साइट मेनू बंद करें।
UI घटक
Accordion
एक अनुभाग जिसे खोला या बंद किया जा सकता है ताकि इसकी सामग्री दिखाई दे या छिपी रहे।
एकॉर्डियन लंबे मेनू को छोटा करते हैं क्योंकि वे श्रेणियों को तब तक बंद रखते हैं जब तक कि उनकी आवश्यकता न हो।
aria-expandedheightdisplayoverflowप्रत्येक मेनू श्रेणी में खुला और बंद व्यवहार जोड़ें।
UI घटक
Tabs
एक नियंत्रण जो संबंधित दृश्यों के बीच स्विच करने की अनुमति देता है बिना पृष्ठ छोड़े।
चयनित टैब स्टाइलिंग को स्पष्ट रूप से दिखाना चाहिए कि कौन सा दृश्य सक्रिय है।
role=tablistdisplayborderbackgroundसक्रिय टैब का पृष्ठभूमि रंग निष्क्रिय टैब से गहरा होना चाहिए।
UI घटक
Modal
एक केंद्रित ओवरले पैनल जो पृष्ठ के ऊपर दिखाई देता है।
मोडल चौड़ाई, बैकड्रॉप और ज़ेड-इंडेक्स नियंत्रित करते हैं कि यह पृष्ठ को कितनी दृढ़ता से बाधित करता है।
dialogposition: fixedinsetz-indexbackdropमॉडल को केंद्र में रखें और इसे व्यूपोर्ट से थोड़ा छोटा रखें।
UI घटक
Tooltip
एक छोटा संकेत जो एक नियंत्रण के पास दिखाया जाता है, अक्सर होवर या फोकस पर।
टूलटिप्स आइकन-ओनली बटन को स्थायी टेक्स्ट जोड़ने के बिना समझाने में मदद करते हैं।
positiontitlearia-describedbyz-indexएक टूलटिप जोड़ें जो मेनू आइकन बटन को लेबल करता है।
UI घटक
Input
एक फ़ील्ड जहां उपयोगकर्ता पाठ या मान टाइप करता है।
इनपुट पैडिंग, बॉर्डर, प्लेसहोल्डर रंग और फोकस शैली आराम और स्पष्टता को प्रभावित करते हैं।
inputborderpaddingplaceholder:focusखोज इनपुट को पूर्ण चौड़ाई बनाएं और मोबाइल पर टैप करना आसान बनाएं।
UI घटक
Badge / Chip
एक छोटा गोल लेबल या फ़िल्टर नियंत्रण।
चिप का आकार, त्रिज्या और सक्रिय रंग प्रभावित करते हैं कि स्कैन करने योग्य फ़िल्टर कितने अच्छे लगते हैं।
border-radiuspaddingbackgroundfont-sizeसक्रिय श्रेणी चिप्स को दृश्य रूप से अधिक मजबूत बनाएं।