2024-01-18
New node toolbar example! Buried away in our API reference is the documentation for our
component. We’ve been missing
an example to accompany it though, so we’ve published a new example to show how
it can be used. Check it out .
John Robb Community Manager
Hayleigh Thompson Software Engineer
Get Pro examples, prioritized bug reports, 1:1 support from the maintainers, and more with React Flow Pro New node toolbar example! - React Flow
solid
#ededed
;
--xy-node-boxshadow-default : 0 px 3.54 px 4.55 px 0 px #00000005 , 0 px 3.54 px 4.55 px 0 px #0000000d , 0 px 0.51 px 1.01 px 0 px #0000001a ;
--xy-node-border-radius-default : 8 px ;
--xy-handle-background-color-default : #ffffff ;
--xy-handle-border-color-default : #aaaaaa ;
--xy-edge-label-color-default : #505050 ;
--xy-node-background-color-default : #ffffff ;
--xy-theme-panel-bg : #ffffff ;
--xy-theme-panel-text : #111827 ;
--xy-theme-resize-handle-bg : #ffffff ;
--xy-theme-focus-border : #d9d9d9 ;
--xy-theme-muted-bg : #f3f4f6 ;
--xy-theme-subtle-border : #d1d5db ;
}
.react-flow.dark {
--xy-background-color : #101012 ;
--xy-node-background-color-default : #1a1b1e ;
--xy-node-border-default : 1 px solid #303238 ;
--xy-handle-background-color-default : #141519 ;
--xy-handle-border-color-default : #5a5d66 ;
--xy-edge-label-color-default : #e6e7ea ;
--xy-theme-hover : #7a7d86 ;
--xy-theme-edge-hover : #f3f4f6 ;
--xy-theme-panel-bg : #141519 ;
--xy-theme-panel-text : #f3f4f6 ;
--xy-theme-resize-handle-bg : #141519 ;
--xy-theme-focus-border : #5f6470 ;
--xy-theme-muted-bg : #24262c ;
--xy-theme-subtle-border : #3f434c ;
--xy-node-boxshadow-default : none ;
--xy-theme-color-focus : #4b4e57 ;
--color-background : #1a1b1e ;
--color-hover-bg : #24262c ;
--color-disabled : #8b9099 ;
}
.react-flow {
background-color : var ( --xy-background-color );
}
/* Customizing Default Theming */
.react-flow__node {
box-shadow : var ( --xy-node-boxshadow-default );
border-radius : var ( --xy-node-border-radius-default );
background-color : var ( --xy-node-background-color-default );
display : flex ;
justify-content : center ;
align-items : center ;
text-align : center ;
padding : 10 px ;
font-size : 12 px ;
flex-direction : column ;
border : var ( --xy-node-border-default );
color : var ( --xy-node-color , var ( --xy-node-color-default ));
}
.react-flow__node.selectable:focus {
box-shadow : 0 px 0 px 0 px 4 px var ( --xy-theme-color-focus );
border-color : var ( --xy-theme-focus-border );
}
.react-flow__node.selectable:focus:active {
box-shadow : var ( --xy-node-boxshadow-default );
}
.react-flow__node.selectable:hover ,
.react-flow__node.draggable:hover {
border-color : var ( --xy-theme-hover );
}
.react-flow__node.selectable.selected {
border-color : var ( --xy-theme-selected );
box-shadow : var ( --xy-node-boxshadow-default );
}
.react-flow__node-group {
background-color : rgba ( 207 , 182 , 255 , 0.4 );
border-color : #9e86ed ;
}
.react-flow.dark .react-flow__node-group {
background-color : rgba ( 123 , 107 , 148 , 0.22 );
border-color : #7b6b94 ;
}
.react-flow__edge.selectable:hover .react-flow__edge-path ,
.react-flow__edge.selectable.selected .react-flow__edge-path {
stroke : var ( --xy-theme-edge-hover );
}
.react-flow__handle {
background-color : var ( --xy-handle-background-color-default );
}
.react-flow__handle.connectionindicator:hover {
pointer-events : all ;
border-color : var ( --xy-theme-edge-hover );
background-color : var ( --xy-handle-background-color-default );
}
.react-flow__handle.connectionindicator:focus ,
.react-flow__handle.connectingfrom ,
.react-flow__handle.connectingto {
border-color : var ( --xy-theme-edge-hover );
}
.react-flow__node-resizer {
border-radius : 0 ;
border : none ;
}
.react-flow__resize-control.handle {
background-color : var ( --xy-theme-resize-handle-bg );
border-color : #9e86ed ;
border-radius : 0 ;
width : 5 px ;
height : 5 px ;
}
/*
Custom Example CSS - This CSS is to improve the example experience.
You can remove it if you want to use the default styles.
New Theme Classes:
.xy-theme__button - Styles for buttons.
.xy-theme__input - Styles for text inputs.
.xy-theme__checkbox - Styles for checkboxes.
.xy-theme__select - Styles for dropdown selects.
.xy-theme__label - Styles for labels.
Use these classes to apply consistent theming across your components.
*/
:root {
--color-primary : #ff0073 ;
--color-background : #fefefe ;
--color-hover-bg : #f6f6f6 ;
--color-disabled : #76797e ;
}
.xy-theme__button-group {
display : flex ;
align-items : center ;
. xy-theme __ button :first-child {
border-radius: 100 px 0 0 100 px ;
}
.xy-theme__button:last-child {
border-radius : 0 100 px 100 px 0 ;
margin : 0 ;
}
}
/* Custom Button Styling */
.xy-theme__button {
display : inline-flex ;
align-items : center ;
justify-content : center ;
height : 2.5 rem ;
padding : 0 1 rem ;
border-radius : 100 px ;
border : 1 px solid var ( --color-primary );
background-color : var ( --color-background );
color : var ( --color-primary );
transition :
background-color 0.2 s ease ,
border-color 0.2 s ease ;
box-shadow : var ( --xy-node-boxshadow-default );
cursor : pointer ;
}
.xy-theme__button.active {
background-color : var ( --color-primary );
color : white ;
border-color : var ( --color-primary );
}
.xy-theme__button.active:hover ,
.xy-theme__button.active:active {
background-color : var ( --color-primary );
opacity : 0.9 ;
}
.xy-theme__button:hover {
background-color : var ( --xy-controls-button-background-color-hover-default );
}
.xy-theme__button:active {
background-color : var ( --color-hover-bg );
}
.xy-theme__button:disabled {
color : var ( --color-disabled );
opacity : 0.8 ;
cursor : not-allowed ;
border : 1 px solid var ( --color-disabled );
}
.xy-theme__button > span {
margin-right : 0.2 rem ;
}
/* Add gap between adjacent buttons */
.xy-theme__button + .xy-theme__button {
margin-left : 0.3 rem ;
}
/* Example Input Styling */
.xy-theme__input {
padding : 0.5 rem 0.75 rem ;
border : 1 px solid var ( --color-primary );
border-radius : 7 px ;
background-color : var ( --color-background );
transition :
background-color 0.2 s ease ,
border-color 0.2 s ease ;
font-size : 1 rem ;
color : var ( --xy-theme-panel-text );
}
.xy-theme__input:focus {
outline : none ;
border-color : var ( --color-primary );
box-shadow : 0 0 0 2 px rgba ( 255 , 0 , 115 , 0.3 );
}
/* Specific Checkbox Styling */
.xy-theme__checkbox {
appearance : none ;
-webkit-appearance : none ;
width : 1.25 rem ;
height : 1.25 rem ;
border-radius : 7 px ;
border : 2 px solid var ( --color-primary );
background-color : var ( --color-background );
transition :
background-color 0.2 s ease ,
border-color 0.2 s ease ;
cursor : pointer ;
display : inline-block ;
vertical-align : middle ;
margin-right : 0.5 rem ;
}
.xy-theme__checkbox:checked {
background-color : var ( --color-primary );
border-color : var ( --color-primary );
}
.xy-theme__checkbox:focus {
outline : none ;
box-shadow : 0 0 0 2 px rgba ( 255 , 0 , 115 , 0.3 );
}
/* Dropdown Styling */
.xy-theme__select {
padding : 0.5 rem 0.75 rem ;
border : 1 px solid var ( --color-primary );
border-radius : 50 px ;
background-color : var ( --color-background );
transition :
background-color 0.2 s ease ,
border-color 0.2 s ease ;
font-size : 1 rem ;
color : var ( --xy-theme-panel-text );
margin-right : 0.5 rem ;
box-shadow : var ( --xy-node-boxshadow-default );
}
.xy-theme__select:focus {
outline : none ;
border-color : var ( --color-primary );
box-shadow : 0 0 0 2 px rgba ( 255 , 0 , 115 , 0.3 );
}
.xy-theme__label {
margin-top : 10 px ;
margin-bottom : 3 px ;
display : inline-block ;
color : var ( --xy-theme-panel-text );
}
