GrapesJS Styles

GrapesJS Styles — FAQ

GrapesJS स्टाइल मैनेजर क्या है?

यह वह पैनल है जो चयनित घटक के लिए CSS लिखता है। गुणों को सेक्टरों में बांटा जाता है - टाइपोग्राफी, सजावट, आयाम, फ्लेक्स - और प्रत्येक फ़ील्ड मैप CSS प्रॉपर्टी के लिए। प्रबंधक इनलाइन शैलियाँ सेट नहीं करता है: यह संपादक के CSS संगीतकार में नियम लिखता है, यही कारण है कि आउटपुट एक वास्तविक स्टाइलशीट रहता है जिसे आप निर्यात कर सकते हैं।

मैं स्टाइल मैनेजर में कस्टम प्रॉपर्टी कैसे जोड़ूँ?

styleManager.sectors को init पर कॉन्फ़िगर करें, या रनटाइम पर editor.StyleManager.addSector और addProperty को कॉल करें। प्रत्येक संपत्ति एक नाम घोषित करती है, CSS संपत्ति जो वह लिखती है और एक प्रकार - चयन, रंग, स्लाइडर, समग्र या स्टैक। एक प्लगइन में सेक्टरों का एक सेट लपेटें और आपके पास अपनी डिज़ाइन भाषा के अनुरूप एक पुनः प्रयोज्य पैनल है।

मेरी शैली में परिवर्तन अन्य तत्वों को क्यों प्रभावित करते हैं?

क्योंकि स्टाइल मैनेजर चयनित CSS नियम को लक्षित करता है, तत्व को नहीं। यदि घटक में एक वर्ग है, तो संपादन उस वर्ग पर लागू होते हैं और इसलिए इसे साझा करने वाले प्रत्येक तत्व पर लागू होते हैं। केवल एक उदाहरण को स्टाइल करने के लिए Selector Manager को घटक की अपनी आईडी स्थिति में स्विच करें - यह GrapesJS स्टाइल में भ्रम का सबसे आम स्रोत है।

क्या मेरे पास प्रति डिवाइस ब्रेकपॉइंट अलग-अलग शैलियाँ हो सकती हैं?

हाँ। डिवाइस प्रबंधक ब्रेकप्वाइंट और स्टाइल मैनेजर जुड़े हुए हैं: टैबलेट या मोबाइल का चयन करने से बाद के संपादन उस डिवाइस की मीडिया क्वेरी में लिखते हैं। निर्यात किए गए CSS में वास्तविक मीडिया क्वेरी होती है। इस श्रेणी के प्लगइन्स एक स्पष्ट संकेतक जोड़ते हैं कि कौन सा ब्रेकपॉइंट सक्रिय है, जो गलती से डेस्कटॉप शैलियों को संपादित करने से रोकता है।

क्या स्टाइल मैनेजर हेक्स मानों के बजाय डिज़ाइन टोकन का उपयोग कर सकता है?

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