@myissue/vue-website-page-builder 3.2.29 → 3.2.32

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -360,6 +360,37 @@ const pageBuilderClass = new PageBuilderClass(pageBuilderStateStore)
360
360
 
361
361
  // Initializing with essential configuration
362
362
  pageBuilderClass.setConfigPageBuilder(configPageBuilder)
363
+
364
+ // Recommended HTML wrapper for optimal layout and responsiveness:
365
+ // Wrap your components using the following structure to ensure proper spacing and alignment:
366
+ //
367
+ // <section>
368
+ // <div class="relative py-4">
369
+ // <div class="mx-auto max-w-7xl lg:px-4 px-2">
370
+ // <div class="break-words">
371
+ // <!-- Your HTML layout goes here -->
372
+ // </div>
373
+ // </div>
374
+ // </div>
375
+ // </section>
376
+
377
+
378
+ const existingResourceFromBackend = [
379
+ {
380
+ html_code:
381
+ '<section><div class="relative py-4"><div class="mx-auto max-w-7xl lg:px-4 px-2"><div class="break-words"><h2>Component Example One</h2></div></div></div></section>',
382
+ id: null,
383
+ title: 'Header H2',
384
+ },
385
+ {
386
+ html_code:
387
+ '<section><div class="relative py-4"><div class="mx-auto max-w-7xl lg:px-4 px-2"><div class="break-words" selected=""><h3>Component Example Two</h3></div></div></div></section>',
388
+ id: null,
389
+ title: 'Header H3',
390
+ },
391
+ ]
392
+
393
+
363
394
  // Populating page builder with existing resource content from backend
364
395
  pageBuilderClass.loadExistingContent(existingResourceFromBackend)
365
396
  </script>