कंट्रोल और पिकर

यह पृष्ठ अंग्रेज़ी से अनुवादित है। अंग्रेज़ी पृष्ठ पढ़ें

फ़ॉर्म फ़ील्ड अपने प्रकार से कंट्रोल चुनते हैं। .control(M::f, Control::...) उसे बदलता है और .lookup(M::f, action) फ़ील्ड को सर्वर पर खोज में बदल देता है। हर कंट्रोल भीतर से एक नेटिव फ़ॉर्म एलिमेंट है, इसलिए मान रनटाइम के साथ या बिना, एक ही तरह पोस्ट होते हैं, और हर कंट्रोल कीबोर्ड और स्क्रीन रीडर उपयोगकर्ताओं के लिए अपने ARIA पैटर्न का पालन करता है।

Form::of(Contact { quantity: 2, size: Size::Medium, ..Contact::default() })
    .lookup(Contact::product, find_samples)
    .row(|r| r.field(Contact::delivery).field(Contact::size))
    .control(Contact::delivery, Control::Radio)
    .control(Contact::size, Control::Segmented)
    .field(Contact::newsletter)
    .control(Contact::newsletter, Control::Switch)
    .field(Contact::note)
    .submit(t!("docs.live.send"), send_contact)

डिफ़ॉल्ट कंट्रोल

अन्य कंट्रोल

Rating

Control::Rating एक पूर्ण संख्या वाले फ़ील्ड को 1 से N तक तारों के रूप में दिखाता है, जहाँ N फ़ील्ड का max नियम है (नियम न हो तो 5, अधिकतम 10)। यह एक fieldset के भीतर नेटिव radio बटनों का समूह है जिसकी legend फ़ील्ड का लेबल है, इसलिए यह बिना स्क्रिप्ट के W3C APG radio group पैटर्न का पालन करता है: Tab समूह तक एक बार पहुँचता है, तीर कुंजियाँ ले जाती और चुनती हैं, और हर तारे का नाम उपयोगकर्ता की भाषा में "3 / 5" जैसा होता है। होवर करने पर पॉइंटर तक के तारे जल उठते हैं। सर्वर मान को किसी भी संख्या की तरह फ़ील्ड के नियमों से जाँचता है, इसलिए फ़ील्ड को min और max दें; Option<i64> पर required हो तो सभी तारे खाली छोड़ना अस्वीकार किया जाता है।

#[model]
pub struct Feedback {
    #[rule(required, min = 1, max = 5)]
    pub stars: Option<i64>,
}

Form::of(Feedback::default())
    .field(Feedback::stars)
    .control(Feedback::stars, Control::Rating)
    .submit(t!("feedback.send"), send_feedback)

Lookup

lookup उपयोगकर्ता के टाइप करते समय सर्वर पर रिकॉर्ड खोजता है। action LookupQuery लेती है और Page<LookupItem> लौटाती है; फ़ील्ड आईडी सहेजता है।

#[action(permission = "stock.product.read")]
pub async fn find_samples(q: LookupQuery, store: SampleStore) -> Result<Page<LookupItem>> {
    let items = store.all()?.into_iter().map(|s| LookupItem::new(s.id.0, s.name).hint(s.code)).collect();
    Ok(q.apply(items))
}

.lookup_many(M::f, action) Vec<i64> फ़ील्ड के लिए यही करता है और चुने हुए को हटाने योग्य टैग के रूप में दिखाता है।

.lookup_columns(M::f, action, [t!("code"), t!("name"), t!("city")]) सूची में कई कॉलम दिखाता है। खोज अब भी सर्वर पर action के पास जाती है, हर कुंजी-दबाव की खोज पर उसकी अनुमति जाँची जाती है; हर आइटम अपने मान LookupItem::cells से देता है, शीर्षकों के क्रम में। LookupQuery::apply सेल में भी खोजता है। स्क्रीन रीडर हर विकल्प को "Code: C-2, Name: Mert Kaya, City: Ankara" के रूप में सुनते हैं। संकरी स्क्रीन पर कॉलम हर विकल्प के भीतर ऊपर-नीचे लग जाते हैं।

#[action(permission = "sales.customer.read")]
pub async fn find_customers(q: LookupQuery, store: CustomerStore) -> Result<Page<LookupItem>> {
    let items = store.all()?.into_iter().map(|c| LookupItem::new(c.id.0, c.name.clone()).cells([c.code, c.name, c.city]));
    Ok(q.apply(items.collect()))
}

मल्टी सेलेक्ट

#[choice] enum के Vec को मल्टी सेलेक्ट से संपादित किया जाता है: चुने हुए विकल्प हटाने के बटन वाली चिप के रूप में दिखते हैं, और एक combobox ऐसी सूची खोलता है जहाँ विकल्प चालू और बंद किए जाते हैं (aria-multiselectable वाला APG listbox, combobox के भीतर)। भीतर एक नेटिव <select multiple> है, इसलिए फ़ील्ड रनटाइम के बिना काम करता है। रनटाइम मान अल्पविराम से जोड़कर पोस्ट करता है (Email,Sms); सर्वर उन्हें एक-एक करके पढ़ता है, अज्ञात मान अस्वीकार करता है और दोहराव हटाता है। JSON में (API, AI टूल, डेटाबेस) फ़ील्ड विकल्प मानों का ऐरे है।

