docs: Fix typo in notifications doc. (#1747)

Close #1745
This commit is contained in:
Jason Lee 2025-12-05 15:25:09 +08:00 committed by GitHub
parent 56fb93bca8
commit 893155bcee
No known key found for this signature in database
GPG key ID: B5690EEEBB952194

View file

@ -10,8 +10,10 @@ A toast notification system for displaying temporary messages to users. Notifica
## Import
```rust
use gpui_component::notification::{Notification, NotificationType};
use gpui_component::WindowExt;
use gpui_component::{
notification::{Notification, NotificationType},
WindowExt
};
```
## Usage
@ -23,24 +25,21 @@ You need to set up your application's root view to render the notification layer
The [Root::render_notification_layer](https://docs.rs/gpui-component/latest/gpui_component/struct.Root.html#method.render_notification_layer) function handles rendering any active modals on top of your app content.
```rust
use gpui_component::TitleBar;
use gpui_component::{TitleBar, Root};
struct MyApp {
view: AnyView,
}
struct Example {}
impl Render for MyApp {
impl Render for Example {
fn render(&mut self, window: &mut Window, cx: &mut Context<Self>) -> impl IntoElement {
let notification_layer = Root::render_notification_layer(window, cx);
div()
.size_full()
.child(
v_flex()
.size_full()
.child(TitleBar::new())
.child(div().flex_1().overflow_hidden().child(self.view.clone())),
.child(div().flex_1().child("Hello world!")),
)
// Render the notification layer on top of the app content
.children(notification_layer)
@ -309,63 +308,3 @@ Notification::new()
cx.notify();
}))
```
## Positioning
Notifications appear in a fixed position at the top right of the window:
- **Position**: `absolute().top_4().right_4()`
- **Stacking**: Newer notifications appear below existing ones
- **Max visible**: Up to 10 notifications shown at once
- **Animation**: Slide down on show, slide right on dismiss
- **Hover expand**: List expands when hovering over notification area
## Animation and Timing
### Show Animation
- **Duration**: 0.25 seconds
- **Easing**: Cubic bezier (0.4, 0, 0.2, 1)
- **Effect**: Slides down and fades in
### Dismiss Animation
- **Duration**: 0.15 seconds
- **Easing**: Cubic bezier (0.4, 0, 0.2, 1)
- **Effect**: Slides right and fades out
### Auto-hide Timing
- **Default delay**: 5 seconds after show
- **Hover pause**: Timer pauses while hovering over notification area
- **Manual dismiss**: Immediate when close button clicked
## Best Practices
### Content Guidelines
- Keep titles concise and descriptive (1-3 words)
- Write clear, actionable messages
- Use appropriate notification types for content
- Provide specific error messages with next steps
### UX Guidelines
- Use auto-hide for confirmations and status updates
- Disable auto-hide for errors requiring user action
- Include action buttons for actionable notifications
- Avoid showing too many notifications simultaneously
### Performance Considerations
- Unique IDs prevent duplicate notifications
- Auto-dismiss reduces notification buildup
- Limit notification frequency to avoid overwhelming users
- Clean up notification subscriptions properly
### Timing Recommendations
- **Success/Info**: Auto-hide after 5 seconds (default)
- **Warnings**: Auto-hide after 7-10 seconds or require action
- **Errors**: Disable auto-hide, require user acknowledgment
- **Progress updates**: Disable auto-hide, update in place