Copied to clipboard

Flag this post as spam?

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


  • Jannik Anker 48 posts 258 karma points c-trib
    Aug 20, 2017 @ 20:23
    Jannik Anker
    0

    Custom section - umb-button-group inside umb-editor-header?

    Hey guys!

    I have a couple of custom sections in my application.

    In one of the views I would very much like to have an "Actions" menu in the same style as on content nodes, but I haven't been able to figure out how to do it :-s

    So: is there any way I can place my umb-button-group (or any other kind of action menu) inside the header?

    There's a "menu" property on umb-editor-header (docs) which doesn't seem to be documented any further, and nothing happends when I try to set it to my buttonGroup.

    And yes, I've also tried just moving the umb-button-group element inside umb-editor-header, which does not work ;-)

    I have gotten as far as having a umb-button-group in my umb-editor-sub-header like so:

    <umb-editor-header name="viewHeader"
                        hide-alias="true"
                        name-locked="true"
                        hide-description="true"
                        hide-icon="true">
    </umb-editor-header>
    
    <umb-editor-container>
    
        <umb-editor-sub-header>
    
            <umb-editor-sub-header-content-left>
    
            </umb-editor-sub-header-content-left>
    
            <umb-editor-sub-header-content-right>
                <umb-button-group ng-if="buttonGroup"
                                    default-button="buttonGroup.defaultButton"
                                    sub-buttons="buttonGroup.subButtons"
                                    direction="down"
                                    float="right"
                                    state="init">
                </umb-button-group>
            </umb-editor-sub-header-content-right>
    
        </umb-editor-sub-header>
    <umb-editor-container>
    

    It's just as described in the docs here: https://our.umbraco.org/apidocs/ui/#/api/umbraco.directives.directive:umbButtonGroup

    This is the best I can get, which isn't ideal...

    But, logically, this means the button group is part of the sub-header, not the header. Which isn't what I want :-/

    I guess I could place it in the footer instead, but that also doesn't feel like the standard Umbraco way...

    EDIT: I checked how Tim does it in his excellent UI-O-Matic package, but he "cheats" and doesn't use the official directives here...

  • Dan Diplo 1554 posts 6205 karma points MVP 6x c-trib
    Aug 21, 2017 @ 11:43
    Dan Diplo
    0

    The "official" directives are basically just Angular wrappers for Bootstrap 2 Button Groups. Unfortunately, as you've found, it's hard to get decent docs on how to use the Umbraco directives or, indeed, find out which version they were added (important if you are supporting older installations).

    I've tended to "cheat" too and just create them myself using Bootstrap. I know this is not much use to you, but go with what works! :)

  • Jannik Anker 48 posts 258 karma points c-trib
    Aug 22, 2017 @ 09:49
    Jannik Anker
    0

    Yeah, it just sucks to have to cheat since everything else in the views is done without cheating :-)

    But I guess you're right - if cheating's the only way to make it work, that's the only way to go.

Please Sign in or register to post replies

Write your reply to:

Draft