#[model]
pub struct Contact {
    #[rule(required)]
    pub channels: Vec<Channel>,
}

Form::of(contact).field(Contact::channels)

Ctrl+A (APG पैटर्न में सब चुनना) ब्राउज़र पर छोड़ा गया है, जैसा शॉर्टकट नीति माँगती है; चिप के हटाने वाले बटन टैब क्रम में हैं। सूची, चिप और lookup कॉलम को लगभग 1.7 KB gzip स्क्रिप्ट चाहिए और कोई अनुरोध नहीं; फ़ील्ड 3 नोड है और हर चुने विकल्प के लिए एक और।

Decimal और प्रतिशत

Decimal फ़ील्ड सटीक संख्याएँ रखते हैं: इनपुट, सर्वर, डेटाबेस और निर्यात के बीच कहीं फ़्लोटिंग पॉइंट नहीं। इनपुट टाइप करते समय संख्या को उपयोगकर्ता की भाषा में स्वरूपित करता है (तुर्की में 1.234,5678, अंग्रेज़ी में 1,234.5678) और फ़ील्ड के scale जितने दशमलव की अनुमति देता है; सर्वर उसे उसी भाषा में पढ़ता है और scale, precision, min और max फिर से जाँचता है।

#[model]
pub struct Terms {
    #[rule(precision = 12, scale = 4, min = 0)]
    pub rate: Decimal,
    #[rule(scale = 1, min = 0, max = 100)]
    pub discount: Option<Decimal>,
}

Form::of(terms).field(Terms::rate).field(Terms::discount).control(Terms::discount, Control::Percent)

Control::Percent मान को प्रतिशत बिंदुओं में रखता है: 12.5 अंग्रेज़ी में 12.5 % और तुर्की में %12,5 दिखता है और 12.5 के रूप में सहेजा जाता है। स्क्रीन रीडर इनपुट के विवरण से "percent" शब्द सुनते हैं।

मास्क्ड इनपुट

mask नियम वाला टेक्स्ट फ़ील्ड उपयोगकर्ता के टाइप करते समय अपना पैटर्न दिखाता है और केवल कच्चे अक्षर सबमिट करता है। पैटर्न ही नियम है: सर्वर टाइप किए गए लिटरल हटा देता है ((532) 123 45 67 बन जाता है 5321234567), A स्लॉट को बड़े अक्षरों में करता है और ऐसा मान अस्वीकार करता है जो हर स्लॉट न भरे। API कॉल और AI टूल कच्चा मान भेजते हैं और वही जाँच पाते हैं।

#[model]
pub struct Contact {
    #[rule(required, mask = "(999) 999 99 99")]
    pub phone: String,
    #[rule(mask = "AA99 9999 9999 9999 9999 9999 99")]
    pub iban: Option<String>,
}

रनटाइम के बिना फ़ील्ड कच्चे मान वाला सादा टेक्स्ट इनपुट है; उपयोगकर्ता उसे लिटरल के साथ या बिना टाइप कर सकते हैं।

पासवर्ड

Control::Password (साइन इन), Control::NewPassword (साइन अप, बदलाव) और Control::PasswordMeter (मज़बूती मीटर वाला नया पासवर्ड) ऐसे पासवर्ड इनपुट हैं जिन्हें सर्वर से कभी नहीं भरा जाता और ड्राफ़्ट में कभी नहीं रखा जाता। दिखाने और छिपाने का बटन APG टॉगल बटन पैटर्न का पालन करता है: उसका नाम "पासवर्ड दिखाएँ" ही रहता है और aria-pressed बताता है कि टेक्स्ट दिख रहा है या नहीं। सबमिट होते समय फ़ॉर्म पासवर्ड को फिर छिपा देता है।

मीटर एक संकेत है जो ब्राउज़र में लंबाई, वर्णों के प्रकार और स्पष्ट पैटर्न से गणना होकर चार पट्टियों और एक टेक्स्ट ("मज़बूती: अच्छी") के रूप में polite लाइव रीजन में दिखता है। सर्वर क्या स्वीकार करता है, यह फ़ील्ड के नियम (min_len, मॉडल का validate फ़ंक्शन) तय करते हैं, मीटर कभी नहीं।

कीबोर्ड

बजट और जाँचें

तारीख़ और समय पिकर

पिकर उपयोगकर्ता के प्रारूप में टाइप किया इनपुट लेते हैं और कैलेंडर या समय सूची खोलते हैं। DateOptions सीमाएँ तय करता है: .no_weekends(), .week_numbers(), .step_minutes(15)। .range(from, to) दो तारीख़ फ़ील्ड को इस महीने जैसे प्रीसेट वाले एक रेंज पिकर में जोड़ता है। लाइव उदाहरण समय और भाषाएँ पर है।