ExToolbar

v1.0.0Layout

ExSDK toolbar control for SAP UI5/Fiori applications.

Namespace
ux7.control.ExToolbar
Extends
sap.ui.core.Control
XML tag
<ExToolbar />
Quick Start
<VBox class="sapUiMediumMargin" width="100%">

   <!-- 01 · Styles: solid / transparent / blur -->
  <ux7:ExTitle text="01 · Style variants — solid · transparent · blur" level="h3" variant="section" />
  <ux7:ExToolbar title="Solid Toolbar" style="solid" bordered="true">
    <ux7:left>
      <ux7:ExButton text="New" type="primary" />
      <ux7:ExButton text="Edit" type="secondary" />
    </ux7:left>
    <ux7:right>
      <ux7:ExButton text="Delete" type="danger" />
    </ux7:right>
  </ux7:ExToolbar>

  <ux7:ExToolbar style="transparent" bordered="false" class="sapUiTinyMarginTop">
    <ux7:left>
      <ux7:ExButton text="Back" type="ghost" icon="sap-icon://nav-back" />
    </ux7:left>
    <ux7:center>
      <ux7:ExText text="Transparent — center title" align="Center" />
    </ux7:center>
    <ux7:right>
      <ux7:ExButton icon="sap-icon://action-settings" iconOnly="true" text="Settings" />
    </ux7:right>
  </ux7:ExToolbar>

  <ux7:ExToolbar style="blur" bordered="false" class="sapUiTinyMarginTop">
    <ux7:left>
      <ux7:ExSelect placeholder="Status" />
      <ux7:ExSelect placeholder="Department" />
    </ux7:left>
    <ux7:right>
      <ux7:ExButton text="Apply" type="primary" />
      <ux7:ExButton text="Reset" type="ghost" />
    </ux7:right>
  </ux7:ExToolbar>

  <!-- 02 · Compact mode -->
  <ux7:ExTitle text="02 · Compact mode" level="h3" variant="section" />
  <ux7:ExToolbar title="Compact Toolbar" compact="true" bordered="true">
    <ux7:left>
      <ux7:ExButton text="Save" type="primary" size="s" />
      <ux7:ExButton text="Cancel" type="ghost" size="s" />
    </ux7:left>
    <ux7:right>
      <ux7:ExButton text="Apply" type="ghost" />
    </ux7:right>
  </ux7:ExToolbar>

  <!-- 03 · No title, icon-only actions -->
  <ux7:ExTitle text="03 · No title — icon-only actions" level="h3" variant="section" />
  <ux7:ExToolbar bordered="true">
    <ux7:left>
      <ux7:ExButton icon="sap-icon://add" iconOnly="true" text="Add" type="primary" />
      <ux7:ExButton icon="sap-icon://edit" iconOnly="true" text="Edit" type="secondary" />
      <ux7:ExButton icon="sap-icon://copy" iconOnly="true" text="Copy" />
      <ux7:ExButton icon="sap-icon://delete" iconOnly="true" text="Delete" type="danger" />
    </ux7:left>
    <ux7:right>
      <ux7:ExInput placeholder="Search..." />
    </ux7:right>
  </ux7:ExToolbar>


  

</VBox>