कलर फ़ील्ड
लोगों को किसी फ़ॉर्म के फ़ील्ड के रूप में एक रंग तय करने देता है। इसमें टेक्स्ट वाला एक मान होता है जिसे वे पढ़, टाइप और पेस्ट कर सकते हैं, टेक्स्ट के बग़ल में उस रंग का नमूना, और एक बटन जो पिकर माँगता है। यह टेक्स्ट फ़ील्ड जैसा दिखता है और उसी की नाप का होता है।
- श्रेणी
- टेक्स्ट इनपुट
- टोकन
comp.field- स्तर
- संयोजित
- इनसे बना है
- Field, Color input
- Web
tanrei-color-fieldschedule - SwiftUI
TanreiColorFieldradio_button_unchecked - Jetpack Compose
TanreiColorFieldradio_button_unchecked - Flutter
TanreiColorFieldradio_button_unchecked - React Native
ColorFieldradio_button_unchecked
- वे वेरिएंट जो इनमें शामिल नहीं
- tanrei: filled, outlined
इससे जनरेट किया गया: docs/status/status.json, specs/color-field.spec.json
पिकर बटन वाला एक कलर फ़ील्ड, और एक जिसका रंग प्रॉडक्ट नहीं मानता
कलर फ़ील्ड वहाँ इस्तेमाल करें जहाँ लोग रंग को एक मान के रूप में तय करते हैं: किसी थीम में ब्रैंड का रंग, किसी लेबल या कैटेगरी का रंग। वे उसे पढ़ते हैं, टाइप करते हैं या किसी दूसरे टूल से पेस्ट करते हैं, और टेक्स्ट के बग़ल में उसका नमूना देखते हैं। फ़ील्ड उसी वेरिएंट और साइज़ के टेक्स्ट फ़ील्ड की तरह बनता है और उसी की नाप का होता है।
किनसे बना है: एक फ़ील्ड और एक कलर इनपुट से। फ़ील्ड फ़्रेम है: लेबल, ज़रूरी या वैकल्पिक का निशान, सहायता और त्रुटि। कलर इनपुट कंट्रोल है: बॉक्स, स्वॉच, टेक्स्ट के रूप में मान और पिकर बटन। कलर फ़ील्ड अपना कुछ नहीं बनाता और उसका कोई टोकन नहीं है: उसकी हर प्रॉपर्टी इन दोनों में से किसी एक की प्रॉपर्टी है, जो उसी को बिना बदले दे दी जाती है।
यह एक ब्लॉक है, उतना ही चौड़ा जितनी वह जगह जिसमें इसे रखा गया है, और इसका बॉक्स उसे पूरा भरता है। इसकी अपनी कोई चौड़ाई नहीं है: फ़ील्ड कम चौड़ा चाहिए, तो उसे कम चौड़ी जगह दें। यह पहले से एक फ़ील्ड है, इसलिए कभी फ़ील्ड के भीतर नहीं रखा जाता।
वह अपना कोई पिकर नहीं बनाता। picker के साथ, अंत में एक बटन पिकर माँगता है: ब्राउज़र का, या वह सरफ़ेस जिसे प्रॉडक्ट पेश करता है।
वेब पर यह <tanrei-color-field> है। बाक़ी प्लैटफ़ॉर्म ने इसे अभी इम्प्लीमेंट नहीं किया है।
value एक # चिह्न और छोटे अक्षरों में छह हेक्साडेसिमल अंक है (#0f766e), या कोई रंग न होने पर ख़ाली स्ट्रिंग। वह कभी आधा टाइप किया हुआ टेक्स्ट नहीं होता: जब तक इनपुट में ऐसा कुछ है जो रंग नहीं है, value ख़ाली रहता है।
<form>
<tanrei-color-field name="brand" label="ब्रैंड का रंग" value="#0f766e"
required required-text="ज़रूरी"
supporting-text="छह अंकों का हेक्स कोड, जैसे #0f766e।"
invalid-text="छह अंकों का हेक्स कोड डालें, जैसे #0f766e।"
picker picker-label="रंग चुनें"></tanrei-color-field>
</form>
<script type="module">
import '@tanrei/web/components/color-field';
const brand = document.querySelector('tanrei-color-field');
// मान बदला: कोई रंग, या ख़ाली स्ट्रिंग। value में पहले से नया मान है।
brand.addEventListener('input', () => preview(brand.value));
// व्यक्ति ने बदला हुआ मान कमिट किया: फ़ोकस बाहर गया, Enter दबाई गई, या पिकर बंद हुआ।
brand.addEventListener('change', () => save(brand.value));
// ऐसा टेक्स्ट कमिट हुआ जो रंग नहीं है। फ़ील्ड उसे रहने देता है और invalidText दिखाता है,
// और detail.message में भी वही आता है।
brand.addEventListener('entryerror', (e) => console.log(e.detail.text, e.detail.message));
// अपना पिकर पेश करने के लिए: अनुरोध रद्द करें, पिकर खोलें, और value को चुने गए रंग पर सेट करें।
brand.addEventListener('pickerrequest', (e) => {
e.preventDefault();
openMyPicker(e.detail.value).then((color) => (brand.value = color));
});
</script>import { ColorField } from '@tanrei/react';
<ColorField label="ब्रैंड का रंग" value={brand} picker pickerLabel="रंग चुनें"
invalidText="छह अंकों का हेक्स कोड डालें, जैसे #0f766e।"
onChange={(event) => setBrand(event.currentTarget.value)} />वही फ़ील्ड, उसके दोनों सदस्यों से हाथ से लिखा जाए, तो वैसा ही दिखता है, और सहायक तकनीक के लिए वही टेक्स्ट बॉक्स होता है, उसी नाम, विवरण और स्टेट के साथ:
<tanrei-field label="ब्रैंड का रंग" required required-text="ज़रूरी"
supporting-text="छह अंकों का हेक्स कोड, जैसे #0f766e।">
<tanrei-color-input name="brand" value="#0f766e"
invalid-text="छह अंकों का हेक्स कोड डालें, जैसे #0f766e।"
picker picker-label="रंग चुनें"></tanrei-color-input>
</tanrei-field>वही फ़ील्ड हाथ से लिखा हुआ: एक फ़ील्ड, जिसके भीतर एक कलर इनपुट है
एक स्तर नीचे तब जाएँ जब आपको ऐसी व्यवस्था चाहिए जो कलर फ़ील्ड नहीं देता:
| आपको चाहिए | इस्तेमाल करें |
|---|---|
| लेबल, बॉक्स, सहायता और त्रुटि | कलर फ़ील्ड |
| फ़्रेम के भीतर, बॉक्स के बग़ल में या उसके नीचे अपनी कोई चीज़ | एक फ़ील्ड, जिसके भीतर एक कलर इनपुट और आपका अपना एलिमेंट है |
| सिर्फ़ बॉक्स, ऐसी पंक्ति या कॉलम में जो रंग का नाम पहले से देता है: किसी पैलेट के टोन, टेबल का कोई सेल | अकेला कलर इनपुट, जिसे नाम उसके अपने label से मिलता है |
एक स्तर नीचे जो बदलता है, वह यह है कि कौन-सी बात कहाँ कही जाती है। name और value कलर इनपुट पर होते हैं, जो तब वह कंट्रोल है जो फ़ॉर्म को मिलता है, और उसके इवेंट उसी पर सुने जाते हैं। label, error, disabled और ज़रूरी या वैकल्पिक होना फ़ील्ड पर ही रहते हैं, जो उन्हें कंट्रोल तक पहुँचाता है: इनपुट के अपने सेट न करें। कलर फ़ील्ड ऐसा कुछ नहीं करता जो हाथ से लिखे गए फ़ील्ड और कलर इनपुट नहीं करते।
एक ख़ाली कलर फ़ील्ड, सफ़ेद, काला, एक large, एक अक्षम, और सिर्फ़ बॉक्स, यानी कलर इनपुट, ऐसी पंक्ति में जो उसके रंग का नाम देती है
| भाग | यह क्या है |
|---|---|
| लेबल | कंटेनर के ऊपर (stacked), जहाँ उसे फ़ील्ड बनाता है, या उसके भीतर फ़्लोट होता हुआ (filled, outlined), जहाँ उसे कलर इनपुट बनाता है। यही एक्सेसिबल नाम है, चाहे वह दिखाया गया हो या labelHidden से छिपाया गया हो |
| ज़रूरी या वैकल्पिक का निशान | लेबल के बाद: required के लिए ज़रूरी का टैग, तारांकन या कुछ नहीं, और optional के लिए वैकल्पिक का टैग |
| स्वॉच | कंटेनर की शुरुआत में मान का नमूना: एक छोटा चौकोर, जो ठीक मान के रंग से भरा है, एक बारीक रेखा के भीतर। ख़ाली होने पर वह अकेली बारीक रेखा है। वह कोई कंट्रोल नहीं है |
| इनपुट | टेक्स्ट के रूप में मान। एक पंक्ति, जो स्क्रॉल होती है |
| पिकर बटन | picker के साथ: अंत में सिर्फ़ आइकन वाला एक text बटन, जिसका नाम pickerLabel से आता है |
| सहायक टेक्स्ट | सहायता की एक पंक्ति, जो वहीं से शुरू होती है जहाँ से मान का टेक्स्ट, स्वॉच के बाद। फ़ील्ड के त्रुटि में रहते त्रुटि टेक्स्ट उसकी जगह ले लेता है (जहाँ डिज़ाइन सिस्टम दोनों रखता है, वहाँ उसके नीचे): जब तक error true है तब तक errorText, और जब तक कमिट किया गया टेक्स्ट रंग नहीं है तब तक invalidText, या जहाँ invalidText ख़ाली है वहाँ errorText |
तीनों वेरिएंट और तीनों साइज़, small (32), medium (40) और large (56), टेक्स्ट फ़ील्ड के हैं। डिफ़ॉल्ट सिस्टम के साथ सिर्फ़ stacked आता है। स्वॉच वहाँ रहता है जहाँ टेक्स्ट फ़ील्ड का शुरुआती आइकन रहता है, उसी आइकन के साइज़ में, इसलिए शुरुआती आइकन वाले टेक्स्ट फ़ील्ड के नीचे रखे कलर फ़ील्ड के शुरुआती किनारे उससे मिलते हैं।
स्वॉच में कुछ नहीं मिलाया जाता: न होवर, न त्रुटि का टिंट, न शैडो। जो नमूना पॉइंटर के नीचे बदलता है, वह ग़लत नमूना है। अक्षम होने पर उसका फ़िल ज़्यादा फीका बनता है और उसका किनारा बना रहता है।
| कब | क्या होता है |
|---|---|
| व्यक्ति टाइप करता है, पेस्ट करता है या बोलकर लिखवाता है | न कुछ ठुकराया जाता है, न दोबारा लिखा जाता है। पूरा टेक्स्ट पढ़ा जाता है: वह रंग है तो value वही रंग है, वरना ख़ाली। value बदलने पर input फ़ायर होता है |
| फ़ोकस बाहर जाता है, या Enter | टेक्स्ट कमिट होता है। रंग को मान के अपने रूप में दोबारा लिखा जाता है। मान पिछली बार कमिट किए गए मान से अलग हो तो change फ़ायर होता है |
| कमिट किया गया टेक्स्ट रंग नहीं है | टेक्स्ट बना रहता है। फ़ील्ड त्रुटि में आ जाता है और invalidText दिखाता है, और entryerror फ़ायर होता है। अगले संपादन पर त्रुटि ख़त्म हो जाती है |
| टेक्स्ट ख़ाली है | value ख़ाली है। यह कभी फ़ील्ड की अपनी त्रुटि नहीं है |
प्रॉडक्ट value सेट करता है |
वही रंग दिखाया जाता है, चाहे जो भी टाइप किया गया हो। कोई इवेंट फ़ायर नहीं होता |
टेक्स्ट तब रंग के रूप में पढ़ा जाता है जब, आसपास के स्पेस छोड़कर, वह ठीक छह हेक्साडेसिमल अंक हो, बड़े या छोटे अक्षरों में, # चिह्न के साथ या उसके बिना: 0F766E, #0f766e और #0F766E , तीनों #0f766e हैं।
बाक़ी सब कुछ रंग नहीं है: तीन अंक (#0f7), आठ अंक (#0f766e80), कोई नाम (teal), कोई फ़ंक्शनल नोटेशन (rgb(15, 118, 110))। टाइप करते समय तीन अंक रंग नहीं होते, क्योंकि टेक्स्ट छह तक पहुँचने के रास्ते में उनसे होकर गुज़रता है; टेक्स्ट कमिट होने पर उन्हें CSS की तरह, हर अंक को दोहराकर छह अंकों के रूप में पढ़ा जाता है: #0f7 बन जाता है #00ff77। न अल्फ़ा है, न वाइड-गैमट रंग।
जब तक व्यक्ति टाइप कर रहा है, कुछ रिपोर्ट नहीं किया जाता। एंट्री की त्रुटि तभी उठती है जब वह कमिट करता है।
picker के साथ, फ़ील्ड अपने अंत में एक बटन दिखाता है। उसे सक्रिय करने पर pickerrequest फ़ायर होता है, जिसके साथ मान आता है।
| प्रॉडक्ट | क्या होता है |
|---|---|
| कुछ नहीं करता | फ़ील्ड ब्राउज़र का अपना कलर पिकर पेश करता है। हर चुनाव व्यक्ति का किया हुआ संपादन है: टेक्स्ट, स्वॉच, input। पिकर बंद होने पर change फ़ायर होता है और फ़ोकस पिकर बटन पर रहता है |
| अनुरोध रद्द करता है | फ़ील्ड कुछ पेश नहीं करता। प्रॉडक्ट अपनी सरफ़ेस खोलता है, फ़ील्ड से ऐंकर की हुई, और value को चुने गए रंग पर सेट करता है। बंद होने पर वह सरफ़ेस फ़ोकस को पिकर बटन पर लौटाती है |
पिकर बटन दिखने पर स्वॉच पर दबाने से पिकर खुलता है, जैसे बटन दबाने से खुलता है; फ़ोकस इनपुट पर नहीं जाता, और कीबोर्ड का रास्ता वही बटन रहता है। बटन न हो तो स्वॉच पर दबाने से फ़ोकस इनपुट पर जाता है, जैसे फ़ील्ड पर कहीं और दबाने से।
- फ़ील्ड से: प्रॉपर्टी
label,labelHidden,supportingText,errorText,error,disabled,required,optional,requiredMark,requiredTextऔरoptionalText; स्लॉटlabel-icon; टोकनcomp.field.*। - कलर इनपुट से: प्रॉपर्टी
variant,size,value,invalidText,pickerऔरpickerLabel; इवेंटinput,change,pickerRequestऔरentryError; टोकन: बॉक्स के लिएcomp.input-box.*, जिन्हें हर इनपुट बॉक्स पढ़ता है, और स्वॉच के लिएcomp.color-input.*।
कलर इनपुट के अपने label, labelHidden, error और disabled होते हैं। कलर फ़ील्ड इन्हें सेट नहीं करता: उसका label फ़ील्ड का है, जो इनपुट को नाम देता है और filled या outlined फ़ील्ड में वही है जो बॉक्स में फ़्लोट होता है।
कलर फ़ील्ड का अपना कोई टोकन नहीं है। उसका बॉक्स कलर इनपुट के टोकन पढ़ता है, और उसकी पंक्तियाँ, यानी लेबल, निशान, सहायता और त्रुटि, फ़ील्ड के टोकन पढ़ती हैं, वे जहाँ भी सेट हों। नीचे की टेबल में फ़ील्ड के टोकन हैं। किसी एक इंस्टेंस को बदलने के लिए, उस पर सदस्य का टोकन सेट करें:
<tanrei-color-field label="ब्रैंड का रंग"
style="--tanrei-comp-field-label-gap: 12px"></tanrei-color-field>संरचना
संरचना
stacked-empty बनाता है, उसी के ऊपर बनाया गया।| भाग | विवरण |
|---|---|
1 field | The Field: the label row with its glyph and its requirement mark, and the supporting row with the help and the error text. In a look whose input floats the label it draws no label row. |
2 color-input | The color input, as the Field's one control: the box, the swatch, the value as text, the picker button, and the label that floats in the box in the looks that float one. |
प्रॉपर्टी
| प्रॉपर्टी | टाइप | डिफ़ॉल्ट | विवरण |
|---|---|---|---|
variant | stacked | filled | outlined | "stacked" | The text input's three looks, so that a color input is drawn as the text inputs beside it. Stacked is a filled box that shows focus and error with a line inside its edge and draws no label: the label of the Field that frames it stands above it. Filled and outlined float the label inside the box. Use one style per form. A design system may leave some out (the Tanrei system ships stacked only) or add values. — Color input |
size | small | medium | large | "medium" | Minimum height of the container: stacked 32 / 40 / 56, as tall as a Button of the same size, so that the box and a Button side by side in one row stand as tall as each other; filled and outlined 40 / 48 / 56, which hold the label that floats inside them. These are the text input's three sizes, small for a bar, a toolbar or a dense row of controls. The hit area always meets the minimum target. A design system may add values. — Color input |
value | string | "" | The color the input holds: a number sign and six hexadecimal digits in lowercase ("#0f766e"), an opaque sRGB color; or empty for no color. It is never a half-typed text: while the input holds something that is not a color, value is empty. — Color input What the color field reports as its own is the value its color input holds, in that value's own form (CLF-43, CLI-16, CLI-21). |
label | string | "" | Names the control, visibly and to assistive technology. Required, unless the control names itself (a checkbox or a switch with its own label): then leave it empty and the field adds only help and an error. — Field Names the color input. In a filled or outlined look the input draws it, floating in its box, and the Field draws no label row (FLD-25, CLI-15). |
labelHidden | boolean | false | Does not draw the label, which stays the accessible name. For a control whose visible label is elsewhere (a table column, a toolbar). — Field Hides the label wherever it would be drawn: the Field's row, or the input's floating label (FLD-25). |
supportingText | string | "" | Help shown below the control and given to assistive technology as the control's description. While the field is in error it gives way to errorText, unless the design system keeps both (comp.field.error-text.placement append). — Field |
errorText | string | "" | Shown while error is true, in supportingText's place — or below it, which then stays, where the design system's comp.field.error-text.placement is append: what is wrong and how to put it right, in words. — Field |
error | boolean | false | Puts the field in the error condition: the error text is drawn, the control is exposed as invalid and, where it has an error condition of its own, drawn in it. What a value means is the product's to validate; the field never sets this itself. — Field The Field puts its color input in the input's own error condition (FLD-8, CLI-9). |
disabled | boolean | false | Disables the control and draws the frame as disabled. Disable a framed control here, not on the control, so that its label follows. — Field The Field disables its color input, the picker button with it (FLD-14, CLI-31); the color field is then left out of its form (CLF-44). |
required | boolean | false | What the form asks of the control: true exposes it as required and draws the required mark beside the label. It never validates: a missing answer is the product's to report with error. — Field The Field exposes its color input as required (FLD-10, CLI-11). |
optional | boolean | false | Draws the optional tag after the label and adds optionalText to the control's description, because assistive technology has no state for it. Ignored while required is true: a control is never both. — Field |
requiredMark | auto | tag | asterisk | none | "auto" | How this control shows that it is required: tag is a small filled Tag with requiredText, asterisk is "*" after the label, none draws nothing and keeps the semantics. Auto takes comp.field.requirement.mark, which follows sys.behavior.requirement-mark, the system's one answer. Ignored unless required is true. — Field |
requiredText | string | "" | The text of the required tag, in the product's language ("Required", "必須"). The product's: Tanrei has no word for it. Empty reads the product's words; with neither, FLD-24 says what is drawn. — Field |
optionalText | string | "" | The text of the optional tag, in the product's language ("Optional", "任意"); also read to assistive technology as part of the description. The product's: Tanrei has no word for it. Empty reads the product's words. — Field |
invalidText | string | "" | The words for an input committed with a text that is not a color ("Enter six hexadecimal digits, like #0f766e"), in the product's language: given to the Field that frames the input, which shows them as its error text (CLI-20). While it is empty that Field shows its own errorText. — Color input Shown by the Field, in its supporting row (FLD-28). |
picker | boolean | false | Shows the picker button. Activated, it emits pickerRequest, and where the platform has a color picker of its own the input presents that picker unless the product cancelled the request. The input draws no picker surface itself. — Color input |
pickerLabel | string | "" | The accessible name of the picker button ("Choose color"). Required while picker is shown. — Color input |
स्लॉट
| स्लॉट | विवरण |
|---|---|
label-icon | A glyph before the label. — Field |
इवेंट
| इवेंट | विवरण |
|---|---|
input | The person changed the value — by an edit of the text that made it a color, another color or no color, or by a pick in the platform's picker; carries the new value. Not emitted when the product sets value, nor for an edit that leaves value as it was. — Color input |
change | The person committed a changed value: focus left the input, the action key was pressed, or the platform's picker closed; carries the value. — Color input |
pickerRequest | The person activated the picker button; carries the value. Cancelling it keeps the input from presenting the platform's picker: the product then presents its own surface and sets value to what was picked. — Color input |
entryError | The person committed a text that is not empty and is not a color; carries the text as typed and invalidText, the words the input has for it (empty where the product gave none: the Field that frames the input then shows its own errorText). — Color input |
स्टेट
व्यवहार
EARS रूप में लिखी गई आवश्यकताएँ। हर प्लैटफ़ॉर्म के इम्प्लीमेंटेशन को इन ID के आधार पर टेस्ट किया जाता है। आवश्यकताओं का पाठ स्पेक फ़ाइल से ज्यों का त्यों, अंग्रेज़ी में दिखाया गया है।
| ID | आवश्यकता |
|---|---|
CLF-43 | THE color field SHALL be a Field that frames one color input, and nothing else. It SHALL give label, labelHidden, supportingText, errorText, error, disabled, required, optional, requiredMark, requiredText and optionalText to its Field and variant, size, value, invalidText, picker and pickerLabel to its color input, each unchanged; SHALL hold the label-icon slot for its Field; and SHALL emit its color input's events as its own, each once. THE color field SHALL be as wide as the place it stands in, and its color input SHALL fill it: it is a block with no width of its own, as its Field is (FLD-1), around a control that fills the width it is given (CLI-44). Its value SHALL at every moment be the value its color input holds — a color in the value's own form, or the empty string (CLI-16) — and not the text the product set where the two differ (CLI-21). It SHALL draw no part of its own, hold no state of its own and have no token of its own: what it shows, how it behaves and what it exposes to assistive technology SHALL be exactly what that Field and that color input do when a product places the one in the other (FLD-1 to FLD-28; CLI-1 to CLI-44) — the label row and its requirement mark (FLD-2 to FLD-6), or the label that floats in the box with the Field's row left out (FLD-25, CLI-15, CLI-7); the supporting row, started at the value's text, after the swatch (FLD-7 to FLD-9, FLD-26, CLI-43); the name, the description and the states (FLD-10, FLD-11, FLD-14, CLI-11); and the entry error of a text that is not a color, shown in the Field's row (FLD-28, CLI-20). |
CLF-44 | WHERE the platform has forms (the web) THE color field SHALL be the one control the form sees: it SHALL take name, submit its color input's value, reset to the value it was first given, restore it on navigation, report to the form's constraint validation exactly what its color input would report there (CLI-11, CLI-20), and be left out WHILE disabled is true or a disabled group of the form holds it; its color input and its Field SHALL take no part in the form themselves. WHEN the action key asks for the form's submission (CLI-19) the form asked SHALL be the color field's own. |
CLF-45 | WHEN the color field is given focus — by the product, by a press on any part of it that FLD-12 or CLI-24 gives to the input, or by a form that reports its validity — THE color field SHALL pass the focus to the input of its color input, never to the picker button, and SHALL add no stop to the focus order: the stops inside it are its color input's, in that input's order (the input, then the picker button while it is shown, CLI-13). WHILE focus is anywhere inside it, the picker button included, THE color field SHALL count as focused for its Field, whose rows take their focused colors (FLD-13); the box takes its own only WHILE its input has focus (CLI-22). WHEN a picker the color input presented closes, focus SHALL be on the picker button (CLI-29), inside the color field. |
CLF-46 | IF the color field is placed in a Field THE color field SHALL in debug builds report that it is a field already and that the bare control is the color input, and both SHALL still render (FLD-15). WHILE it stands in a field group THE color field SHALL follow that group's disabled, through its own Field, and take nothing else from the group (FGR-20). |
CLF-47 | THE color field SHALL have no words of its own and SHALL read none: requiredText and optionalText are read by its Field (FLD-24), each from the instance's prop and then from the product's words; invalidText and pickerLabel are the instance's alone and are given to its color input as they are (CLI-42). |
CLF-48 | WHERE the platform has ARIA attributes (the web), WHEN the product sets an aria- attribute on the host, by the attribute or by the ARIA property that reflects it, THE color field SHALL move it to the data-aria- attribute of the same name, so that the host is no second node with its name, description or state, and SHALL expose it on the element that carries its role — an id reference by the elements it names in the host's tree or a tree around it, an error message as part of the description while the color field is invalid — except those the color field owns (aria-label, aria-labelledby, aria-disabled), which it SHALL move and not expose: its name is label (CLF-43). WHEN the product removes the aria- attribute or its data-aria- twin, or sets the ARIA property that reflects it (ariaLabel, ariaDescribedByElements…) to null, THE color field SHALL take it off that element. WHEN the product sets an aria- attribute the color field owns THE color field SHALL report it in debug builds. |
प्लैटफ़ॉर्म के अनुसार नामों का मिलान
पैरिटी का मतलब एक जैसे API नहीं है। हर प्लैटफ़ॉर्म एक ही कॉन्ट्रैक्ट को अपने तरीक़े से व्यक्त करता है।
| स्पेक | Web | SwiftUI | Jetpack Compose | Flutter | React Native |
|---|---|---|---|---|---|
| कंपोनेंट | tanrei-color-field | TanreiColorField | TanreiColorField | TanreiColorField | ColorField |
variant · प्रॉपर्टी | variant | variant | variant | variant | variant |
size · प्रॉपर्टी | size | size | size | size | size |
value · प्रॉपर्टी | value | hex | value | controller | value |
label · प्रॉपर्टी | label | label | label | labelText | label |
labelHidden · प्रॉपर्टी | labelHidden | labelsHidden | labelHidden | labelHidden | labelHidden |
supportingText · प्रॉपर्टी | supportingText | supportingText | supportingText | helperText | supportingText |
errorText · प्रॉपर्टी | errorText | errorText | errorText | errorText | errorText |
error · प्रॉपर्टी | error | error | isError | isError | error |
disabled · प्रॉपर्टी | disabled | disabled | enabled | enabled | disabled |
required · प्रॉपर्टी | required | isRequired | required | required | required |
optional · प्रॉपर्टी | optional | isOptional | optional | optional | optional |
requiredMark · प्रॉपर्टी | requiredMark | requiredMark | requiredMark | requiredMark | requiredMark |
requiredText · प्रॉपर्टी | requiredText | requiredText | requiredText | requiredText | requiredText |
optionalText · प्रॉपर्टी | optionalText | optionalText | optionalText | optionalText | optionalText |
invalidText · प्रॉपर्टी | invalidText | invalidText | invalidText | invalidText | invalidText |
picker · प्रॉपर्टी | picker | showsPicker | onPickerRequest | onPickerRequest | onPickerRequest |
pickerLabel · प्रॉपर्टी | pickerLabel | pickerLabel | pickerContentDescription | pickerSemanticLabel | pickerAccessibilityLabel |
input · इवेंट | input | hex | onValueChange | onChanged | onValueChange |
change · इवेंट | change | onCommit | onCommit | onCommit | onEndEditing |
pickerRequest · इवेंट | pickerrequest | onPickerRequest | onPickerRequest | onPickerRequest | onPickerRequest |
entryError · इवेंट | entryerror | onEntryError | onEntryError | onEntryError | onEntryError |
| टिप्पणियाँ | The tag tanrei-color-field, the class TanreiColorField, the React name ColorField. The element is composed as every composed element on the web is (the web package's README, Composed elements); what follows is what is particular to it. Members: <tanrei-field> holding one <tanrei-color-input> in its default slot; the product places none. The host is display: block. Value member: tanrei-color-input. The host is the form's element — name, the value and its state, validity anchored on the input, reset to the value attribute, restore, form, a disabled fieldset — and the input inside has no name. Props, set as properties on the member each is from. On the Field: label, labelHidden, supportingText, errorText, error, disabled, required, optional, requiredMark, requiredText, optionalText. On the color input: variant, size, value, invalidText, picker, pickerLabel. Attributes are the members' own, kebab-case: label-hidden, supporting-text, error-text, required-mark, required-text, optional-text, invalid-text, picker-label. Props of one name on both members — label, labelHidden, error, disabled — are the Field's; the input's are never set by the element and reach the input through the connection. Events: input, change, pickerrequest and entryerror are the color input's own composed events and leave by themselves, with the host as their target and value already new; pickerrequest stays cancelable from outside, and the input reads the result of its own dispatch before it opens the browser's picker. None is stopped and none is copied. Their detail types are the member's, re-exported: TanreiColorInputPickerRequestDetail, TanreiColorInputEntryErrorDetail. The color input changes a value the product sets without an event — it holds 0F766E as #0f766e, and a text that is not a color as empty (CLI-21) — so the host's value is the value member's at every moment, read back changed with no event (CLF-43). Slots: label-icon is passed to the Field by a slot element of the same name, rendered only while the host has a child for it. The element has no default slot. Parts: the member hosts are field and color-input. Exported from the Field: label, label-icon, requirement-label, supporting-text. Exported from the color input: container, outline, active-indicator, label, requirement-label, swatch, input, picker-button. Two names collide, label and requirement-label. Each is exported with its member's name before it, always (field-label, color-input-label, field-requirement-label, color-input-requirement-label), and under the bare name from both members as well, because the two are one thing to a person and are never drawn at once: FLD-25 is the sentence that holds it. Focus: the shadow root does not delegate. focus() and blur() call the color input's; a press on the label row focuses the input by FLD-12, a press on the box by CLI-24, and a press on the help does nothing. The browser's picker is opened by the color input from inside its own shadow root, in the user activation of the press on its picker button: two shadow roots deep, which showPicker() allows. The connection is the Field's with its control (FLD-25, FLD-26, FLD-28; CLI-43); the element takes no part in it. Parts and tokens of its own: none. The element writes no custom property: --tanrei-comp-field-*, --tanrei-comp-input-box-* and --tanrei-comp-color-input-* reach the members by inheritance, and one color field is set apart by setting any of them on the element. What its twin cannot do that it does: nothing. The twin: <tanrei-field label="Brand color" required supporting-text="Six hexadecimal digits, like #0f766e."><tanrei-color-input name="brand" value="#0f766e" picker picker-label="Choose color"></tanrei-color-input></tanrei-field>. Words: the element has none and reads none (CLF-47). | Not built on this platform yet: the color input as a view of its own and the color field as the Field around it, reading comp.input-box, comp.color-input and comp.field tokens. TanreiColorField(_ label:, hex: Binding<String>, showsPicker:, pickerLabel:, onCommit:, onPickerRequest:, onEntryError:); labelHidden follows the .labelsHidden() environment and disabled follows .disabled(_:). The text element, the system color picker and the swatch are the color input's and are in its note. The product's words are read by the Field from the \.tanreiWords environment value. | Not built on this platform yet: the color input as a composable of its own and the color field as the Field around it, reading comp.input-box, comp.color-input and comp.field tokens. Compose idiom, as TextField: TanreiColorField(value, onValueChange, label, …); the caller keeps value (state hoisting), enabled is the inverse flag and isError keeps Compose's name. The picker button is shown when onPickerRequest is not null. The rest is the color input's and is in its note. The product's words are read by the Field from LocalTanreiWords. | Not built on this platform yet: the color input as a widget of its own and the color field as the Field around it, reading comp.input-box, comp.color-input and comp.field tokens. Flutter idiom, as TextField and InputDecoration: labelText, helperText, errorText and enabled keep Flutter's names, enabled being the inverse flag. TanreiColorFormField wraps it as a FormField<String>. The rest is the color input's and is in its note. The product's words are read by the Field from the TanreiWords inherited widget. | Not built on this platform yet: the color input as a component of its own and the color field as the Field around it, reading comp.input-box, comp.color-input and comp.field tokens. <ColorField label="Brand color" value={value} onValueChange={setValue} />. The rest is the color input's and is in its note. The product's words are read by the Field from the TanreiWordsProvider context. |
टोकन
| टोकन | किसका एलियास | रिज़ॉल्व किया गया मान (लाइट) |
|---|---|---|
--tanrei-comp-field-counter-gap | sys.space.space200 | 16px |
--tanrei-comp-field-error-text-gap | sys.space.space50 | 4px |
--tanrei-comp-field-error-text-placement | — | 0 |
--tanrei-comp-field-label-icon-gap | sys.space.space100 | 8px |
--tanrei-comp-field-label-icon-size | sys.icon.small | 20px |
--tanrei-comp-field-label-gap | sys.space.space100 | 8px |
--tanrei-comp-field-motion-state-duration | sys.motion.role.state.default | 250ms |
--tanrei-comp-field-motion-state-easing | sys.motion.easing.state | cubic-bezier(0.2, 0, 0, 1) |
--tanrei-comp-field-requirement-asterisk-gap | sys.space.space25 | 2px |
--tanrei-comp-field-requirement-gap | sys.space.space100 | 8px |
--tanrei-comp-field-requirement-mark | sys.behavior.requirement-mark | 0 |
--tanrei-comp-field-standard-counter-color | sys.color.on-surface-variant | |
--tanrei-comp-field-standard-disabled-counter-color | — | |
--tanrei-comp-field-standard-disabled-error-text-color | — | |
--tanrei-comp-field-standard-disabled-error-counter-color | — | |
--tanrei-comp-field-standard-disabled-error-label-icon-color | — | |
--tanrei-comp-field-standard-disabled-error-label-color | — | |
--tanrei-comp-field-standard-disabled-error-required-asterisk-color | — | |
--tanrei-comp-field-standard-disabled-error-supporting-text-color | — | |
--tanrei-comp-field-standard-disabled-error-value-text-color | — | |
--tanrei-comp-field-standard-disabled-label-icon-color | — | |
--tanrei-comp-field-standard-disabled-label-color | — | |
--tanrei-comp-field-standard-disabled-required-asterisk-color | — | |
--tanrei-comp-field-standard-disabled-supporting-text-color | — | |
--tanrei-comp-field-standard-disabled-value-text-color | — | |
--tanrei-comp-field-standard-error-text-color | sys.color.error | |
--tanrei-comp-field-standard-error-counter-color | sys.color.on-surface-variant | |
--tanrei-comp-field-standard-error-label-icon-color | sys.color.on-surface-variant | |
--tanrei-comp-field-standard-error-label-color | sys.color.on-surface | |
--tanrei-comp-field-standard-error-required-asterisk-color | sys.color.primary | |
--tanrei-comp-field-standard-error-supporting-text-color | sys.color.on-surface-variant | |
--tanrei-comp-field-standard-error-value-text-color | sys.color.on-surface-variant | |
--tanrei-comp-field-standard-focused-counter-color | — | |
--tanrei-comp-field-standard-focused-error-text-color | — | |
--tanrei-comp-field-standard-focused-error-counter-color | — | |
--tanrei-comp-field-standard-focused-error-label-icon-color | — | |
--tanrei-comp-field-standard-focused-error-label-color | — | |
--tanrei-comp-field-standard-focused-error-required-asterisk-color | — | |
--tanrei-comp-field-standard-focused-error-supporting-text-color | — | |
--tanrei-comp-field-standard-focused-error-value-text-color | — | |
--tanrei-comp-field-standard-focused-label-icon-color | — | |
--tanrei-comp-field-standard-focused-label-color | — | |
--tanrei-comp-field-standard-focused-required-asterisk-color | — | |
--tanrei-comp-field-standard-focused-supporting-text-color | — | |
--tanrei-comp-field-standard-focused-value-text-color | — | |
--tanrei-comp-field-standard-label-icon-color | sys.color.on-surface-variant | |
--tanrei-comp-field-standard-label-color | sys.color.on-surface | |
--tanrei-comp-field-standard-required-asterisk-color | sys.color.primary | |
--tanrei-comp-field-standard-supporting-text-color | sys.color.on-surface-variant | |
--tanrei-comp-field-standard-value-text-color | sys.color.on-surface-variant | |
--tanrei-comp-field-supporting-text-gap | sys.space.space50 | 4px |
--tanrei-comp-field-value-text-gap | sys.space.space200 | 16px |
--tanrei-comp-field-label-typescale | sys.typescale.label | 500 14px/1.4286 |
--tanrei-comp-field-supporting-text-typescale | sys.typescale.label-small | 500 12px/1.3333 |
--tanrei-comp-field-value-text-typescale | sys.typescale.label | 500 14px/1.4286 |
फ़िक्स्चर
मानक रेंडरिंग। हर प्लैटफ़ॉर्म हर फ़िक्स्चर का स्नैपशॉट एक ही ID से लेता है, ताकि नतीजों की तुलना की जा सके।
variant: stacked (27)
stacked-empty
label: Brand color stacked-filled
value: #0f766e label: Brand color stacked-large
size: large value: #0f766e label: Brand color stacked-label-hidden
value: #0f766e label: Brand color labelHidden: true stacked-supporting
value: #0f766e label: Brand color supportingText: Six hexadecimal digits, like #0f766e. stacked-white
value: #ffffff label: Page background stacked-black
value: #000000 label: Text stacked-picker
value: #0f766e label: Brand color picker: true pickerLabel: Choose color stacked-picker-empty
label: Brand color picker: true pickerLabel: Choose color stacked-picker-large
size: large value: #0f766e label: Brand color picker: true pickerLabel: Choose color stacked-error
value: #fde047 label: Brand color errorText: Too light for white text. Choose a darke… error: true stacked-error-picker
value: #fde047 label: Brand color errorText: Too light for white text. Choose a darke… error: true picker: true pickerLabel: Choose color stacked-disabled
value: #0f766e label: Brand color disabled: true stacked-picker-disabled
value: #0f766e label: Brand color disabled: true picker: true pickerLabel: Choose color stacked-label-icon
value: #0f766e label: Brand color slots: label-icon stacked-required
value: #0f766e label: Brand color required: true requiredText: Required stacked-optional
label: Accent color optional: true optionalText: Optional stacked-required-asterisk
value: #0f766e label: Brand color required: true requiredMark: asterisk stacked-required-label-icon
value: #0f766e label: Brand color required: true requiredText: Required slots: label-icon stacked-required-error
label: Brand color errorText: Choose a brand color. error: true required: true requiredText: Required stacked-required-disabled
value: #0f766e label: Brand color disabled: true required: true requiredText: Required stacked-required-ja
value: #0f766e label: ブランドカラー required: true requiredText: 必須 picker: true pickerLabel: 色を選択 stacked-optional-ja
label: アクセントカラー supportingText: # と 6 桁の 16 進数で入力します。 optional: true optionalText: 任意 stacked-required-rtl
value: #0f766e label: لون العلامة required: true requiredText: مطلوب picker: true pickerLabel: اختيار اللون direction: rtl stacked-error-rtl
value: #fde047 label: צבע המותג errorText: בהיר מדי לטקסט לבן. בחרו צבע כהה יותר. error: true direction: rtl slots: label-icon ltr-label-rtl
value: #0f766e label: Brand color (HEX) supportingText: sRGB, 6 digits direction: rtl long-label
value: #0f766e label: The color of the primary buttons, the li… supportingText: Six hexadecimal digits after a number si… required: true requiredText: Required variant: filled (5)
filled-empty
variant: filled label: Brand color filled-filled
variant: filled value: #0f766e label: Brand color filled-picker
variant: filled value: #0f766e label: Brand color picker: true pickerLabel: Choose color filled-error
variant: filled value: #fde047 label: Brand color errorText: Too light for white text. Choose a darke… error: true filled-disabled
variant: filled value: #0f766e label: Brand color disabled: true variant: outlined (7)
outlined-empty
variant: outlined label: Brand color outlined-filled
variant: outlined value: #0f766e label: Brand color outlined-large
variant: outlined size: large value: #0f766e label: Brand color outlined-picker
variant: outlined value: #0f766e label: Brand color picker: true pickerLabel: Choose color outlined-error
variant: outlined value: #fde047 label: Brand color errorText: Too light for white text. Choose a darke… error: true outlined-disabled
variant: outlined value: #0f766e label: Brand color disabled: true outlined-required
variant: outlined value: #0f766e label: Brand color required: true requiredText: Required इससे जनरेट किया गया: specs/color-field.spec.json, tokens/comp/field.tokens.json, design/tokens/
- एलिमेंट के शैडो रूट में एक
<tanrei-field>रहता है, जिसके भीतर एक<tanrei-color-input>है, और कुछ नहीं। एलिमेंट को इंपोर्ट करने से दोनों डिफ़ाइन हो जाते हैं। - कलर फ़ील्ड फ़ॉर्म से जुड़ा एलिमेंट है। वह
nameलेता है औरvalueसबमिट करता है: रंग, या ख़ाली स्ट्रिंग। वहvalueऐट्रिब्यूट पर रीसेट होता है, और जब तकrequiredहै औरvalueख़ाली है, तब तक मान के न होने की रिपोर्ट करता है, और जब तक एंट्री की त्रुटि बनी है, तब तक ग़लत इनपुट की। उसके दोनों सदस्य फ़ॉर्म में कोई एंट्री नहीं जोड़ते। valueहमेशा कलर इनपुट का होता है:0F766Eके रूप में सेट किया गया मान#0f766eके रूप में वापस पढ़ा जाता है, और जो मान रंग नहीं है, वह ख़ाली स्ट्रिंग के रूप में।inputऔरchangeसादे इवेंट हैं:valueएलिमेंट से पढ़ें।pickerrequestऔरentryerrorCustomEvent हैं, पहलाdetail.valueके साथ, दूसराdetail.textऔरdetail.messageके साथ। ये कलर इनपुट के अपने इवेंट हैं, जिनका टार्गेट यही एलिमेंट है।detail.messageमेंinvalidTextआता है, और जहाँ आपने उसे नहीं दिया वहाँ वह ख़ाली रहता है, तब भी जब फ़ील्ड उसकी जगहerrorTextदिखा रहा हो।- भाग:
fieldऔरcolor-inputदोनों सदस्य हैं। उनके अपने भागों के नाम यहाँ वही हैं जो एक स्तर नीचे हैं:label-icon,supporting-text;container,outline,active-indicator,swatch,input,picker-button।labelऔरrequirement-labelवे हैं जो दिखाए जाते हैं, उन्हें जो भी सदस्य बनाए;field-label,color-input-label,field-requirement-labelऔरcolor-input-requirement-labelकिसी एक सदस्य वाले का नाम लेते हैं। - एलिमेंट पर ख़ुद फ़ोकस नहीं जा सकता और उसका कोई रोल नहीं है:
focus()इनपुट पर जाता है, पिकर बटन पर कभी नहीं। लेबल की पंक्ति, बॉक्स, स्वॉच (जब पिकर बटन न हो) या फ़्लोट होते लेबल पर दबाने से फ़ोकस इनपुट पर जाता है। सहायता या त्रुटि टेक्स्ट पर दबाने से कुछ नहीं होता। - जब तक फ़ोकस फ़ील्ड में कहीं भी है, पिकर बटन पर भी, लेबल और सहायता अपने फ़ोकस वाले रंग लेते हैं। बॉक्स अपने फ़ोकस वाले रंग सिर्फ़ तब लेता है जब फ़ोकस उसके इनपुट पर हो।
- उसे
labelसे नाम दें, और जहाँ लेबल नहीं दिखाना है वहाँ साथ मेंlabel-hiddenदें। उसेaria-labelसे कभी नाम न दें, जो यहाँ किसी चीज़ को नाम नहीं देता। - एलिमेंट का अपना कोई शब्द नहीं है।
requiredTextऔरoptionalTextतब तक ख़ाली हैं जब तक आप उन्हें न दें।requiredTextके बिना ज़रूरी फ़ील्ड वहाँ तारांकन दिखाता है जहाँ टैग होता। - ब्राउज़र का पिकर हर ब्राउज़र में अलग है: Chromium में पेज का एक पॉपअप, Firefox और Safari में सिस्टम की कलर विंडो। उसका रूप, उसका स्थान और उसकी कुंजियाँ ब्राउज़र की हैं।
- फ़ुल-विड्थ अक्षरों वाला टेक्स्ट (
＃０ｆ７６６ｅ) रंग के रूप में नहीं पढ़ा जाता। - एलिमेंट के डिफ़ाइन होने से पहले उसका कोई साइज़ नहीं होता। ऊँचाई के लिए जगह रखें।
| पहलू | कलर फ़ील्ड | टेक्स्ट फ़ील्ड |
|---|---|---|
| क्या रखता है | एक रंग, # और छह अंकों के रूप में |
कोई भी टेक्स्ट |
| क्या दिखाता है | टेक्स्ट के बग़ल में रंग का नमूना | टेक्स्ट |
| क्या जाँचता है | कि टेक्स्ट एक रंग है | कुछ नहीं |
जो रंग दिखाया जाता है और संपादित नहीं किया जाता, उसके लिए एक नमूना बनाएँ और उसके बग़ल में टेक्स्ट में उसका मान या नाम लिखें। कलर फ़ील्ड उस रंग के लिए है जिसे लोग तय करते हैं।
- ऐसा लेबल लिखें जो बताए कि रंग किसके लिए है, और फ़ॉर्म में उसे दिखता रहने दें।
- मान का रूप
supportingTextमें बताएँ। फ़ील्ड के त्रुटि में रहते भी वह टेक्स्ट बना रहता है, इसलिएinvalidTextमें उसे दोहराने की ज़रूरत नहीं। - जहाँ यह मायने रखता है, वहाँ
supportingTextमें रंग का नाम शब्दों में दें (“टील”)। हेक्साडेसिमल मान इस बारे में कम ही बताता है कि रंग कैसा दिखता है। - जब भी
pickerसेट हो,pickerLabelदें। - रंग का मतलब ख़ुद वैलिडेट करें, जैसे किसी बैकग्राउंड के मुक़ाबले उसका कंट्रास्ट या पहले से लिया जा चुका रंग, और उसे
errorऔरerrorTextसे बताएँ। - जिस पंक्ति में हर रंग का नाम पहले से है, जैसे किसी पैलेट के टोन, वहाँ कलर इनपुट इस्तेमाल करें: वह सिर्फ़ बॉक्स है, जिसे नाम उसके अपने
labelसे मिलता है।
- रंग को अकेले स्वॉच से न बताएँ। मान टेक्स्ट है; जो व्यक्ति दो नमूनों में फ़र्क़ नहीं कर पाता, वह दो अलग मान पढ़ता है।
- ख़ाली
valueको अपने आप में त्रुटि न मानें।requiredकभी वैलिडेट नहीं करता। - जब तक व्यक्ति टाइप कर रहा है,
aria-invalidयाerrorसेट न करें।changeयाentryerrorका इंतज़ार करें। - कलर फ़ील्ड को फ़ील्ड के भीतर न रखें। वह पहले से एक फ़ील्ड है; फ़ील्ड जिस कंट्रोल को फ़्रेम देता है, वह कलर इनपुट है।
- रोल
textbox- लेबलिंग
- The color field adds nothing to what its members expose and coordinates nothing: the Field gives the color input its name, its description and its required, invalid and disabled states (FLD-8, FLD-10, FLD-11, FLD-14), and the color input carries them on its own element (CLI-11). Assistive technology meets one text box named by label whose value is the color as text, and, while picker is true, one button named by pickerLabel — exactly as it meets a Field around a color input written by hand.
- न्यूनतम टार्गेट
- दिखने वाला आकार छोटा होने पर भी हिट एरिया न्यूनतम टार्गेट साइज़ को पूरा करता है। minimum 32px · pointer 44px · spacing 8px · touch 48px
कीबोर्ड
| कुंजियाँ | क्रिया |
|---|---|
| Every key | The color input's (its accessibility block; CLI-13, CLI-19, CLI-28). The color field handles no key and adds no focus stop (CLF-45). |
टिप्पणियाँ
- One level down is the same thing: a Field with a color input in it. Every fixture has that pair as its twin, and the accessibility tree of the two is the same (CLF-43).
- On the web the two members stand in the color field's own shadow root, so the form meets the color field and not the input (CLF-44); focus passes through to the input (CLF-45).
- The color is never told by the swatch alone (WCAG 1.4.1), an error is always words (WCAG 3.3.1), and the swatch alone keeps its color in forced colors: each is the color input's or the Field's, and is said there (CLI-25, CLI-35, FLD-7, FLD-17).
इससे जनरेट किया गया: specs/color-field.spec.json, tokens/sys/measure.tokens.json
- इनपुट एक टेक्स्ट फ़ील्ड है। उसका नाम
labelहै, चाहे वह दिखाया गया हो या छिपाया गया हो, और उसका मान वह टेक्स्ट है जो वह दिखाता है। - दिखाया गया सहायक टेक्स्ट या त्रुटि टेक्स्ट उसका विवरण है, और जब तक फ़ील्ड वैकल्पिक है, उसके साथ
optionalText। - जब तक
errortrue है या एंट्री की त्रुटि बनी है, वह अमान्य के रूप में दिया जाता है, और जब तकrequiredसेट है, ज़रूरी के रूप में। - जो त्रुटि फ़ील्ड पर फ़ोकस रहते हुए आती है, उसे एक बार, बिना टोके (polite), पढ़कर सुनाया जाता है। वह फ़ोकस को कभी नहीं हटाती।
- स्वॉच सजावटी है और सहायक तकनीक से छिपा रहता है: रंग मान के टेक्स्ट से पता चलता है।
- पिकर बटन एक अलग बटन है, जिसका नाम
pickerLabelसे आता है, और जो डायलॉग खोलने वाले बटन के रूप में दिया जाता है। वह इनपुट के बाद फ़ोकस का एक पड़ाव है। ख़ुद फ़ील्ड को दिया गया फ़ोकस हमेशा इनपुट पर जाता है। - मान बदलने पर कुछ पढ़कर नहीं सुनाया जाता, और फ़ील्ड रंग का कोई नाम नहीं जोड़ता।
- जब तक इनपुट मेथड कंपोज़ कर रहा है, फ़ील्ड कुछ नहीं पढ़ता और कोई कुंजी नहीं सँभालता।
- फ़ील्ड का हिट एरिया न्यूनतम टार्गेट पूरा करता है, और पिकर बटन एक पूरा टार्गेट है।
- 200% टेक्स्ट पर लेबल और सहायता रैप होते हैं। मान एक पंक्ति में रहता है, और स्क्रॉल होता है; स्वॉच अपना साइज़ बनाए रखता है।
- फ़ोर्स्ड कलर्स में फ़ील्ड को एक किनारा मिलता है और वह व्यक्ति के रंग लेता है। अकेला स्वॉच मान का रंग रखता है, क्योंकि वही रंग दिखाना उसका काम है; उसका किनारा टेक्स्ट के रंग का होता है।
- दाएँ से बाएँ वाले लेआउट में फ़ील्ड मिरर होता है: स्वॉच दाईं ओर, पिकर बटन बाईं ओर। मान ख़ुद बाएँ से दाएँ ही रहता है।
वेब पर ज्ञात कमियाँ:
- ब्राउज़र का पिकर Tanrei का नहीं है: उसकी सुलभता ब्राउज़र की अपनी है।
- एलिमेंट के डिफ़ाइन होने से पहले कुछ नहीं दिखता।
- हर कलर फ़ील्ड को
labelदें। invalidTextऔरpickerLabelफ़ील्ड पर लिखें, पेज की भाषा में।requiredTextऔरoptionalTextफ़ील्ड पर दें, याsetWords({ requiredText, optionalText })से पूरे प्रॉडक्ट के लिए एक बार। देखें प्रॉडक्ट के शब्द।- रंग को ख़ुद वैलिडेट करें,
errorसेट करें, औरerrorTextऐसा लिखें कि वह बताए कि रंग कैसे ठीक किया जाए। - अगर आप अपना पिकर पेश करते हैं, तो उसे पिकर बटन से खोलें, उसे एक नाम दें, और उसके बंद होने पर फ़ोकस को बटन पर लौटाएँ।