Custom icons can reinforce an application's brand identity, and improve the user experience by making it easier for users to find the features they need quickly.
To add custom icons to the aiWARE SDK's app-bar component, you need to use the app bar's rightActions property.
Steps
- If the app bar widget isn't mounted, mount it using
aiware.mountWidget(). - In the
rightActions property, add an object to the array. Each object in the array represents an icon on the app bar. The object should use the label and onClick properties, and you can set the isActive property to determine if the icon is initially active or inactive. This sample code adds a bell icon that logs Fired! to the console when it's clicked.
aiware.mountWidget({
name: 'APP_BAR',
config: {
rightActions: [{
label: `
<span class="notification-btn">
<img src="https://img.icons8.com/office/24/000000/appointment-reminders--v1.png"/>
<span class="notification-badge">3</span>
</span>
`,
onClick: function(event) {
console.log("Fired!")
}
}]
}
})
This sample code styles the bell icon added by the JavaScript code above.
.notification-btn {
position: relative;
display: block
}
.notification-btn .notification-badge {
position: absolute;
top: -10px;
right: -5px;
line-height: 20px;
padding: 0 6px;
background: red;
display: flex;
color: white;
border-radius: 50%;
}
