I'm on a project with a storybook and I want my story to be able to change the background or put a background whatever since I only need a background of a different color but I can't put background as it says in the documentation:
https://storybook.js.org/docs/react/essentials/backgrounds
export default {
title: 'Button',
parameters: {
backgrounds: {
default: 'twitter',
values: [
{ name: 'twitter', value: '#00aced' },
{ name: 'facebook', value: '#3b5998' },
],
},
},
};
and my code is like this:
export default {
title: "Atoms/Example",
component,
parameters: {
backgrounds: {
default: "black",
values: [
{ name: "black", value: "#000000" },
{ name: "white", value: "#ffffff" }
]
}
},
argTypes: {
is: {
control: {
type: "select",
options: [25, 33, 50, 75, 100]
}
}
}
}
but my code does not work at all and seeing from the documentation everything is correct.
or if there is any way to put a background to my story even if it is not dynamic if not a fixed one
Make sure you have #storybook/addon-backgrounds installed and in the .storybook/main.js file make sure its in your addons: addons: ['#storybook/addon-backgrounds']
Note make sure its:
addons: ['#storybook/addon-backgrounds']
and not
addons: ['#storybook/addon-backgrounds/register']
using register was the old way and will prevent it from working correctly
Related
I want to customize my mind map using jsMind
Currently this is my code:
var mind = { meta: {
name: 'jsMind remote',
author: 'hizzgdev#163.com',
version: '0.2',
},
format: 'node_tree',
data: {
id: 'root',
topic: 'jsMind',
children: [
{
id: 'easy',
topic: 'Easy',
direction: 'left',
children: [
{ id: 'easy1', topic: 'Easy to show' },
{
'id': 'other3',
'background-image': 'ant.png',
'width': '100',
'height': '100',
},
],
},
{
id: 'open',
topic: 'Open Source',
direction: 'right',
children: [
{
'id': 'open2',
'topic': 'BSD License',
'leading-line-color': '#ff33ff',
},
],
}
};
_jm.show(mind);
Any ideas to complete this challenge are welcome.
I tried to execute in the browser but i don't know how to implement that i wanted to do.
EDITED
I have changed the code a made a new line perfectly but a tooltip doesn't appear.
jsMind does not provide a built-in mechanism to display tooltip, but the topic of node can be HTML, so would you like to have a try to add a tooltip to it with HTML? Like that:
var mind = {
// ...
data: {
id: 'root'
topic: '<span title="good">jsMind Example<span>'
}
// ...
}
screenshot of it
I have the following ContextualMenu structure inside my SPFx Extension build with Fluent UI React:
const menuProps: IContextualMenuProps = {
items: [
{
key: 'Access',
itemType: ContextualMenuItemType.Section,
sectionProps: {
topDivider: true,
bottomDivider: true,
title: 'Sites you have access to',
items: [
{ key: 'DynamicValue1.1', text: 'DynamicValue1.2' },
{ key: 'DynamicValue2.1', text: 'DynamicValue2.2' },
],
},
},
],
};
I also a MS Graph call running getting me some SharePoint Sites & Teams.
I would now like to push those dynamic responses to the to the menuProps at the right place.
So basically add the dynamic array into the nested items object.
items: [
{ key: 'DynamicValue1.1', text: 'DynamicValue1.2' },
{ key: 'DynamicValue2.1', text: 'DynamicValue2.2' },
],
How can I target that "object"? (hope I understand correctly and items is an object...)
Is there a way to do this using array.push()?
To make this library agnostic, it would look something like this:
const obj = {
items: [
{
key: 'Access',
itemType: '',
sectionProps: {
topDivider: true,
bottomDivider: true,
title: 'Sites you have access to',
items: [
{ key: 'DynamicValue1.1', text: 'DynamicValue1.2' },
{ key: 'DynamicValue2.1', text: 'DynamicValue2.2' },
],
},
},
],
};
obj.items[0].sectionProps.items.push({ key: 'DynamicValue3.1', text: 'DynamicValue3.2' })
console.log(obj.items[0].sectionProps.items)
Your console.log would return this:
[
{ key: 'DynamicValue1.1', text: 'DynamicValue1.2' },
{ key: 'DynamicValue2.1', text: 'DynamicValue2.2' },
{ key: 'DynamicValue3.1', text: 'DynamicValue3.2' }
]
If you can access menuProps: IContextualMenuProps, then just replace obj with the necessary variable.
I'm trying to build a TreeView from scratch in Vue. This is my code so far.
The first problem I'm encountering is that the content of the subfolders (like child folder 1) is not being displayed. The second problem is that minimizing the subfolders minimizes the whole treeview.
Could anyone help me understand why these two errors in functionality are occurring and how to fix them?
your code only dealed with the first level of your folders, you should recursively revoke your tree components to deal with child folders. please refer to below article.
https://itnext.io/recursion-for-nested-tree-structure-components-in-vue-1cb600005475
your code is using one param (isOpen) to toggle minimizing all folders, so if isOpen is false, all folders minimized; you should use item.isOpen to deal with different item;
treeData: {
name: "My Tree",
isOpen: true,
children: [
{ name: "hello" },
{ name: "wat" },
{
name: "child folder",
isOpen: false,
children: [
{
name: "child folder 1",
isOpen: false,
children: [{ name: "hello" }, { name: "wat" }]
},
{ name: "hello" },
{ name: "wat" },
{
name: "child folder 2",
isOpen: false,
children: [{ name: "hello" }, { name: "wat" }]
}
]
}
]
}
};
I am trying to build a chart using organisation module of highcharts in angular.
Currently, I am creating it by using static data but it should be created based on api result.
Also i want whenever any node is clicked than an active class should be applied to this and its child. I have used click event for this and class is being applied but css is not reflecting.
below is my line of code can you please suggest
comp.ts
export class OrganisationComponent implements OnInit {
public options: any = {
chart: {
height: 600,
inverted: true
},
title: {
text: 'Org Chart'
},
series: [{
type: 'organization',
name: 'Highsoft',
keys: ['from', 'to'],
cursor: 'pointer',
events: {
click: function (event) {
event.point.linksFrom.forEach(element => {
if(element.toNode){
if(element.toNode.linksFrom){
element.toNode.linksFrom.forEach(innerElement => {
innerElement.toNode.dataLabel.addClass('active');
})
}
}
element.toNode.dataLabel.addClass('active');
});
}
},
data: [
['PMO', 'TM'],
['TM', 'D1'],
['TM', 'D2'],
['TM', 'D3'],
['D1', 'Intern'],
],
nodes: [
{
id: 'PMO',
icon: 'account_circle',
name: 'Project Manager'
},
{
id: 'TM',
icon: 'account_circle',
name: 'Team Lead'
},
{
id: 'D1',
icon: 'account_circle',
name: 'Developer 1'
},
{
id: 'D2',
icon: 'account_circle',
name: 'Developer 2'
},
{
id: 'D3',
icon: 'account_circle',
name: 'Developer 3'
},
{
id: 'Intern',
icon: 'account_circle',
name: 'Intern'
},
],
dataLabels: {
nodeFormat : `{point.name}`
}
}],
};
constructor() {}
ngOnInit() {
Highcharts.chart('container', this.options); // organization
}
}
.html
.css
.active {
font-size: 22px;
color: red;
}
stackblitz link
https://stackblitz.com/edit/angular-bar-highcharts-bnom1n
I am stuck how can i make it work with api data
how to apply active class on all child nodes and clicked node
Try this
Add styles in style.css as per other answer for css , for n level highlight try this recursive approach.
// update your click event as per below
events: {
click: function (event) {
event.point.linksFrom.forEach(element => {
highlightPoints(element);
element.toNode.dataLabel.addClass('active');
});
function highlightPoints(element){
if(element.toNode){
if(element.toNode.linksFrom){
element.toNode.linksFrom.forEach(innerElement => {
highlightPoints(innerElement);
innerElement.toNode.dataLabel.addClass('active');
})
}
}
}
}
To active child nodes by clicking on parent, do the following:
add .active style in style.css
.active {
font-size: 30px;
background-color: red;
}
Here is the updated stackblitz demo
Hope this helps.
Thanks
I'm trying to create a handsontable context menu with different types. This site is linked to from the handsontable docs (for 0.16.1) http://swisnl.github.io/jQuery-contextMenu/docs/items.html however it doesn't seem to be working (code below). The context menu has two main items, and when I click on Font Size, the console logs its name but doesn't act like an input.
contextMenu: {
callback: function (key, options) {
console.log(key);
},
items: {
"status": {
name: 'Status',
submenu: {
items: [{
key: 'status:pnc',
name: 'Private and Confidential'
},
{
key: 'status:fxd',
name: 'Fixed'
}]
},
},
"fontsize": {
name: "Font Size",
type: 'text',
value: '14',
events: {
keyup: function(e) {
console.log(e.keycode);
}
}
}
}
},
For me the console.log works in chrome if i use your definition. I do see a broken submenu. If you look at the documentation a submenu you see the syntax is a bit different. You dont define an array, just another items object definition.
contextMenu: {
callback: function(key, options) {
console.log(key);
},
items: {
"status": {
name: 'Status',
submenu: {
items: {
{
key: 'status:pnc',
name: 'Private and Confidential'
},
{
key: 'status:fxd',
name: 'Fixed'
}
}
},
},
"fontsize": {
name: "Font Size",
type: 'text',
value: '14',
events: {
keyup: function(e) {
console.log(e.keycode);
}
}
}
}
},
See: http://swisnl.github.io/jQuery-contextMenu/demo/sub-menus.html
When i fixed the submenu, i and no problems with the fontsize item being shown as an input.