question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Tabs inside Panel

See original GitHub issue

Hi @artf,

As you must know, at my company we are creating a product based on GrapesJS. We are trying to keep as close as possible from GrapesJS core. As developers we are trying our best to not create a fork from GrapesJS and keep contributing back to the repo. Now, we have a new feature to create and we would like to know if it’s interesting for GrapesJS. We want to add tabs inside the blocks panel. It’s works like the categories, they serve to group a specific set of blocks. Something like that captura de tela 2017-11-09 as 15 55 03

Do you think is it good for Grapes? I mean, is there any chance that could be merged back to the grapes core?

We started to code something like that: (this is the grapesjs.init options)

tabManager: {
                defaultTab: 'content',
                tabs: [{
                    id: 'content',
                    label: 'Content',
                    attributes: {class:'gjs-fonts gjs-f-b1'},
                },{
                    id: 'layout',
                    label: 'Layout',
                    attributes: {class:'gjs-fonts gjs-f-b2'},
                }]
            },

            blockManager: {
                blocks: [{
                    id: 'b1',
                    label: '1 Block',
                    category: 'Basic',
                    tab: 'content',
                    attributes: {class:'gjs-fonts gjs-f-b1'},
                    content: `<div>text</div>`
                }

Let me know what you think about the idea. We love GrapesJS and we want to keep giving back to the project as possible as we can.

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Reactions:1
  • Comments:13 (11 by maintainers)

github_iconTop GitHub Comments

1reaction
arthuralmeidapcommented, Nov 10, 2017

You are the man!!! Thanks a lot!! I will try it !!!

0reactions
lock[bot]commented, Sep 18, 2019

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Tabs — Panel v0.14.2
Tabs allow switching between multiple objects by clicking on the corresponding tab header. Tab labels may be defined explicitly as part of a...
Read more >
How to create Tabbed Panel in Bootstrap - Stack Overflow
I think what you want is just the regular bootstrap tabs <!-- Nav tabs --> <ul class="nav nav-tabs" role="tablist"> <li class="active"><a href="#home" ...
Read more >
Bootstrap Tabs - examples & tutorial
Responsive Tabs built with Bootstrap 5. Examples of vertical tabs, tab panel, tabs justified, filled, with buttons, and many other variations of the...
Read more >
Navs and tabs · Bootstrap v5.0
Navigation available in Bootstrap share general markup and styles, ... Takes the basic nav from above and adds the .nav-tabs class to generate...
Read more >
TabPanel - W3C Wiki
In ARIA terms, a tabbed interface component is a container for resources associated with a tab. It is a set of layered pages...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found