Skip to content

setting: Add title_suffix for setting page header #2559

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
madcodelife merged 2 commits into from
Jul 13, 2026
Merged

setting: Add title_suffix for setting page header #2559

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
79106d7
setting: Add `title_suffix` for setting page header
madcodelife Jul 13, 2026
f287114
Merge branch 'main' into setting-title-suffix
madcodelife Jul 13, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 9 additions & 0 deletions crates/story/src/stories/settings_story.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -139,6 +139,15 @@ impl SettingsStory {
.resettable(resettable)
.default_open(true)
.icon(Icon::new(IconName::Settings2))
.title_suffix(|_, _| {
Comment thread
madcodelife marked this conversation as resolved.
Button::new("help")
.icon(IconName::Info)
.ghost()
.xsmall()
.on_click(|_, _, cx| {
cx.open_url("https://longbridge.github.io/gpui-component/")
})
})
.groups(vec![
SettingGroup::new().title("Appearance").items(vec![
SettingItem::new(
Expand Down
61 changes: 44 additions & 17 deletions crates/ui/src/setting/page.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
use std::rc::Rc;

use gpui::{
App, Entity, InteractiveElement as _, IntoElement, ListAlignment, ListState,
AnyElement, App, Entity, InteractiveElement as _, IntoElement, ListAlignment, ListState,
ParentElement as _, SharedString, StyleRefinement, Styled, Window, div, list,
prelude::FluentBuilder as _, px,
};
Expand All @@ -22,6 +24,7 @@ pub struct SettingPage {
resettable: bool,
pub(super) default_open: bool,
pub(super) title: SharedString,
pub(super) title_suffix: Option<Rc<dyn Fn(&mut Window, &mut App) -> AnyElement>>,
pub(super) description: Option<SharedString>,
pub(super) groups: Vec<SettingGroup>,
pub(super) header_style: StyleRefinement,
Expand All @@ -34,6 +37,7 @@ impl SettingPage {
resettable: true,
default_open: false,
title: title.into(),
title_suffix: None,
description: None,
groups: Vec::new(),
header_style: StyleRefinement::default(),
Expand All @@ -46,6 +50,20 @@ impl SettingPage {
self
}

/// Set a custom element to render after the title in the page header.
///
/// For example, an info icon button that opens the help documentation.
pub fn title_suffix<F, E>(mut self, suffix: F) -> Self
where
E: IntoElement,
F: Fn(&mut Window, &mut App) -> E + 'static,
{
self.title_suffix = Some(Rc::new(move |window, cx| {
suffix(window, cx).into_any_element()
}));
self
}

/// Set the icon of the setting page.
pub fn icon(mut self, icon: impl Into<Icon>) -> Self {
self.icon = Some(icon.into());
Expand Down Expand Up @@ -149,24 +167,33 @@ impl SettingPage {
.border_b_1()
.border_color(cx.theme().border)
.refine_style(&self.header_style)
.child(h_flex().justify_between().child(self.title.clone()).when(
self.is_resettable(cx),
|this| {
this.child(
Button::new("reset")
.icon(IconName::Undo2)
.ghost()
.small()
.tooltip(t!("Settings.Reset All"))
.on_click({
let page = self.clone();
move |_, window, cx| {
page.reset_all(window, cx);
}
.child(
h_flex()
.justify_between()
.child(
h_flex()
.gap_1()
.child(self.title.clone())
.when_some(self.title_suffix.clone(), |this, suffix| {
this.child(suffix(window, cx))
}),
)
},
))
.when(self.is_resettable(cx), |this| {
this.child(
Button::new("reset")
.icon(IconName::Undo2)
.ghost()
.small()
.tooltip(t!("Settings.Reset All"))
.on_click({
let page = self.clone();
move |_, window, cx| {
page.reset_all(window, cx);
}
}),
)
}),
)
.when_some(self.description.clone(), |this, description| {
this.child(
Label::new(description)
Expand Down
17 changes: 17 additions & 0 deletions docs/docs/components/settings.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -127,6 +127,23 @@ SettingPage::new("General")
.groups(vec![...])
```

### Title Suffix

Use `title_suffix` to render a custom element after the title in the page header,
for example an info icon button that opens the help documentation:

```rust
SettingPage::new("General")
.title_suffix(|_, _| {
Button::new("help")
.icon(IconName::Info)
.ghost()
.xsmall()
.on_click(|_, _, cx| cx.open_url("https://example.com/help"))
})
.groups(vec![...])
```

### Default Open

```rust
Expand Down
16 changes: 16 additions & 0 deletions docs/zh-CN/docs/components/settings.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -126,6 +126,22 @@ SettingPage::new("General")
.groups(vec![...])
```

### 标题后缀

使用 `title_suffix` 在页头标题后渲染自定义元素，例如一个点击后打开帮助文档的 info 图标按钮：

```rust
SettingPage::new("General")
.title_suffix(|_, _| {
Button::new("help")
.icon(IconName::Info)
.ghost()
.xsmall()
.on_click(|_, _, cx| cx.open_url("https://example.com/help"))
})
.groups(vec![...])
```

### 默认展开

```rust
Expand Down
Loading