i want to add a icon to children's label. and it can be clicked for edit something.
antd version : 3.9.2
const options = [{
value: 'zhejiang',
label: 'Zhejiang',
children: [{
value: 'hangzhou',
label: 'Hangzhou'
}],
}, {
value: 'jiangsu',
label: 'Jiangsu',
children: [{
value: 'nanjing',
label: 'Nanjing',
}],
}];
class Demo extends Component {
render() {
return (
<Cascader
options={options}
/>
)
}
}
Add a classname to cascader and add css
.iconImage{
background-image: url('../assets/images/triangle.png');
background-size: 100% 100%;
background-color: transparent;
color:transparent;
}
Related
I was just wondering if we can use something like
label: "ID(id)"
where nodes object would be like :
nodes: [
{
data: { label: "IP 1", type: "ip" },
label:['EC2'],
ID:{id:'1'}
}
]
I don't see any particular documentation that specifies the use of "data" key to render.
By trying above code,it just prints it as a string and not evaluating the given expression.
Any inputs are appreciated.
Thanks in advance!
From what I could try out, we cannot use anything other than the "data()" function inside any of the selector object's members(only for which accepts a function, some only accept strings)
So to manipulate any data, we would have to keep the wanted values under "data" and use any javascript function to return our desired output.
For example :
label: function (node) {
return `${node.data("labels")} ${node.data("id")}`
}
Here lables and id are your keys and we can use any function to do manipulate the output.
This is some input (live-code) that is requested. It demonstrates the use of
label: "ID(id)"
that does not produce expected result (no evaluation).
var data = {
"nodes": [{
data: {
label: "IP_1",
type: "ip"
},
label: ['EC2'],
ID: {
id: '1'
}
},
],
"edges": []
}
//console.log(data);//uncomment this to see file content
var cy = cytoscape({
elements: data,
container: document.getElementById("cy"),
style: [{
selector: "node",
style: {
shape: "hexagon",
"background-color": "red",
//label: "data(id)",
label: "ID(id)", /* No evaluation */
//label: function (node) {return `${node.data("label")} ${node.data("type")}`} /* Evaluation OK */
}
}],
layout: {
name: "grid"
}
});
#cy {
width: 400px;
height: 200px;
position: absolute;
top: 5px;
left: 5px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/cytoscape/2.7.10/cytoscape.js"></script>
<body>
<div id="cy"></div>
</body>
Here is the LIVE code that uses the snippet code from the answer provided by #Poornima T.
It can be executed and the result is as expected.
var data = {
"nodes": [{
data: {
label: "IP_1",
type: "ip"
},
label: ['EC2'],
ID: {
id: '1'
}
},
],
"edges": []
}
//console.log(data);//uncomment this to see file content
var cy = cytoscape({
elements: data,
container: document.getElementById("cy"),
style: [{
selector: "node",
style: {
shape: "hexagon",
"background-color": "red",
//label: "data(id)",
//label: "ID(id)", /* No evaluation */
label: function (node) {return `${node.data("label")} ${node.data("type")}`} /* Evaluation OK */
}
}],
layout: {
name: "grid"
}
});
#cy {
width: 400px;
height: 200px;
position: absolute;
top: 5px;
left: 5px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/cytoscape/2.7.10/cytoscape.js"></script>
<body>
<div id="cy"></div>
</body>
I want to change the nav link icon color. If I set the primary color by creating a custom theme it won't effect.
<ThemeProvider
theme={{
palette: {
themePrimary: getTheme().palette.teal,
}
}}
>
Actually it worked on hover but not on normal view. I tried setting the iconProps but it didn't work either.
links: [
{
name: "Overview",
icon: "WebAppBuilderFragment",
iconProps: { color: "white" },
},
],
How can I change these icons color?
IconProps is an object with following props. Use styles to set icon color:
links: [
{
name: "Overview",
iconProps: {
iconName: 'WebAppBuilderFragment',
styles: {
root: { color: '#f00' },
},
},
},
],
Codepen working example.
I am using TinyMCE 5.6.2 and I have a weird bug with a custom dialog. I have it set to a size of large with a tab panel for the content. I have a header and two buttons setup. When the dialog opens, the buttons are pushed down so that you can just see top few pixels. It looks like some media breakpoint issue because when I resize the window, the buttons become fully visible at a height of 654px and below.
How can I get these buttons to show all the time?
tinymce.PluginManager.add('imageGallery', function (editor, url){
editor.ui.registry.addButton('imageGallery', {
icon: 'gallery',
tooltip: 'Image Gallery',
onAction: function() {
editor.windowManager.open({
title: 'Image Gallery',
size: 'large',
body: {
type: 'tabpanel',
tabs:[
{
name: 'upload',
title: 'Upload',
items: [
{
type: 'dropzone',
name: 'dropzone'
}
]
},
{
name: 'site',
title: 'My Images',
items: [
{
type: 'htmlpanel',
html: '<div id="myImages" class="img-flex-grid"></div>'
}
]
},
{
name: 'shared',
title: 'Shared',
items: [
{
type: 'htmlpanel',
html: '<div id="sharedCategories" style="float: left; min-width: 150px; background-color: lightgray; font-size: 14px; color: rgba(34,47,62,.7);"></div><div id="sharedImages" class="img-flex-grid" style="float: right; width: 900px"></div>'
}
]
},
],
},
buttons: [
{
type: 'submit',
text: 'Select',
name: 'select',
disabled: true,
primary: true,
},
{
type: 'cancel',
text: 'Close'
}],
onChange: function(dialogInstance, details) {
handleInputChange(dialogInstance, details);
},
onSubmit: function() {
handleSubmit();
},
onTabChange: function(dialogInstance, details) {
handleMainTabChange(dialogInstance, details.newTabName)
}
});
}
});
}
If anyone else is having this issue, I had to override a CSS class. Because I am accessing TinyMCE via a CDN, I do not see a way to create a custom skin or theme. This is the code that I added to my CSS file.
.tox-dialog--width-lg {
min-height: 650px !important;
height: auto !important;
}
I have a horizontal list using data view where I am trying to display a list of images. I would like to display it aligned in vertical centre. But, it always appear aligned to top.
Here is my view:
Ext.define('horizList.view.Main', {
extend: 'Ext.tab.Panel',
xtype: 'main',
requires: [
'Ext.TitleBar',
'Ext.Video',
'Ext.List'
],
config: {
tabBarPosition: 'bottom',
items: [
{
title: 'Get Started',
iconCls: 'action',
items: [
{
docked: 'top',
xtype: 'titlebar',
title: 'Getting Started'
},
{
xtype: 'container',
flex:1.5,
layout: {
type: 'vbox',
pack: 'center'
},
items:[{
xtype:'dataview',
//flex : 1,
//defaultType : 'myapp-dataitem',
height: 400,
scrollable: {
direction: 'horizontal',
directionLock: true
},
inline : {
wrap : false
},
//layout:'hbox',
itemId:'foodCatalogWrapper',
store: 'foodCatalogStore',
itemTpl:new Ext.XTemplate('<img src="{[this.image(values)]}" />',
{
image: function(value){
var imgUrl = baseUrl + value.IMAGE;
return imgUrl;
}
})
}]
}]
}]
}
});
And the CSS for dataview is:
.x-dataview {
background-color: transparent;
border:5px solid #0000FF !important;
.x-dataview-item {
padding: 1px 0;
text-align: center;
vertical-align: middle;
border:5px solid #FFFF00 !important;
color: #000;
img {
margin: 10px 1px;
}
}
}
.x-dataview .x-dataview-item.x-item-selected {
border:5px solid #FFFFFF !important;
}
I could not attach a screenshot as I don't have enough reputation points.
what needs to be done to display the items centre aligned vertically.
Thanks in advance.
I resolved this issue. The reason was somehow the width was taken as 100%. Once I removed that, it worked.
I've got a structure like below.
I can reference (from the button handler) with up.down my component but I'm wondering if there is a more correct way to do this.
Ext.application({
name: 'MyApp',
launch: function () {
Ext.create('Ext.container.Viewport', {
items: [
{
tpl: 'Name: {first} {last}',
data: {
first: 'Peter',
last: 'Kellner'
},
padding: 20,
width: 200,
height: 200,
style: {
border: '2px solid red'
},
resizable: true,
itemId: 'myComponentItemId',
listener: {
resize: {
fn: function(component, width, height) {
console.log("w/h:" + width + " " + height);
}
}
}
},{
xtype: 'button',
text: "Disable",
handler: function () {
debugger;
this.up().down('#myComponentItemId').disable();
}
}
]
});
}
});
It is correct to use .up.down for what you are trying to do. You could use something like :
.up('form').down('button#login')
What you use in your code, on the other hand is not correct : this.up().down('#myComponentItemId'). You must pass a component selector as argument to .up().
Alternatives to .up.down are .nextSibling and .previousSibling. Similar, but more general there are also .nextNode and .previousNode.