parent
56fb93bca8
commit
893155bcee
1 changed files with 8 additions and 69 deletions
|
|
@ -10,8 +10,10 @@ A toast notification system for displaying temporary messages to users. Notifica
|
||||||
## Import
|
## Import
|
||||||
|
|
||||||
```rust
|
```rust
|
||||||
use gpui_component::notification::{Notification, NotificationType};
|
use gpui_component::{
|
||||||
use gpui_component::WindowExt;
|
notification::{Notification, NotificationType},
|
||||||
|
WindowExt
|
||||||
|
};
|
||||||
```
|
```
|
||||||
|
|
||||||
## Usage
|
## 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.
|
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
|
```rust
|
||||||
use gpui_component::TitleBar;
|
use gpui_component::{TitleBar, Root};
|
||||||
|
|
||||||
struct MyApp {
|
struct Example {}
|
||||||
view: AnyView,
|
|
||||||
}
|
|
||||||
|
|
||||||
impl Render for MyApp {
|
impl Render for Example {
|
||||||
fn render(&mut self, window: &mut Window, cx: &mut Context<Self>) -> impl IntoElement {
|
fn render(&mut self, window: &mut Window, cx: &mut Context<Self>) -> impl IntoElement {
|
||||||
let notification_layer = Root::render_notification_layer(window, cx);
|
let notification_layer = Root::render_notification_layer(window, cx);
|
||||||
|
|
||||||
|
|
||||||
div()
|
div()
|
||||||
.size_full()
|
.size_full()
|
||||||
.child(
|
.child(
|
||||||
v_flex()
|
v_flex()
|
||||||
.size_full()
|
.size_full()
|
||||||
.child(TitleBar::new())
|
.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
|
// Render the notification layer on top of the app content
|
||||||
.children(notification_layer)
|
.children(notification_layer)
|
||||||
|
|
@ -309,63 +308,3 @@ Notification::new()
|
||||||
cx.notify();
|
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
|
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue