How to make the UI elements interactive.
Every UI component can receive the same events as any other R3F element. In addition to these event listeners, uikit provides properties such as hover and active for all components. These properties allow the element to overwrite other properties if it is hovered or clicked.
The following example shows a Root element that is black by default turns red when the user hovers and is green as long as the user clicks on it.
<Root
backgroundColor="black"
hover={{ backgroundColor: 'red' }}
active={{ backgroundColor: 'green' }}
sizeX={1}
sizeY={1}
/>
import { Canvas } from "@react-three/fiber";
import { OrbitControls } from "@react-three/drei";
import { Root, Container } from "@react-three/uikit";
export default function App() {
return (
<Canvas style={{ position: "absolute", inset: "0", touchAction: "none" }} gl={{ localClippingEnabled: true }}>
<OrbitControls />
<Root
backgroundColor="black"
hover={{ backgroundColor: 'red' }}
active={{ backgroundColor: 'green' }}
sizeX={1}
sizeY={1}
/>
</Canvas>
)
}
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4