Toolbar Settings

you are here (click to zoom) - discover the stack

Each in page toolbar can have some settings which control how it works and how it's shown.

👉 Best start with the Toolbar Tutorials

These Settings control how the Toolbar works

  1. autoAddMore determines where the ellipsis "more" button is added when the toolbar has many button-groups
  2. hover determines where the toolbar appears when the mouse hovers over the area
  3. follow tells the toolbar to follow the mouse - ideal for large content blocks
  4. show determines if th toolbar is always visible, or only on hover
  5. classes let you add classes for custom styling

How to Use in Razor

This example uses the simple TagToolbar API:

<div @Edit.TagToolbar(Content, toolbar: new[] { 
  "settings&hover=left&autoAddMore=start"
})>
  Stuff inside the div - hover over this would show the toolbar
</div>

Here's another example where it uses the explicit settings parameter:

<div id='tagWithToolbar1' @Edit.TagToolbar(
  toolbar: new [] { "toolbar=empty", "+new?contentType=UiEmptyHelloWorld" },
  settings: new { hover = "left", show = "always" } )>
  Float over this box to get a (+) button. 
</div>

How to Use in JavaScript

If you are writing code that doesn't have Razor (for example in a JS-SPA scenario) you would write the following (which is actually what the above sample creates):

<div sxc-toolbar='["settings&hover=left&autoAddMore=start"]'>
  Stuff inside the div - hover over this would show the toolbar
</div>

Settings and Values

  1. string autoAddMore: (null) | start | end
    will automatically add a "..." (more) button if multiple button groups are detected. Default is end
  2. string hover: "right" | "left" | "none" ("center" ist still beta) determines where the toolbar appears when the mouse hovers over the area (usually a DIV) with the class sc-element
  3. string follow new in 11.06 "none" | "initial" | "scroll" | "always"
    tells the toolbar to follow the mouse - ideal for large content blocks where you need the toolbar even if otherwise it would be off-screen. Note: this used to default to scroll on the TagToolbar but was changed to none in 2sxc 11.06 because it caused too many UX issues.
  4. string show: "hover" | "always"
    by default any toolbar inside an element with a sc-element class will appear on hover
  5. string classes: (null) | any kind of string

Here's a quick example of how it used to be done - not recommended any more:

<div style="height: 100px" class="sc-element">
    100px tall area to show alignments floating left with more to the left
    <ul class="sc-menu" data-toolbar='' settings='{ "hover": "left", "align": "left" }'></ul>
</div>

The above example will hover the toolbar when the mouse moves over this DIV but place it to the left hover: "left" and place the more button on the left side as well align: "left".

History

  1. Introduced in 2sxc 8.06
  2. follow introduced in 11.06