Breadcrumb
Breadcrumbs allow users to make selections from a range of values.
Selector
smart-breadcrumb
Properties
addNewItemboolean
Enables or disables the "Add new item" (+) button.
Default valuefalse
allowDragboolean
Enables or disables the dragging of breadcrumb items.
Default valuefalse
allowDropboolean
Enables or disables the dropping of dragged breadcrumb items.
Default valuefalse
animationAnimation
Sets or gets the animation mode. Animation is disabled when the property is set to 'none'
Default valueadvanced
closeButtonsboolean
Show/Hide the close button of breadcrumb items.
Default valuefalse
dataSource{label: string, value: string}[]
Determines the data source to load breadcrumb items from. The Array should contain objects. Each object defines a single breadcrumb item.
Default value[]
disabledboolean
Enables or disables the Breadcrumb.
Default valuefalse
itemTemplateany
Sets or gets the template of breadcrumb items. The value of this property can be the id of an HTMLTemplateElement or the HTMLTemplateElement itself. If set to null, no template is applied.
localestring
Sets or gets the language. Used in conjunction with the property messages.
Default value"en
messagesany
Sets or gets an object specifying strings used in the widget that can be localized. Used in conjunction with the property locale.
Default value
"en": {
"propertyUnknownType": "'{{name}}' property is with undefined 'type' member!",
"propertyInvalidValue": "Invalid '{{name}}' property value! Actual value: {{actualValue}}, Expected value: {{value}}!",
"propertyInvalidValueType": "Invalid '{{name}}' property value type! Actual type: {{actualType}}, Expected type: {{type}}!",
"elementNotInDOM": "Element does not exist in DOM! Please, add the element to the DOM, before invoking a method.",
"moduleUndefined": "Module is undefined.",
"missingReference": "{{elementType}}: Missing reference to {{files}}.",
"htmlTemplateNotSuported": "{{elementType}}: Browser doesn't support HTMLTemplate elements.",
"invalidTemplate": "{{elementType}}: '{{property}}' property accepts a string that must match the id of an HTMLTemplate element from the DOM."
}
minimizeWidthnumber
Determines the minimum width of the Breadcrumb at which it will switch from normal to minimized mode. If set to null, the Breadcrumb does not minimize automatically.
unfocusableboolean
If is set to true, the element cannot be focused.
Default valuefalse
onclose((this: Window, ev: Event) => any) | null
This event is triggered when a Breadcrumb item is closed.
Arguments
evEvent
ev.detailObject
ev.detail.item - The item that has been closed.
onclosing((this: Window, ev: Event) => any) | null
This event is triggered when a Breadcrumb item is about to be closed. The closing operation can be canceled by calling event.preventDefault() in the event handler function.
Arguments
evEvent
ev.detailObject
ev.detail.item - The item that is going to be closed.
ondragend((this: Window, ev: Event) => any) | null
This event is triggered when a Breadcrumb item is dropped.
Arguments
evEvent
ondragging((this: Window, ev: Event) => any) | null
This event is triggered when a Breadcrumb item is being dragged.
Arguments
evEvent
ev.detailObject
ev.detail.item - The item that is being dragged.
ev.detail.originalEvent - The original event that initiates the dragging operation.
ev.detail.target - The original target.
onaddnewitem((this: Window, ev: Event) => any) | null
This event is triggered when the "Add new item" (+) button is clicked.
Arguments
evEvent
Methods
addItem( itemDetails: any): void
Adds an item.
Arguments
itemDetailsany
An Object with the fields "index", "label", and "value".
maximize(): void
Restores the Breadcrumb from minimized state back to normal.
minimize(): void
Minimizes the Breadcrumb.
removeItem( item: HTMLElement): void
Removes an item.
Arguments
itemHTMLElement
The item to remove.