Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Chris 3 posts 73 karma points
    Nov 04, 2015 @ 11:05
    Chris
    0

    Umbraco V7 Bootstrap tabs

    Hi all,

    I have been using Umbraco V7 for about a week now and I'm really enjoying using it. I have managed to transfer a site across so far without any glitches or upsets. However I need to do something like Bootstrap Tabs as seen here on their documentation

    http://getbootstrap.com/javascript/#tabs

    Im thinking of the best possible way to achieve this, do I build more document types and go for a structure like so

    PageParent
    - Title 1
    -- Section Content
    - Title 2
    -- Section Content

    Or

    Do I build a custom package ? Im just wondering what you more experienced Umbraco users would do, this still all relatively new to me and I do have experience with Angular so if someone could point me in a direction it would be much appreciated.

  • Paul 153 posts 519 karma points
    Nov 04, 2015 @ 15:06
    Paul
    0

    I've done this within Umbraco 7's grid framework.

    I used LeBlender (which is brilliant I hasten to add!), https://our.umbraco.org/projects/backoffice-extensions/leblender/

    LeBlender makes this a breeze to do. The bootstrap tab code is already there within the examples that LeBlender installs (you'll find those in Views > Partials > Grid > Editors folder).

    It's also got code for accordions as well. I ended up making my tabs responsively change to accordions for small view ports, so a best of both worlds :-) Best of all as it's built in LeBlender backoffice users can just drop an accordion/tabs section into a page when and where they wish.

    I hope that helps!

  • Paul 153 posts 519 karma points
    Nov 04, 2015 @ 15:18
    Paul
    1

    Here's a quick run through from a back office users viewpoint

    Pic 1 - Select Tabs (rather than having to go via Macros)

    Pic 2 - Enter Tab content

    Pic 3 - How the tab section looks in the back office (I set it not to render as it can be confusing within the grid)

    enter image description here

  • Chris 3 posts 73 karma points
    Nov 05, 2015 @ 11:43
    Chris
    0

    Paul, how did you actually construct this with Le Blender in the backoffice?

  • Chris 3 posts 73 karma points
    Nov 04, 2015 @ 16:22
    Chris
    0

    Paul you legend, thank you. Will have a look into le blender later, can see this will save a ton of time. Thanks again!!

  • This forum is in read-only mode while we transition to the new forum.

    You can continue this topic on the new forum by tapping the "Continue discussion" link below.

Please Sign in or register to post replies