Preview
Loading GPUI
Props
Install
cargo add evilbuttonsUsage
The button fills its parent and treats it as its playground, so give it a container with some height.
use evilbuttons::ThrusterButton;
use gpui::{div, prelude::*, px, Context, IntoElement, Render, Window};
struct ButtonDemo;
impl Render for ButtonDemo {
fn render(&mut self, _: &mut Window, _: &mut Context<Self>) -> impl IntoElement {
div()
.w_full()
.h(px(320.0))
.child(ThrusterButton::new("launch", "Launch").on_click(|_, _, _| launch()))
}
}Variants
Afterburner
High thrust makes it snap across the playground and slam on the brakes.
Loading GPUI
ThrusterButton::new("burn", "Full Burn").thrust(7000.0)Low Fuel
Weak jets make it drift over slowly, sag and overshoot before it settles.
Loading GPUI
ThrusterButton::new("fumes", "Running on Fumes")
.thrust(900.0)
.tilt(18.0)Props
ThrusterButton is a GPUI RenderOnce builder; its flight state is keyed by id.
| Method | Type | Default | Description |
|---|---|---|---|
new(id, label) | impl Into<ElementId>, impl Into<SharedString> | - | Unique id and the button label. |
thrust(a) | f32 | 3200.0 | Net jet acceleration in px/s². Lower values drift, higher values snap. |
tilt(deg) | f32 | 10.0 | Maximum bank in degrees while the craft accelerates sideways. |
dark(bool) | bool | window appearance | Use the dark-theme colors for the button, valves and smoke. |
on_click(f) | Fn(&ClickEvent, &mut Window, &mut App) | - | Fired when the button is clicked. |
disabled(bool) | bool | false | Keeps the craft parked and ignores input. |
Good to know
- It starts parked on the floor. Move the cursor into the playground and it lifts off and flies its center onto the pointer, bouncing off the walls and ceiling. Move the cursor out and it comes straight down and lands where it is.
- Two air jets sit on each of the bottom, left and right edges. There are no top jets, so it descends by easing off the bottom pair and letting gravity pull it down, and it hisses softly to hold a hover.
- GPUI has no custom shaders, so the React version's WebGL fluid simulation is replaced by a particle field: the jets vent puffs that are carried by the jet, slowed by drag, curled by a swirling flow, rolled along the floor on landing, and faded at the same rate as the original's smoke.
- The craft is painted as rotated geometry. GPUI can't rotate glyphs, so while it banks the label's baseline tilts with the craft but each letter stays upright.
- The loop stops once it has landed and the smoke clears.
disabledkeeps it parked.