JS SDK

JS SDK

यह पृष्ठ AI उपकरणों का उपयोग करके अनुवादित किया गया है और इसमें त्रुटियाँ हो सकती हैं। सबसे सटीक और अद्यतन विवरण के लिए, कृपया मूल अंग्रेजी संस्करण देखें।

पूर्वापेक्षा

JS https://js.zohocdn.com/projects/js/client_sdk.min.js को निम्नलिखित SDK विधियों को कॉल करने से पहले अपने कोड में शामिल करें।
CSS https://css.zohocdn.com/projects/styles/zps-extn/client_sdk.css को Zoho Projects शैली का उपयोग करने के लिए अपने कोड में शामिल करें।

init

एक्सटेंशन को प्रारंभ करता है।


zohoprojects.init().then(function(){});
 
शुरुआत में इस विधि को कॉल करना आवश्यक है क्योंकि अन्य SDK विधियाँ इसके कॉल के बाद ही काम करेंगी। जब init लोड हो रहा है और आप अन्य फ़ंक्शन का उपयोग करना चाहते हैं, तो आप इसे init फ़ंक्शन के भीतर उपयोग कर सकते हैं।


zohoprojects.init().then(function () {
      zohoprojects.get("portal.name").then(function (response)
      });

metadata

एक्सटेंशन के भुगतान और कॉन्फ़िगरेशन विवरण प्राप्त करता है।

zohoprojects.metadata().then(function(response)
{
      /* output
  {
      "data": {
       "configs": [
{
"name": "Name",
"type": "text",
"is_mandatory": true,
"is_secure": false,
"description": "Enter your name",
"value": "Helen Collins"
},
{
"name": "Employee ID",
"type": "text",
"is_mandatory": true,
"is_secure": false,
"description": "Enter your Emp. ID",
"value": "EMP08"
}
],
"payments_info": {
"edition": "trial"
},
"status": "success"
}
}
*/
});

context

वर्तमान स्थान का मॉड्यूल नाम और इकाई ID प्राप्त करता है। मॉड्यूल नाम 'tasks' या 'issues' है और इकाई ID संबंधित Task या समस्या की ID है।


zohoprojects.context().then(function(response)
{
/* output
{
"module_name": "tasks",
"entity_id": "27092000000031079"
}
*/
});

Notes हम विजेट स्थान 'app_settings', 'attachment_picker', 'blueprint_during' और 'top_band' स्थानों के लिए इकाई ID नहीं देते हैं।

get

वर्तमान स्थान के इंस्टेंस, वर्तमान उपयोगकर्ता, Portal, प्रोजेक्ट, Tasks और समस्याओं का विवरण प्राप्त करता है।


zohoprojects.get("task.id

").then(function(response)
{
/* output
{
"data": 27092000000031080,
"status": "success"
}
*/
});
निम्नलिखित get विधि में उपयोग की जा सकने वाली कुंजियों की सूची है:

इंस्टेंस

  • instances

वर्तमान उपयोगकर्ता

  • current_user

Portal

  1. portal.trial_enabled
  2. portal.settings
  3. portal.gmt_time_zone
  4. portal.project_count
  5. portal.role
  6. portal.avail_user_count
  7. portal.locale
  8. portal.project_prefix
  9. portal.available_projects
  10. portal.max_user_count
  11. portal.profile_id
  12. portal.name
  13. portal.id_string
  14. portal.bug_plural
  15. portal.plan
  16. portal.bug_plan
  17. portal.bug_singular portal.default
  18. portal.extensions
  19. portal.is_crm_partner
  20. portal.is_display_projectprefix
  21. portal.is_display_taskprefix
  22. portal.is_new_plan
  23. portal.layouts
  24. portal.link

प्रोजेक्ट

  1. project.is_strict
  2. project.role
  3. project.bug_count
  4. project.owner_id
  5. project.taskbug_prefix
  6. project.link
  7. project.description
  8. project.milestone_count
  9. project.updated_date_long
  10. project.task_count
  11. project.updated_date_format
  12. project.workspace_id
  13. project.billing_status
  14. project.key
  15. project.is_chat_enabled
  16. project.owner_name
  17. project.profile_id
  18. project.enabled_tabs
  19. project.name
  20. project.is_public
  21. project.layout_details
  22. project.status
  23. प्रोजेक्ट.अनुमतियाँ
  24. प्रोजेक्ट.IS_BUG_ENABLED
  25. प्रोजेक्ट.bug_defaultview
  26. प्रोजेक्ट.bug_prefix
  27. प्रोजेक्ट.cascade_setting
  28. प्रोजेक्ट.पूर्ण_पर
  29. प्रोजेक्ट.पूर्ण_पर_लंबा
  30. प्रोजेक्ट.निर्माण_तारीख
  31. प्रोजेक्ट.निर्माण_तारीख_प्रारूप
  32. प्रोजेक्ट.निर्माण_तारीख_लंबा
  33. प्रोजेक्ट.कस्टम_स्थिति_आईडी
  34. प्रोजेक्ट.आईडी_स्ट्रिंग
  35. प्रोजेक्ट.प्रोजेक्ट_अवलोकन_दिखाएँ
  36. प्रोजेक्ट.प्रारंभ_तारीख
  37. प्रोजेक्ट.प्रारंभ_तारीख_लंबा
  38. प्रोजेक्ट.अपडेट_तारीख
  39. प्रोजेक्ट.उपयोगकर्ता
  40. प्रोजेक्ट.कस्टम_फ़ील्ड्स
  41. प्रोजेक्ट.कस्टम_फ़ील्ड्स

Task

  1. Task.नाम
  2. Task.पूर्ण
  3. Task.निर्मित_द्वारा
  4. Task.प्राथमिकता
  5. Task.प्रतिशत_पूर्ण
  6. Task.प्रारंभ_तारीख
  7. Task.समाप्ति_तारीख
  8. Task.निर्भरता
  9. Task.अवधि
  10. Task.विवरण
  11. Task.लिंक
  12. Task.निर्मित_व्यक्ति
  13. Task.निर्माण_समय
  14. Task.निर्माण_समय_प्रारूप
  15. Task.निर्माण_समय_लंबा
  16. Task.कस्टम_फ़ील्ड्स
  17. Task.गहराई (केवल Subtasks के लिए लागू)
  18. Task.अवधि_प्रकार
  19. Task.आईडी_स्ट्रिंग
  20. Task.टिप्पणी_जोड़ी_गई
  21. Task.फ़ोरम_संबद्ध
  22. Task.पुनरावृत्ति_सेट
  23. Task.अनुस्मारक_सेट
  24. Task.मूल_Task Task.कुंजी
  25. Task.अंतिम_अपडेट_समय
  26. Task.अंतिम_अपडेट_समय_प्रारूप
  27. Task.अंतिम_अपडेट_समय_लंबा
  28. Task.Milestone_आईडी
  29. Task.क्रम_अनुक्रम
  30. Task.मूल_Task_आईडी (केवल Subtasks के लिए लागू)
  31. Task.मूलTask_आईडी (केवल Subtasks के लिए लागू)
  32. Task.मूल_Task_आईडी (केवल Subtasks के लिए लागू)
  33. Task.स्थिति
  34. Task.Task_अनुसरणकर्ता
  35. Task.Task List
  36. Task.कार्य Task.कार्य_प्रकार
  37. Task.टिप्पणियाँ
  38. Task.Subtasks
  39. Task.कस्टम_फ़ील्ड्स
  40. Task.अनुलग्नक

समस्या

  1. समस्या.मॉड्यूल
  2. समस्या.निर्माण_समय_लंबा
  3. समस्या.कस्टम_फ़ील्ड्स
  4. समस्या.स्थिति
  5. समस्या.पुनरुत्पादन_योग्य
  6. समस्या.लिंक
  7. समस्या.गंभीरता
  8. समस्या.रिपोर्ट_करने_वाला_व्यक्ति
  9. समस्या.शीर्षक
  10. समस्या.झंडा
  11. issue.assignee_name
  12. issue.reporter_id
  13. issue.classification
  14. issue.created_time_format
  15. issue.closed
  16. issue.created_time
  17. issue.key
  18. issue.attachment_count
  19. issue.bug_number
  20. issue.bug_prefix
  21. issue.comment_count
  22. issue.escalation_level
  23. issue.id_string
  24. issue.reporter_email
  25. issue.reporter_non_zuser
  26. issue.updated_time
  27. issue.updated_time_format
  28. issue.updated_time_long
  29. issue.attachments
  30. issue.comments
  31. issue.views

Milestone

  1. milestone.closed
  2. milestone.comments_count
  3. milestone.created_time
  4. milestone.created_time_format
  5. milestone.created_time_long
  6. milestone.end_date
  7. milestone.end_date_format
  8. milestone.end_date_long
  9. milestone.flag
  10. milestone.has_comments
  11. milestone.id
  12. milestone.id_string
  13. milestone.is_workfield_removed
  14. milestone.last_updated_time
  15. milestone.last_updated_time_format
  16. milestone.last_updated_time_long
  17. milestone.link
  18. milestone.name
  19. milestone.owner_id
  20. milestone.owner_name
  21. milestone.owner_zpuid
  22. milestone.project
  23. milestone.sequence
  24. milestone.start_date
  25. milestone.start_date_format
  26. milestone.start_date_long
  27. milestone.status
  28. milestone.status_det

चुनी गई फाइलें

अपलोड होने की कतार में रखी गई फाइल को chosen_files में संग्रहीत किया जाता है। यह कुंजी केवल अटैचमेंट पिकर के लिए समर्थित है।
  • chosen_files

परिनियोजन प्रकार

वर्तमान डेटा सेंटर प्राप्त करें।

zohoprojects.get("deployment_type").then(function() {
/* output
com
*/
});

Profile

हम कुछ कुंजियों का समर्थन करते हैं जो Portal स्तर पर सभी Profiles को प्राप्त करती हैं और क्रमशः वर्तमान उपयोगकर्ता के Profile विवरण को प्राप्त करती हैं।
  1. all_profiles: Portal में सभी Profiles की जानकारी प्राप्त करता है।
  2. current_profile: वर्तमान उपयोगकर्ता के Profile विवरण को प्राप्त करता है।

थीम

Zoho Projects आपके Portal के लिए थीम का समर्थन करता है।
  • current_theme: वर्तमान थीम को प्राप्त करता है।
zohoprojects.get("current_theme").then(function() {
/* output
{mode: "default", zpPrimary: "255, 100, 0", zpPrimaryHover: "255, 247, 243"}
*/
});

Blueprint During

  • blueprint_during: During क्रिया के लिए निर्धारित मान को प्राप्त करता है
zohoprojects.get("blueprint_during").then(function(res) {
/* output
[ {field_id: "UDF_CHAR1", is_visible: true, is_pii: false, is_encrypted: false}
{field_id: "UDF_CHAR2", is_visible: true, is_pii: false, is_encrypted: false}]
*/
});

ट्रांज़िशन

वर्तमान ट्रांज़िशन के विवरण को प्राप्त करें।
  1. transition: वर्तमान ट्रांज़िशन की ID और नाम को प्राप्त करता है।
  2. blueprint: Blueprint की ID और नाम को प्राप्त करता है।

set

वर्तमान स्थान के किसी विशिष्ट Task या समस्या की विशेषताओं को अपडेट करता है।


var nameObj={name:"Create a new checklist"};
zohoprojects.set("task",nameObj).then(function(response)
{
/* output
{
"data": {
"tasks": [
{
"milestone_id": "2*******************2",
"link": {
"timesheet": {
"url": "https://p*************e.********.com/restapi/portal/5******7/projects/2****************9/tasks/2****************9/logs/"
},
"self": {
"url": "https://p*************e.********.com/restapi/portal/5******7/projects/2****************9/tasks/2****************9/"
}
},
"description": "",
"duration": "0",
"last_updated_time_long": 1542193097398,
"details": {
"owners": [
{
"name": "JOHN MARSH",
"id": "5************3"
}
]
},
"id": 2************0,
"key": "WEUT-T1",
"created_person": "Steve Banks",
"created_time_long": 1525668983347,
"created_time": "05-07-2018",
"is_reminder_set": false,
"is_recurrence_set": false,
"created_time_format": "05-07-2018 10:26:23 AM",
"subtasks": false,
"work": "0:00",
"custom_fields": [
{
"column_name": "UDF_LONG1",
"label_name": "Expense Amount",
"value": "24573"
},
{
"column_name": "UDF_LONG3",
"label_name": "sample",
"value": "0"
},
{
"column_name": "UDF_LONG2",
"label_name": "test",
"value": "200"
}
],
"isparent": false,
"work_type": "work_hrs_per_day",
"completed": false,
"priority": "None",
"created_by": "5******3",
"percent_complete": "0",
"last_updated_time": "11-14-2018",
"name": "Create a new checklist",
"id_string": "2************9",
="last_updated_time_format": "11-14-2018 04:28:17 PM",
"tasklist": {
"name": "General",
"id": "2************7"
},
"order_sequence": 1,
"status": {
"name": "Open",
"id": "2************1",
"type": "open",
"color_code": ""
}
}
]
},
"status": "success"
}
*/
});
Tasks के लिए set विधि में निम्नलिखित कुंजियों का उपयोग किया जा सकता है:

Tasks

  1. person_responsible
  2. owner_work
  3. work_type
  4. name
  5. start_date
  6. end_date
  7. start_time
  8. end_time
  9. percent_complete
  10. duration
  11. duration_type
  12. reminder
  13. priority
  14. description
  15. custom_fields (इस कुंजी का उपयोग केवल एक कस्टम फ़ील्ड बनाने के लिए किया जा सकता है।)
  16. clear_date
  17. index
  18. range
  19. json_string
  20. subtasks (इस कुंजी का उपयोग केवल एक Subtask बनाने के लिए किया जा सकता है।यहाँ क्लिक करें Subtasks के पैरामीटर जानने के लिए।)
निम्नलिखित कुंजियों का उपयोग मुद्दों के लिए set विधि में किया जा सकता है:

Issues

  1. title
  2. description
  3. assignee
  4. flag
  5. classification_id
  6. milestone_id
  7. due_date
  8. module_id
  9. severity_id
  10. reproducible_id
  11. status_id
  12. resolution
  13. affectedmile_id
निम्नलिखित कुंजियों का उपयोग प्रोजेक्ट को अपडेट करने के लिए set विधि में किया जा सकता है:

Projects

  1. name
  2. description
  3. status
  4. start_date
  5. end_date
  6. strict_project
  7. public
  8. group_id
  9. completed_on
  10. UDF_CHAR([1-9]|[1-2][0-9]|30)। उदाहरण:UDF_CHAR1
  11. UDF_TEXT([1-9]|1[0-5])
  12. UDF_LONG([1-9]|1[0-5])
  13. UDF_USER[1-5]
  14. UDF_DOUBLE([1-9]|[1-2][0-9]|3[0-5])
  15. UDF_DATE[1-5]
  16. UDF_ENCRYPT([1-9]|10)
  17. owner
  18. billing_method
  19. bill_status
  20. show_project_overview
  21. custom_status
निम्नलिखित कुंजियों का उपयोग Milestone को अपडेट करने के लिए set विधि में किया जा सकता है:

Milestone

  1. name
  2. start_date
  3. end_date
  4. owner
  5. flag
  6. budget
  7. threshold
  8. revenue_budge
अपने स्थान के साथ फ़ाइलों को जोड़ने के लिए linkfiles कुंजी का उपयोग करें। यह कुंजी निम्नलिखित स्थानों को समर्थन करती है:Task विवरण टैब, Issue विवरण टैब, अटैचमेंट पिकर। यह अधिकतम आकार 10 की एक ऐरे होनी चाहिए और निम्नलिखित फ़ील्ड अनिवार्य हैं: id, name, type, permanent_url, download_url, size, created_by, created_time; preview_url इमेज फ़ाइलों के लिए अनिवार्य है।
  • linkfiles

linkfiles=[{
"created_time": 1561028014712,
"id": "1LavBS5sauJ-AAFJZWp8Ch9Cp2ehydahk",
"type": "image/jpeg",
"created_by": "Patricia Boyle",
"permanent_url": "https://***************",
"size": 7409,
"preview_url": "https://******************",
"name": "sample-image.jpeg",
"download_url": "https://drive.google.com/a/web-mailhosting.com/uc?id=1LavBS5sauJ-AAFJZWp8Ch9Cp2ehydahk&export=download",
}]
zohoprojects.set('linkfiles', linkFiles).then(function (response) {
zohoprojects.invoke('attachment_picker.close');
});

Blueprint During

Blueprint ट्रांज़िशन के लिए During कार्रवाई को कॉन्फ़िगर करते समय मान सेट करें।

var sample = [ {field_id: "UDF_CHAR1", is_visible: true, is_pii: false, is_encrypted: false}
{field_id: "UDF_CHAR2", is_visible: true, is_pii: false, is_encrypted: false}];
zohoprojects.set("blueprint_during", sample).then(function(res) {
/* output
[ {field_id: "UDF_CHAR1", is_visible: true, is_pii: false, is_encrypted: false}
{field_id: "UDF_CHAR2", is_visible: true, is_pii: false, is_encrypted: false}]
*/
});


निर्यात स्थान

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


let paramObj = {
"custom_data": {
"path": "G/pics",
"portal_id": "89031033",
"project_id": "185977000000199005"
},
"display_data" : [
{
"name": "Path",
"value": "G's Drive",
"link": "https://drive.google.com/drive/folders/1e1xWqREV"
}, {
"name": "App Name",
"value": "G- Drive"
}
]
      
zohoprojects.set('execute', paramObj);

request

आपके एक्सटेंशन से plugin-manifest.json फ़ाइल में परिभाषित कनेक्शन का उपयोग करके एक तृतीय-पक्ष URL को आमंत्रित करता है। यदि कनेक्शन लिंक नाम निर्दिष्ट नहीं है तो इनपुट के आधार पर प्रतिक्रिया प्रदान की जाती है।


var file = document.getElementById("inputbox").files[0];
var file_detail = {
type: "GET",
files: [{
uploaddoc : file
type : "binary" //If the file is uploaded as binary
}],
parameters: {
fields: "id,name, thumbnailLink, webViewLink, webContentLink"
}
};
var url = "https://www.googleapis.com/drive/v3/files/1-QabBt69U8myXYRDVU-1YiCo2k-JWRfu";
zohoprojects.request(url, file_detail, "google_drive").then(function (response)
/* Output
{
"result": {
"webContentLink": "https://drive.google.com/uc?id=1-QabBt69U8myXYRDVU-1YiCo2k-JWRfu&export=download",
"name": "Eiffel_Tower_01.jpg",
"webViewLink": "https://drive.google.com/file/d/1-QabBt69U8myXYRDVU-1YiCo2k-JWRfu/view?usp=drivesdk",
"id": "1-QabBt69U8myXYRDVU-1YiCo2k-JWRfu",
"thumbnailLink": "https://lh3.googleusercontent.com/nhyq9mHrGDOZfNdQUHRj_xVlOoNAP5PEYkW4X2svGXKjVt53MvMGfjhQ2PlTv4cmv5-PgbjrR-c=s220"
},
"status": "success"
}
*/});
तर्क नाम डेटा प्रकार विवरण
URL string तृतीय-पक्ष URL जिसे आपके एक्सटेंशन से आमंत्रित किया जाना चाहिए।
object JSONObject कुंजी डेटा प्रकार मान
    type string "GET" / "POST" / "PUT" / "DELETE" / "PATCH"
    parameters JSONObject API के request पैरामीटर।
    headers JSONObject API के headers।
    body JSONObject

API का body।

 

    files JSONArray

फ़ाइल अपलोड करने के लिए पैरामीटर।

मान: वास्तविक फ़ाइल।

*यदि वास्तविक फ़ाइल अपलोड की जाती है तो body को अनदेखा किया जाएगा

*यदि आप type को binary के रूप में निर्दिष्ट करते हैं, तो फ़ाइल को binary के रूप में भेजा जाएगा। फ़ाइल के body को भी माना जाएगा

    replace_secure_config Boolean

यदि plugin-manifest.json फ़ाइल में is_secure पैरामीटर true है, तो इस पैरामीटर का मान true पर सेट करें।

आप URL और object पैरामीटर में इस प्रारूप में मान पास कर सकते हैं - {{name}} //कॉन्फ़िगरेशन का नाम

Zoho Projects कॉन्फ़िगरेशन मान को प्रतिस्थापित करेगा
नोट: डिफ़ॉल्ट मान false है।

connection_link_name string The connection link name zapps वेबसाइट से जेनरेट किया गया। आप connection link name को plugin-manifestसे प्राप्त कर सकते हैं।

फ़ंक्शन निष्पादित करें

Sigma में ट्रिगर के बिना एक कस्टम फ़ंक्शन निष्पादित करता है। फ़ंक्शन को निष्पादित करने के लिए Function_uuid और इसका संस्करण अनिवार्य हैं।
 
let customData = {"name":"Create a new checklist"};
zohoprojects.function.execute("c8a9e660-95e2-11ef-9d3c-2d653cc724d7", "1.0", customData).then(function(response){
/* आउटपुट
{ "result":{"output":"{}","Tasks":[],"outputType":"void","message":{}},
"unique_id":"c8a9e660-95e2-11ef-9d3c-2d653cc724d7",
"code":3009,
"function_id":1234567890,
"message":"Function Executed Successfully",
"status":"Success"
}
*/
});

Notes
कस्टम डेटा को पुनः प्राप्त करने के लिए नीचे दिया गया सिंटैक्स उपयोग करें:
metaData = data.getJSON("parameters").getJSON("metadata").toMap();
payload = metaData.getJSON("custom_data");

रंग प्रणाली (CSS वेरिएबल)

यह अनुभाग परिभाषित करता है थीम रंग वेरिएबल जो पूरे एप्लिकेशन में उपयोग किए जाते हैं।

सभी रंग हैं:

  • CSS वेरिएबल (--zp*) का उपयोग करके परिभाषित

  • rgb(var(--variable)) के माध्यम से उपभोग किए जाते हैं

  • समर्थन करने के लिए डिज़ाइन किए गए दिन मोड और गहरा मोड

 उपयोग पैटर्न   

color: rgb(var(--zpOnData));
background-color: rgb(var(--zpSurface));
border-color: rgb(var(--zpFormElementBdr));

 

 थीम मोड   

  • दिन मोड: गहरे पाठ के साथ हल्का UI

  • गहरा मोड: हल्के पाठ के साथ गहरा UI

 

रंग टोकन नीचे सूचीबद्ध हैं

 

CSS वेरिएबल नाम

दिन मोड
rgb() में

गहरा मोड
rgb() में

1

--zpPrimary

255, 100, 0

2

--zpPrimaryHover

255, 247, 243

40, 40, 40 !important

3

--zpOnPrimary

255, 255, 255

4

--zpBackground

255, 255, 255

0, 0, 0

5

--zpOnBackground

0, 0, 0

97, 97, 97

6

--zpSurface

255, 255, 255

0, 0, 0

7

--zpOnSurface

0, 0, 0

185, 185, 185

8

--zpSurfaceBdr

230, 230, 230

18, 18, 18

9

--zpSecondary

250, 250, 250

13, 13, 13

10

--zpOnSecondary

70, 70, 70

158, 158, 158

11

--zpSecondaryBdr

235, 235, 235

46, 46, 46

12

--zpData

255, 255, 255

18, 18, 18

13

--zpOnData

32, 33, 35

187, 187, 187

14

--zpOnDataLight

85, 85, 85

102, 102, 102

15

--zpPopupBase

255, 255, 255

30, 30, 30

16

--zpShadow

0, 0, 0

0, 0, 0

17

--zpBorderGrey

0, 0, 0

225, 225, 225

18

--zpMLTGroup

248, 248, 248

25, 25, 25

19

--zpOnMLTHeader

167, 169, 172

102, 102, 102

20

--zpOnMLTHeaderBdr

242, 242, 242

40, 40, 40

21

--zpFormElement

255, 255, 255

8, 8, 8

22

--zpFormElementBdr

232, 238, 244

23

--zpMandatory

255, 247, 247

39, 7, 7

24

--zpMandatoryBdr

119, 28, 33

25

--zpFreeze

50, 50, 50, .82

50, 50, 50, .82

26

--zpDisabled

241, 241, 241

62, 62, 62

27

--zpOnDisabled

142, 142, 142

152, 152, 152

28

--zpTooltip

0, 0, 0

222, 222, 222

29

--zpOnTooltip

242, 242, 242

0, 0, 0

30

--zpProgressGreen

135, 211, 124

108, 156, 101

31

--zpBlackOpac

0,0,0

255, 255, 255

32

--zpBulkUpdate

40, 40, 40

33

--zpDropDownShadow

-2px 0 15px rgba(0, 0, 0, .41)

 

रंग टोकन श्रेणियाँ  

  • प्राथमिक रंग   (उपयोग: बटन, सक्रिय स्थितियाँ, हाइलाइट्स )

    • --zpPrimary

    • --zpPrimaryHover

    • --zpOnPrimary

  • सतह और पृष्ठभूमि(उपयोग: पृष्ठ पृष्ठभूमि, कार्ड, कंटेनर्स)

    • --zpBackground

    • --zpSurface

    • --zpSecondary

  • पाठ रंग (उपयोग: लेबल, इनपुट पाठ, माध्यमिक पाठ)

    • --zpOnData

    • --zpOnSurface

    • --zpOnSecondary

    • --zpOnDataLight

  • फॉर्म तत्व (उपयोग: इनपुट, सिलेक्ट, सत्यापन स्थितियाँ)

    • --zpFormElement

    • --zpFormElementBdr

    • --zpMandatory

    • --zpMandatoryBdr

  • स्थिति रंग

    • --zpDisabled

    • --zpOnDisabled

    • --zpMandatory

    • --zpProgressGreen

  • ओवरलेज़ और प्रभाव

    • --zpPopupBase

    • --zpShadow

    • --zpDropDownShadow

    • --zpFreeze

फॉर्म UI CSS

  • सभी फॉर्म घटकों में सुसंगत UI/UX

  • CSS चर का उपयोग करके थीम-आधारित स्टाइलिंग

  • पहुँचयोग्यता और कई स्थितियों के लिए समर्थन

समर्थित घटक  

इनपुट फील्ड  

  • पाठ (text)

  • ईमेल (email)

  • पासवर्ड (password)

  • खोज (search)

  • संख्या (number)

अन्य तत्व  

  • <select> (मूल और कस्टम)

  • <textarea>

  • Select2 ड्रॉपडाउन

  • कस्टम चेकबॉक्स (.c-checkbox)

  • कस्टम रेडियो (.cradio)

 

स्थितियाँ और व्यवहार  

होवर:       बॉर्डर का रंग हल्के प्राथमिक में बदल जाता है

फ़ोकस:       मजबूत बॉर्डर हाइलाइट, रूपरेखा लागू की गई

अनिवार्य / अमान्य  

उपयोग:            <input type="text" mandatory="yes">

व्यवहार our: हाइलाइट की गई सीमा (--zpMandatoryBdr), हल्का पृष्ठभूमि रंग

अक्षम  

उपयोग:            <input type="text" disabled>

व्यवहार:    ग्रे पृष्ठभूमि, मंद पाठ रंग, cursor: not-allowed

केवल पढ़ने के लिए

उपयोग :    <input type="text" readonly>

व्यवहार: गैर-संपादन योग्य, डिफ़ॉल्ट कर्सर

प्लेसहोल्डर स्टाइलिंग  

::placeholder {
color: rgba(var(--zpOnDataLight), 0.5);
}

कस्टम Select (.select-style)  

उपयोग  

<div class="select-style">
<select>
<option>विकल्प 1</option>
</select>
</div>

विशेषताएँ  

  • कस्टम ड्रॉपडाउन तीर

  • मूल ब्राउज़र स्टाइलिंग को हटाता है

  • पूरी तरह प्रतिक्रियाशील

 

Checkbox घटक (.c-checkbox)  

उपयोग  

<div class="c-checkbox">
<input type="checkbox" id="chk1">
<label for="chk1">विकल्प</label>
</div>

विशेषताएँ  

  • कस्टम UI प्रदर्शन

  • समर्थन करता है:

    • जांचा गया / अनचेक किया गया

    • अनिश्चित

    • अक्षम

    • त्रुटि अवस्था

अनिश्चित उदाहरण  

<div class="c-checkbox">
<input type="checkbox" id="indChk">
<label for="indChk">आंशिक रूप से चयनित</label>
</div>

<script>
document.getElementById("indChk").indeterminate = true;
</script>

नोट  : इसे HTML के माध्यम से सेट नहीं किया जा सकता है, इसे JavaScript का उपयोग करके सेट किया जाना चाहिए

 

Radio घटक (.cradio)  

उपयोग  

<div class="cradio">
<input type="radio" id="r1" name="group">
<label for="r1">विकल्प</label>
</div>

विशेषताएँ  

  • कस्टम गोलाकार UI

  • सुचारु चयन एनिमेशन

  • अक्षम अवस्था समर्थन

 अक्षम अवस्था उदाहरण  

इनपुट  

<input type="text" value="Disabled Input" disabled>

Select  

<div class="select-style">
<select disabled>
<option>अक्षम Select</option>
</select>
</div>

टेक्स्टएरिया  

<textarea disabled>अक्षम टेक्स्टएरिया</textarea>

चेकबॉक्स  

<div class="c-checkbox">
<input type="checkbox" id="chk-disabled" disabled>
<label for="chk-disabled">अक्षम चेकबॉक्स</label>
</div>

रेडियो  

<div class="cradio">
<input type="radio" id="r-disabled" name="group" disabled>
<label for="r-disabled">अक्षम रेडियो</label>
</div>

चुना गया + अक्षम  

<div class="c-checkbox">
<input type="checkbox" id="chk2" checked disabled>
<label for="chk2">चुना गया और अक्षम</label>
</div>

 

उपयोगिता कक्षाएँ  

कक्षा

उद्देश्य

.formfield-style

सुसंगत फ़ील्ड ऊंचाई के लिए रैपर

.disabled-element

अक्षम शैली को मैन्युअली लागू करें

RTL (दाएँ से बाएँ भाषा) समर्थन  

दाएँ से बाएँ लेआउट को समर्थन करता है:

<body dir="rtl">

Select2 इंटीग्रेशन  

समर्थित कक्षाएँ:

  • .select2-container

  • .select2-choice

  • .select2-choices

पूर्ण उदाहरण


<form>
<input type="text" placeholder="नाम" mandatory="yes">

<div class="select-style">
<select>
<option>देश चुनें</option>
</select>
</div>

<textarea placeholder="संदेश"></textarea>

<div class="c-checkbox">
<input type="checkbox" id="agree">
<label for="agree">सहमति दें</label>
</div>

<div class="cradio">
<input type="radio" id="r1" name="g">
<label for="r1">विकल्प 1</label>
</div>
</form>