SplitButton

Basic

  • meh
  • story
  • bro

Splitbutton

The splitbutton contains a regular button and a dropdown

<div id="61efbbefa7f2e" class="c-buttongroup c-splitbutton c-buttongroup__border--default"  js-split="" data-uid="61efbbefa7f2b">
    <button id="61efbbefa7dc08.11604241" class="c-button c-button__filled c-button__filled--default c-button--md ripple ripple--before" href="" target="_top" js-toggle-trigger="" js-toggle-item="" type="button" aria-pressed="false" data-uid="61efbbefa7dda">   
    <span class="c-button__label">
    
                    <span class="c-button__label-text">
                Choose an item!
            </span>
        
                    
            
    </span>
</button>    <div id="61efbbefa7ed0" class="c-dropdown c-dropdown-button--top c-dropdown-button--top__click c-dropdown--on-click">   
    
    <button id="61efbbefa7e298.06122170" class="c-button c-button__filled c-button__filled--default c-button__icon-size--md ripple ripple--before c-button--icon-only" href="" target="_top" js-toggle-trigger="" js-toggle-item="" type="button" aria-pressed="false" data-uid="61efbbefa7e37">   
    <span class="c-button__label">
    
                    <!-- icon.blade.php -->
    <i id="61efbbefa7e83" class="c-icon c-icon--size-md material-icons" translate="no" role="img" alt="" data-uid="61efbbefa7e7f">
                    expand_more
            </i>
        
                    
            
    </span>
</button>
    
    <div class="c-dropdown__list c-dropdown__list--top">
        <div>
            <ul>
                                <div href="#"><li>meh</li></div>
                                <div href="<br />
<b>Notice</b>:  Undefined index: link in <b>/tmp/blade-engine-cache/8222aa757ffac040045af638942465fa8d7d38a3.php</b> on line <b>10</b><br />
"><li>story</li></div>
                                <div href="<br />
<b>Notice</b>:  Undefined index: link in <b>/tmp/blade-engine-cache/8222aa757ffac040045af638942465fa8d7d38a3.php</b> on line <b>10</b><br />
"><li>bro</li></div>
                            </ul>
        </div>
    </div>  
    
</div>
    </div>
@splitbutton([
    'items' => [ ['text' => 'meh', 'link' => '#'], ['text' => 'story'], ['text' => 'bro']],
    'buttonText' => 'Choose an item!',
    'icon' => 'expand_more',
    'dropdownDirection' => 'top'
])
@endsplitbutton

Blade component parameters

Key Default value Type Available values Description
buttonText Pick an item string - The text on the actionbutton
icon arrow-drop-down string - The icon for the dropdown
dropdownDirection bottom string - In which direction the dropdown opens
id string - The DOM id of the component.
classList [] array - Array containing wrapping classes array
attributeList [] array - Array containing keys and values rendered as attributes
containerAware false boolean true/false Makes the component container aware. Appends modifiers --size--xs/sm/md/lg to the component.
Settings location: /mnt/persist/www/docroot_styleguide_v2/source/library/source/php/Component/Splitbutton/splitbutton.json