श्रेणी के अनुसार ब्राउज़ करें


GrapesJS Components

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

Loading...Loading...Loading...Loading...Loading...Loading...Loading...Loading...Loading...Loading...Loading...Loading...Loading...Loading...Loading...Loading...Loading...Loading...Loading...Loading...Loading...Loading...Loading...Loading...Loading...Loading...Loading...Loading...Loading...Loading...

लगभग GrapesJS Components

GrapesJS घटक आंतरिक मॉडल ऑब्जेक्ट हैं जो कैनवास पर प्रत्येक तत्व का प्रतिनिधित्व करते हैं - एक सादे div से लेकर एक जटिल इंटरैक्टिव विजेट तक। घटक प्लगइन्स नई घटक परिभाषाओं को पंजीकृत करके GrapesJS घटक प्रकार प्रणाली का विस्तार करते हैं: संबंधित शैलियों, लक्षणों और इंटरैक्शन व्यवहार के साथ कस्टम HTML संरचनाएं। एक घटक प्लगइन एक पूरी तरह से कॉन्फ़िगर किए गए अकॉर्डियन, एक टैब पैनल, एक डेटा तालिका, एक चार्ट विजेट, या एक मानचित्र एम्बेड जोड़ सकता है - प्रत्येक संपादक में एक एकल, चयन योग्य इकाई के रूप में व्यवहार करता है, जिसमें अपनी शैली पैनल प्रविष्टियां और संपादन योग्य गुण GrapesJS लक्षण इंटरफ़ेस के माध्यम से उजागर होते हैं। GJS.Market पर घटक पुस्तकालय विशेष रूप से एप्लिकेशन बिल्डरों और डैशबोर्ड संपादकों के लिए उपयोगी हैं जहां उपयोगकर्ताओं को कोड लिखे बिना जटिल इंटरैक्टिव तत्वों को रखने की आवश्यकता होती है। स्नैपशॉट HTML स्थिर ब्लॉक के विपरीत, घटक अपनी संरचना बनाए रखते हैं — ग्रिड घटक का आकार बदलना उसके चाइल्ड कॉलम को सही ढंग से पुनर्व्यवस्थित करता है; टैब लेबल संपादित करने से सभी संदर्भ स्वचालित रूप से अपडेट हो जाते हैं. घटक लाइब्रेरी चुनते समय, सत्यापित करें कि घटक परिभाषाओं में प्रतिक्रियाशील विशेषता नियंत्रण शामिल हैं और आपके कैनवास पूर्वावलोकन लोड के CSS ढांचे से मेल खाते हैं.

GrapesJS Components — FAQ

