NeighborLocation
🚨
NeighborLocation
component is deprecated and will be removed in the next releases. Use propertyneighborLocation
specification on components.We did this because of the unreliability of the API and the unpredictability of neighbor detection, especially in React 18's parallel render.
Description
NeighborLocation is a component for grouping components. It indicates where the component is in relation to its neighbors.
For example, you can group together:
You may also need a flex-box
to align the components. For more information, see
the Flex-box and indent system.
Grouped buttons
Buttons can be grouped.
If you group primary buttons, the right one will have a 1px white border.
If you group secondary buttons, the left one will hide it's right border.
Don’t group tertiary buttons this way.
Grouped input and button
Grouped input and select
Grouped input, select, and button
You can group input, select, and button.
Adding a wrapper
By default, <NeighborLocation/>
doesn't create an HTML wrapper, but you can pass the component tag you want.
For the correct type mapping in the TC, you must also pass the interface.
<NeighborLocation<FlexProps> tag={Flex} w={200}/>
Using a custom component
You can apply <NeighborLocation.Detect/>
and
then the neighborLocation
prop will come to your component.
You can use the render function or the element will be cloned.