Please have a look at the following demo:
https://codesandbox.io/s/sharp-bell-u9e3s
You see a simple CommandBar example where at "Submenu 1.2" the normal icon "ChevronRight" is replaced by the icon "Forward".
The other icon at top level should also be replace => instead of "ChevronDown" the icon called "Down" shall be used. How is this possible???
PS: Of course, in real world I want those icons to be replaced by totally different open-source license icons, but I wanted the demo to be as simple as possible.
BTW: Function "registerIcons" is not an option for me.
Each commandbar item is a button. Button's take menuIconProps.
key: "1.0",
name: "Menu 1",
menuIconProps: {
iconName: 'Add'
},
Check out the icon component for other ways to customize: https://developer.microsoft.com/en-us/fabric#/controls/web/icon
Related
Currently struggling with trying to update a SharePoint custom page with a search bar. The page consists of a data table with various columns, the idea is to add extra functionality to this data table without compromising the code already there.
The main issue is the code not rendering "search" when added to the following area after "excel":
data-toolbar='[
{ template: "<a class=\"k-button k-primary\" data-bind=\"click: onCustomCreate, visible: canAdd\">Add New Organisation</a>" },
{ name: "clearAllSorting", text: "Clear All Sorting", attr: "data-bind=\"click: onClearAllSorting\""},
{ name: "clearAllFilters", text: "Clear All Filters", attr: "data-bind=\"click: onClearAllFilters\""},
"excel"
]'
I have put in "pdf" to test, and it renders the Export to PDF button OK:
PDF button
When I add "search" it just shows a box with lower case s for search:
Search button
I'm hoping someone can point me in the right direction, is it simply missing a more up-to-date kendo library?
Ultimately, all I need is for this to show: Search toolbar
Can any one please let me know how we can remove items from a TinyMCE ContextMenu. I.e., normal Cut, Copy, Paste items?
I've seen several references to add items to the context menu shown inside the editor, but not for removing the same.
Please help :)-
When you initiate TinyMCE, you can explicitly state which buttons to include:
tinyMCE.init({
...
theme_advanced_buttons1 : "bold,italic,underline",
theme_advanced_buttons2 : "",
theme_advanced_buttons3 : ""
});
(example taken from the docs)
Edit
Sorry, the question is about the Context Menu (a.k.a the right-click menu).
Have you tried this plugin which lets you do this?:
tinymce.init({
plugins: "contextmenu",
contextmenu: "link image inserttable | cell row column deletetable"
});
I'm using BlackBerry-10 Cascades to develop an app. I want a context menu to open on the right when I click a button. Currently I have it so that the menu opens after a press- hold of the button but I need it to open as soon as the button is tapped. I've tried finding a way to do this but cannot find it in the documentation. Is there any way I can invoke the context menu from the onclicked method of a button press?
BTW: this is all in QML
I am not really familiar with the controls available on blackberry-cascades, but, it seems like it should be as simple as moving the code from the onPressAndHold signal handler to the onClicked signal handler. For better help you should post the relevant snippets of your code along with the imports so we can find more info to help you in your particular scenario.
actions: [
//! [0]
ActionItem {
title: _webMaps.viewModeTitle
imageSource: "asset:///images/map.png"
ActionBar.placement: ActionBarPlacement.OnBar
onTriggered: {
_webMaps.nextViewMode()
map.setMapType(_webMaps.viewMode);
}
},
//! [0]
ActionItem {
title: qsTr("Waterloo")
imageSource: "asset:///images/pin.png"
ActionBar.placement: ActionBarPlacement.InOverflow
onTriggered: {
map.setCenter(43.468245, -80.519603);
}
}
]
try this sample..
In theory you should be able to do it but there are two problems that I see with this idea:
A context menu is supposed to be posted in the context of another UI element. I'm not sure what context menu items you might have for a button. If you are posting the context menu in the context of some other control then you will confuse your users.
The age old issue of non-conformance with the UI style guide of the platform. You will be expecting your uses, who have invested time in learning how to operate the BB10 UI, to now learn a different set of interface semantics.
There is a Context menu api in the BlackBerry Platform Services (BPS) library that you can use.
https://developer.blackberry.com/native/reference/core/com.qnx.doc.bps.lib_ref/topic/manual/dialog.h_functionscontextmenufunctions.html?f=dialog
It is not "Cascades functionality" per se, but you can use it from within a Cascades application. Note that it is a C based api so you would have to create some kind of "helper class" and expose it to QML yourself.
Try this sample code for open context menu on button clicked.
How can I remove the background of search bar ? I tried by changing background color but it also changes cancel button's color !!!
Thanks...
The best alternative to this is creating a custom search bar with Ti.UI.textField and Ti.UI.button. Add them both to a view and customize it as you please. Finally, just add an event listener to the button click, and voila!
Take a look at this Module: https://github.com/viezel/NappUI
It extends the properties for several UI Elements, including SearchBar, here is the list.
SearchField BackgroundImage
Custom Cancel button
barColor - background gradient of the button. (similar to navbar)
color - color of the button title
title - change the default Cancel text
font - set the font of the button
Appearance of the keyboard
Disable the search icon
To install it, I recommend you to use the new gitTio command line, this will automatically download the module, install it on the modules folder on Application Support folder and add the proper config line on tiapp.xml.
gittio install -g dk.napp.ui
And here is an example of a SearchBar using the new properties enabled by this Module
var searchBar = Ti.UI.createSearchBar({
searchFieldBackgroundImage:"searchbg.png",
showsScopeBar:true,
scopeButtonTitles:["hello", "yes"],
customCancel:{
barColor:"#333",
color:"#ddd",
title:"Hit me",
font:{
fontSize:16,
fontWeight:"bold",
fontFamily:"Georgia"
}
},
appearance:Titanium.UI.KEYBOARD_APPEARANCE_ALERT,
barColor:"transparent",
disableSearchIcon:true //disables the search icon in the left side
});
If you are talking about the gradient blue, I removed it on my app with:
var searchBox = Ti.UI.createSearchBar({
barColor: '#eee'
});
Hope this helps.
Unfortunately 'barColor' doesn't work. Ti seems to change the color by changing the opacity or hue or something. DannyM's workaround is the best.
I must have wasted a zillion hours making sense of Titanium's background colors, background images, bar colors and their active/inactive cousins.
Conclusion: "Free" software is costly if you count the time you waste on silly bugs and lack of useful documentation.
I'm new with Appcelerator and I encountered an annoying problem regarding layout.
I have to do a menu bar that is very easy to do with plain html (ul>li>a and that's all). The problem is that it seems that all button-related functions are not... customizable. I want buttons to be displayed as plain text, not buttons.
The first thought was to use labels (instead of buttons). But... Is this a right way? I need a menu bar, not a text paragraph! Besides that, the menu is somehow flexible, not like labels.
This is one (of many!) things i tried:
var menu_color = Titanium.UI.createButton({
title:Ti.Locale.getString("menu_color") || "Color",
height:24,
top:10
});
I also added borderWidth:0 (no effect) and backgroundColor:none/transparent with no luck.
Help? :)
I usually use views when I need to create what you described above.
For example:
I use a view with a vertical layout, then add my child views. The child views then have listeners for the click or whatever event.
This allows you to have more control over the formatting. A side effect of this is you will need to create your own "press" ui cue in some cases.
var demo = {win : Ti.UI.currentWindow};
(function(){
//Create the container view
demo.vwMain = Ti.UI.createView({height:100, layout:'vertical', backgroundColor:'yellow'});
demo.win.add(demo.vwMain);
demo.fakebutton1 = Ti.UI.createView({height:40, backgroundColor:'blue',left:25,right:25,borderRadius:5,borderColor:'#000'});
demo.vwMain.add(demo.fakebutton1);
demo.fakebutton2 = Ti.UI.createView({top:5,height:40, backgroundColor:'green',left:25,right:25,borderRadius:5,borderColor:'#000'});
demo.vwMain.add(demo.fakebutton2);
demo.fakebutton1.addEventListener('click', function(e) {
alert('Clicked fake button 1');
});
demo.fakebutton2.addEventListener('click', function(e) {
alert('Clicked fake button 2');
});
})();
create a view with layout property is set to vertical and add label or button which you want.View is like in HTML.Hope you understand.