GrapesJS घटक क्या है?
एक घटक वह मॉडल ऑब्जेक्ट है जो कैनवास पर प्रत्येक तत्व के लिए GrapesJS रखता है। यह टैग, विशेषताओं, शैलियों, बाल घटकों और तत्वों को स्वीकार करने के नियमों को रखता है - न कि केवल इसका HTML। क्योंकि संपादक कच्चे मार्कअप के बजाय इस मॉडल पर काम करता है, एक घटक अपनी संरचना को लागू कर सकता है, संपादन योग्य गुणों को उजागर कर सकता है और स्थानांतरित या आकार बदलने पर प्रतिक्रिया कर सकता है।
एक घटक और एक ब्लॉक के बीच अंतर क्या है?
ब्लॉक ब्लॉक पैनल में एक प्रविष्टि है जो कैनवास पर खींचे जाने पर मार्कअप सम्मिलित करती है; एक घटक वह है जो मॉडल में आने के बाद मार्कअप बन जाता है। Blocks स्थिर स्नैपशॉट हैं, घटक व्यवहार रखते हैं। अधिकांश पुस्तकालय दोनों को शिप करते हैं: एक घटक प्रकार जो परिभाषित करता है कि एक अकॉर्डियन कैसे काम करता है, साथ ही एक ब्लॉक जो उपयोगकर्ताओं को एक को खींचने देता है।
traits में GrapesJS क्या हैं?
लक्षण वे संपादन योग्य गुण हैं जो एक घटक सेटिंग पैनल में उजागर करता है - एक लिंक लक्ष्य, एक प्लेसहोल्डर, एक API समापन बिंदु, स्तंभों की संख्या। वे गैर-तकनीकी उपयोगकर्ताओं को कोड या शैलियों को छूए बिना एक घटक को कॉन्फ़िगर करने देते हैं। एक अच्छी तरह से निर्मित घटक पुस्तकालय प्रत्येक घटक के लिए सार्थक traits को परिभाषित करता है, जिसमें उत्तरदायी भी शामिल हैं जहां लेआउट ब्रेकपॉइंट पर निर्भर करता है।
मैं एक कस्टम घटक प्रकार कैसे बनाऊँ?
इसे एक मॉडल और एक दृश्य के साथ DomComponents API के माध्यम से पंजीकृत करें: मॉडल डिफ़ॉल्ट घोषित करता है, traits और isComponent मिलान जो मौजूदा HTML में तत्व को पहचानता है; दृश्य नियंत्रित करता है कि यह कैनवास में कैसे प्रस्तुत करता है और व्यवहार करता है। पंजीकरण को एक प्लगइन में लपेटें और यह परियोजनाओं में पुनः प्रयोज्य हो जाता है - इस श्रेणी में पुस्तकालयों का निर्माण ठीक इसी तरह किया जाता है।
कौन से घटक पुस्तकालय ऐप और डैशबोर्ड बिल्डरों के लिए उपयुक्त हैं?
उन पुस्तकालयों की तलाश करें जिनके घटक वास्तव में इंटरैक्टिव हैं - डेटा टेबल, टैब पैनल, चार्ट, मैप एम्बेड - स्टाइल मार्कअप के बजाय। वे संपादित होने पर अपनी संरचना बनाए रखते हैं, इसलिए ग्रिड का आकार बदलना लेआउट को तोड़ने के बजाय उसके स्तंभों को सही ढंग से पुनर्व्यवस्थित करता है। जांचें कि विशेषता नियंत्रण आपके उपयोगकर्ताओं की आवश्यक सेटिंग्स को कवर करते हैं और घटक आपके कैनवास में लोड किए गए CSS ढांचे से मेल खाते हैं।

टैग द्वारा ब्राउज़ करें


command palettekeyboard shortcutsproductivitysearchBuilder Toolsdummy contentplaceholdergrapesjs plugincustom blocksplaceholder 2.0 grapesjsdrag&drop grapesjsnew dragging effect grapesjsgrapesjs document blocksgrapesjs invoice plugingrapesjs proposal blockspdf template blocks grapesjsinvoicing SaaS blockstailwindemailblocksnewsletterresponsive grapesjsemail builder grapesjsgrapesjs plugincomponentsfloatingdrag-and-dropai image generationAIai componentsgrapesjs aifarmer grapesjsblocks bootstrapcomponents bootstrap5grapesjs blocksusers blocksbootstrapgrid bootstrapbootstrap5 grapesjsslider grapesjscarousel grapesjsswiper grapesjsLory Slider Grapesjsbootstrap4layoutgrid blockssuper footer grapesjsglobal footer grapesjsfooter global grapesjsone footer for all pages grapesjsglobal header plugin grapesjssuper header grapesjsone header for grapesjs pagesheader pages grapesjsgrapesjs link componentlinks grapesjsgrapesjs menucomponent menu grapesjs linksmargin visible grapesjspadding visible grapesjsPrecision Spacing Toolspacing tool grapesjshero grapesjsgrapesjs react componentshero react componentcss gridgridrowscolumnscustom componentssite builder grapesjstwitchbreadcrumbslayer manager iconsgoogle analyticsgoogle tag managerscriptsblocklycalendlytemplates managertemplates plugin grapesjsplugin custom blocksborders grapesjsresizer color grapesjstoolbar grapesjslory grapesjsTabs Component grapesjstabs grapesjscustom code grapesjscustom code plugin grapesjshtml css grapesjstooltip grapesjstooltip plugin grapesjscountdown grapesjscountdown plugin grapesjsPlugin Basic Blocksgrapesjs basic blocksgrapesjs basicforms plugin grapesjsgrapesjs formsplugin grapesjs forms input lablenavbar grapesjsnavbar plugin grapesjs