mirror of
https://github.com/zed-industries/zed.git
synced 2026-05-25 06:24:56 +00:00
Self-Review Checklist: - [x] I've reviewed my own diff for quality, security, and reliability - [x] Unsafe blocks (if any) have justifying comments - [x] The content is consistent with the [UI/UX checklist](https://github.com/zed-industries/zed/blob/main/CONTRIBUTING.md#uiux-checklist) - [x] Tests cover the new/changed behavior - [x] Performance impact has been considered and is acceptable Closes #ISSUE Release Notes: - N/A --------- Co-authored-by: Christopher Biscardi <chris@christopherbiscardi.com>
71 lines
2.8 KiB
Markdown
71 lines
2.8 KiB
Markdown
# GPUI Examples
|
|
|
|
Examples can be run from the Zed repository root:
|
|
|
|
```sh
|
|
cargo run -p gpui --example hello_world
|
|
```
|
|
|
|
## Where to start
|
|
|
|
- `hello_world` shows the basic shape of a GPUI application: create an
|
|
`Application`, open a window, create a root view, and render a `div`.
|
|
- `input` demonstrates text input, focus, selections, clipboard actions, and
|
|
keyboard bindings.
|
|
- `uniform_list` shows how to render a simple virtualized list.
|
|
- `testing` demonstrates `#[gpui::test]`, `TestAppContext`, actions, focus, and
|
|
window-based tests.
|
|
|
|
## Layout and styling
|
|
|
|
- `grid_layout` demonstrates CSS-grid-style layout.
|
|
- `opacity` demonstrates opacity styling.
|
|
- `pattern` shows patterned backgrounds.
|
|
- `shadow` demonstrates box shadows.
|
|
- `text` shows styled text rendering.
|
|
- `text_layout` demonstrates text alignment, decoration, weights, and wrapping.
|
|
- `text_wrapper` shows wrapping text content.
|
|
|
|
## Interaction
|
|
|
|
- `anchor` demonstrates anchored positioning.
|
|
- `data_table` combines virtualized list rendering with table-style rows and a
|
|
custom scrollbar.
|
|
- `drag_drop` shows draggable elements and drop targets.
|
|
- `focus_visible` demonstrates keyboard-visible focus styling.
|
|
- `mouse_pressure` demonstrates pressure-sensitive pointer input where supported.
|
|
- `popover` shows floating layers with `deferred` and `anchored`.
|
|
- `scrollable` demonstrates scrollable content.
|
|
- `tab_stop` shows keyboard tab navigation.
|
|
|
|
## Images, drawing, and animation
|
|
|
|
- `animation` demonstrates GPUI animations and animated SVG transforms.
|
|
- `gif_viewer` shows GIF rendering.
|
|
- `gradient` demonstrates linear gradients and color spaces.
|
|
- `image` shows local and remote image loading, image sizing, and asset setup.
|
|
- `image_gallery` demonstrates image caching and loading remote images.
|
|
- `image_loading` shows image loading states and asset loading.
|
|
- `painting` demonstrates custom drawing with paths and canvas.
|
|
- `svg` shows SVG rendering.
|
|
|
|
## Windows and application behavior
|
|
|
|
- `move_entity_between_windows` shows moving an entity between windows.
|
|
- `on_window_close_quit` demonstrates quitting when a window closes.
|
|
- `set_menus` shows application menu setup.
|
|
- `window` demonstrates creating normal, dialog, popup, and floating windows.
|
|
- `window_positioning` demonstrates window bounds and placement.
|
|
- `window_shadow` demonstrates window shadow styling.
|
|
|
|
## Specialized examples
|
|
|
|
These examples are useful when working on GPUI itself, but they may not be the
|
|
best starting point for new applications:
|
|
|
|
- `active_state_bug` is a focused active-state reproduction.
|
|
- `layer_shell` demonstrates Linux layer-shell windows.
|
|
- `list_example` demonstrates bottom-aligned list state and scrollbar behavior.
|
|
- `ownership_post` supports the ownership and data-flow documentation.
|
|
- `paths_bench` is a path rendering benchmark.
|
|
- `tree` renders a deep tree of nested elements.
|