settings_ui: Add pickers for theme and icon themes (#40829)
In the process of adding pickers for the theme and icon themes fields in the settings UI, I felt like there was an improvement opportunity in regards to where some of these components are stored. The `ui_input` crate originally was meant only for the text field-like component, which couldn't be in the regular `ui` crate due to the dependency with `editor`. Given we had also added the number field there—which is similar in also having the same dependency—it made sense to think of this crate more like a home for form-like components rather than for only one component. However, we were also storing some settings UI-specific stuff in that crate, which didn't feel right. So I ended up creating a new directory within the `settings_ui` for components and moved all the pickers and the custom input field there. I think this makes it for a cleaner structure. Release Notes: - settings_ui: Added the ability to search for theme and icon themes in their respective fields.
This commit is contained in:
Danilo Leal
@@ -1,181 +0,0 @@
|
||||
use std::sync::Arc;
|
||||
|
||||
use fuzzy::{StringMatch, StringMatchCandidate};
|
||||
use gpui::{AnyElement, App, Context, DismissEvent, SharedString, Task, Window};
|
||||
use picker::{Picker, PickerDelegate};
|
||||
use theme::FontFamilyCache;
|
||||
use ui::{ListItem, ListItemSpacing, prelude::*};
|
||||
|
||||
type FontPicker = Picker<FontPickerDelegate>;
|
||||
|
||||
pub struct FontPickerDelegate {
|
||||
fonts: Vec<SharedString>,
|
||||
filtered_fonts: Vec<StringMatch>,
|
||||
selected_index: usize,
|
||||
current_font: SharedString,
|
||||
on_font_changed: Arc<dyn Fn(SharedString, &mut App) + 'static>,
|
||||
}
|
||||
|
||||
impl FontPickerDelegate {
|
||||
fn new(
|
||||
current_font: SharedString,
|
||||
on_font_changed: impl Fn(SharedString, &mut App) + 'static,
|
||||
cx: &mut Context<FontPicker>,
|
||||
) -> Self {
|
||||
let font_family_cache = FontFamilyCache::global(cx);
|
||||
|
||||
let fonts = font_family_cache
|
||||
.try_list_font_families()
|
||||
.unwrap_or_else(|| vec![current_font.clone()]);
|
||||
let selected_index = fonts
|
||||
.iter()
|
||||
.position(|font| *font == current_font)
|
||||
.unwrap_or(0);
|
||||
|
||||
let filtered_fonts = fonts
|
||||
.iter()
|
||||
.enumerate()
|
||||
.map(|(index, font)| StringMatch {
|
||||
candidate_id: index,
|
||||
string: font.to_string(),
|
||||
positions: Vec::new(),
|
||||
score: 0.0,
|
||||
})
|
||||
.collect();
|
||||
|
||||
Self {
|
||||
fonts,
|
||||
filtered_fonts,
|
||||
selected_index,
|
||||
current_font,
|
||||
on_font_changed: Arc::new(on_font_changed),
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
impl PickerDelegate for FontPickerDelegate {
|
||||
type ListItem = AnyElement;
|
||||
|
||||
fn match_count(&self) -> usize {
|
||||
self.filtered_fonts.len()
|
||||
}
|
||||
|
||||
fn selected_index(&self) -> usize {
|
||||
self.selected_index
|
||||
}
|
||||
|
||||
fn set_selected_index(&mut self, ix: usize, _: &mut Window, cx: &mut Context<FontPicker>) {
|
||||
self.selected_index = ix.min(self.filtered_fonts.len().saturating_sub(1));
|
||||
cx.notify();
|
||||
}
|
||||
|
||||
fn placeholder_text(&self, _window: &mut Window, _cx: &mut App) -> Arc<str> {
|
||||
"Search fonts…".into()
|
||||
}
|
||||
|
||||
fn update_matches(
|
||||
&mut self,
|
||||
query: String,
|
||||
_window: &mut Window,
|
||||
cx: &mut Context<FontPicker>,
|
||||
) -> Task<()> {
|
||||
let fonts = self.fonts.clone();
|
||||
let current_font = self.current_font.clone();
|
||||
|
||||
let matches: Vec<StringMatch> = if query.is_empty() {
|
||||
fonts
|
||||
.iter()
|
||||
.enumerate()
|
||||
.map(|(index, font)| StringMatch {
|
||||
candidate_id: index,
|
||||
string: font.to_string(),
|
||||
positions: Vec::new(),
|
||||
score: 0.0,
|
||||
})
|
||||
.collect()
|
||||
} else {
|
||||
let _candidates: Vec<StringMatchCandidate> = fonts
|
||||
.iter()
|
||||
.enumerate()
|
||||
.map(|(id, font)| StringMatchCandidate::new(id, font.as_ref()))
|
||||
.collect();
|
||||
|
||||
fonts
|
||||
.iter()
|
||||
.enumerate()
|
||||
.filter(|(_, font)| font.to_lowercase().contains(&query.to_lowercase()))
|
||||
.map(|(index, font)| StringMatch {
|
||||
candidate_id: index,
|
||||
string: font.to_string(),
|
||||
positions: Vec::new(),
|
||||
score: 0.0,
|
||||
})
|
||||
.collect()
|
||||
};
|
||||
|
||||
let selected_index = if query.is_empty() {
|
||||
fonts
|
||||
.iter()
|
||||
.position(|font| *font == current_font)
|
||||
.unwrap_or(0)
|
||||
} else {
|
||||
matches
|
||||
.iter()
|
||||
.position(|m| fonts[m.candidate_id] == current_font)
|
||||
.unwrap_or(0)
|
||||
};
|
||||
|
||||
self.filtered_fonts = matches;
|
||||
self.selected_index = selected_index;
|
||||
cx.notify();
|
||||
|
||||
Task::ready(())
|
||||
}
|
||||
|
||||
fn confirm(&mut self, _secondary: bool, _window: &mut Window, cx: &mut Context<FontPicker>) {
|
||||
if let Some(font_match) = self.filtered_fonts.get(self.selected_index) {
|
||||
let font = font_match.string.clone();
|
||||
(self.on_font_changed)(font.into(), cx);
|
||||
}
|
||||
}
|
||||
|
||||
fn dismissed(&mut self, window: &mut Window, cx: &mut Context<FontPicker>) {
|
||||
cx.defer_in(window, |picker, window, cx| {
|
||||
picker.set_query("", window, cx);
|
||||
});
|
||||
cx.emit(DismissEvent);
|
||||
}
|
||||
|
||||
fn render_match(
|
||||
&self,
|
||||
ix: usize,
|
||||
selected: bool,
|
||||
_window: &mut Window,
|
||||
_cx: &mut Context<FontPicker>,
|
||||
) -> Option<Self::ListItem> {
|
||||
let font_match = self.filtered_fonts.get(ix)?;
|
||||
|
||||
Some(
|
||||
ListItem::new(ix)
|
||||
.inset(true)
|
||||
.spacing(ListItemSpacing::Sparse)
|
||||
.toggle_state(selected)
|
||||
.child(Label::new(font_match.string.clone()))
|
||||
.into_any_element(),
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
pub fn font_picker(
|
||||
current_font: SharedString,
|
||||
on_font_changed: impl Fn(SharedString, &mut App) + 'static,
|
||||
window: &mut Window,
|
||||
cx: &mut Context<FontPicker>,
|
||||
) -> FontPicker {
|
||||
let delegate = FontPickerDelegate::new(current_font, on_font_changed, cx);
|
||||
|
||||
Picker::uniform_list(delegate, window, cx)
|
||||
.show_scrollbar(true)
|
||||
.width(rems_from_px(210.))
|
||||
.max_height(Some(rems(18.).into()))
|
||||
}
|
||||
@@ -0,0 +1,222 @@
|
||||
use component::{example_group, single_example};
|
||||
use editor::{Editor, EditorElement, EditorStyle};
|
||||
use gpui::{App, Entity, FocusHandle, Focusable, FontStyle, Hsla, Length, TextStyle};
|
||||
use settings::Settings;
|
||||
use std::sync::Arc;
|
||||
use theme::ThemeSettings;
|
||||
use ui::prelude::*;
|
||||
|
||||
pub struct InputFieldStyle {
|
||||
text_color: Hsla,
|
||||
background_color: Hsla,
|
||||
border_color: Hsla,
|
||||
}
|
||||
|
||||
/// An Input Field component that can be used to create text fields like search inputs, form fields, etc.
|
||||
///
|
||||
/// It wraps a single line [`Editor`] and allows for common field properties like labels, placeholders, icons, etc.
|
||||
#[derive(RegisterComponent)]
|
||||
pub struct InputField {
|
||||
/// An optional label for the text field.
|
||||
///
|
||||
/// Its position is determined by the [`FieldLabelLayout`].
|
||||
label: Option<SharedString>,
|
||||
/// The size of the label text.
|
||||
label_size: LabelSize,
|
||||
/// The placeholder text for the text field.
|
||||
placeholder: SharedString,
|
||||
/// Exposes the underlying [`Entity<Editor>`] to allow for customizing the editor beyond the provided API.
|
||||
///
|
||||
/// This likely will only be public in the short term, ideally the API will be expanded to cover necessary use cases.
|
||||
pub editor: Entity<Editor>,
|
||||
/// An optional icon that is displayed at the start of the text field.
|
||||
///
|
||||
/// For example, a magnifying glass icon in a search field.
|
||||
start_icon: Option<IconName>,
|
||||
/// Whether the text field is disabled.
|
||||
disabled: bool,
|
||||
/// The minimum width of for the input
|
||||
min_width: Length,
|
||||
}
|
||||
|
||||
impl Focusable for InputField {
|
||||
fn focus_handle(&self, cx: &App) -> FocusHandle {
|
||||
self.editor.focus_handle(cx)
|
||||
}
|
||||
}
|
||||
|
||||
impl InputField {
|
||||
pub fn new(window: &mut Window, cx: &mut App, placeholder: impl Into<SharedString>) -> Self {
|
||||
let placeholder_text = placeholder.into();
|
||||
|
||||
let editor = cx.new(|cx| {
|
||||
let mut input = Editor::single_line(window, cx);
|
||||
input.set_placeholder_text(&placeholder_text, window, cx);
|
||||
input
|
||||
});
|
||||
|
||||
Self {
|
||||
label: None,
|
||||
label_size: LabelSize::Small,
|
||||
placeholder: placeholder_text,
|
||||
editor,
|
||||
start_icon: None,
|
||||
disabled: false,
|
||||
min_width: px(192.).into(),
|
||||
}
|
||||
}
|
||||
|
||||
pub fn start_icon(mut self, icon: IconName) -> Self {
|
||||
self.start_icon = Some(icon);
|
||||
self
|
||||
}
|
||||
|
||||
pub fn label(mut self, label: impl Into<SharedString>) -> Self {
|
||||
self.label = Some(label.into());
|
||||
self
|
||||
}
|
||||
|
||||
pub fn label_size(mut self, size: LabelSize) -> Self {
|
||||
self.label_size = size;
|
||||
self
|
||||
}
|
||||
|
||||
pub fn label_min_width(mut self, width: impl Into<Length>) -> Self {
|
||||
self.min_width = width.into();
|
||||
self
|
||||
}
|
||||
|
||||
pub fn set_disabled(&mut self, disabled: bool, cx: &mut Context<Self>) {
|
||||
self.disabled = disabled;
|
||||
self.editor
|
||||
.update(cx, |editor, _| editor.set_read_only(disabled))
|
||||
}
|
||||
|
||||
pub fn is_empty(&self, cx: &App) -> bool {
|
||||
self.editor().read(cx).text(cx).trim().is_empty()
|
||||
}
|
||||
|
||||
pub fn editor(&self) -> &Entity<Editor> {
|
||||
&self.editor
|
||||
}
|
||||
|
||||
pub fn text(&self, cx: &App) -> String {
|
||||
self.editor().read(cx).text(cx)
|
||||
}
|
||||
|
||||
pub fn set_text(&self, text: impl Into<Arc<str>>, window: &mut Window, cx: &mut App) {
|
||||
self.editor()
|
||||
.update(cx, |editor, cx| editor.set_text(text, window, cx))
|
||||
}
|
||||
}
|
||||
|
||||
impl Render for InputField {
|
||||
fn render(&mut self, _: &mut Window, cx: &mut Context<Self>) -> impl IntoElement {
|
||||
let settings = ThemeSettings::get_global(cx);
|
||||
let theme_color = cx.theme().colors();
|
||||
|
||||
let mut style = InputFieldStyle {
|
||||
text_color: theme_color.text,
|
||||
background_color: theme_color.editor_background,
|
||||
border_color: theme_color.border_variant,
|
||||
};
|
||||
|
||||
if self.disabled {
|
||||
style.text_color = theme_color.text_disabled;
|
||||
style.background_color = theme_color.editor_background;
|
||||
style.border_color = theme_color.border_disabled;
|
||||
}
|
||||
|
||||
// if self.error_message.is_some() {
|
||||
// style.text_color = cx.theme().status().error;
|
||||
// style.border_color = cx.theme().status().error_border
|
||||
// }
|
||||
|
||||
let text_style = TextStyle {
|
||||
font_family: settings.ui_font.family.clone(),
|
||||
font_features: settings.ui_font.features.clone(),
|
||||
font_size: rems(0.875).into(),
|
||||
font_weight: settings.buffer_font.weight,
|
||||
font_style: FontStyle::Normal,
|
||||
line_height: relative(1.2),
|
||||
color: style.text_color,
|
||||
..Default::default()
|
||||
};
|
||||
|
||||
let editor_style = EditorStyle {
|
||||
background: theme_color.ghost_element_background,
|
||||
local_player: cx.theme().players().local(),
|
||||
syntax: cx.theme().syntax().clone(),
|
||||
text: text_style,
|
||||
..Default::default()
|
||||
};
|
||||
|
||||
v_flex()
|
||||
.id(self.placeholder.clone())
|
||||
.w_full()
|
||||
.gap_1()
|
||||
.when_some(self.label.clone(), |this, label| {
|
||||
this.child(
|
||||
Label::new(label)
|
||||
.size(self.label_size)
|
||||
.color(if self.disabled {
|
||||
Color::Disabled
|
||||
} else {
|
||||
Color::Default
|
||||
}),
|
||||
)
|
||||
})
|
||||
.child(
|
||||
h_flex()
|
||||
.min_w(self.min_width)
|
||||
.min_h_8()
|
||||
.w_full()
|
||||
.px_2()
|
||||
.py_1p5()
|
||||
.flex_grow()
|
||||
.text_color(style.text_color)
|
||||
.rounded_md()
|
||||
.bg(style.background_color)
|
||||
.border_1()
|
||||
.border_color(style.border_color)
|
||||
.when_some(self.start_icon, |this, icon| {
|
||||
this.gap_1()
|
||||
.child(Icon::new(icon).size(IconSize::Small).color(Color::Muted))
|
||||
})
|
||||
.child(EditorElement::new(&self.editor, editor_style)),
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
impl Component for InputField {
|
||||
fn scope() -> ComponentScope {
|
||||
ComponentScope::Input
|
||||
}
|
||||
|
||||
fn preview(window: &mut Window, cx: &mut App) -> Option<AnyElement> {
|
||||
let input_small =
|
||||
cx.new(|cx| InputField::new(window, cx, "placeholder").label("Small Label"));
|
||||
|
||||
let input_regular = cx.new(|cx| {
|
||||
InputField::new(window, cx, "placeholder")
|
||||
.label("Regular Label")
|
||||
.label_size(LabelSize::Default)
|
||||
});
|
||||
|
||||
Some(
|
||||
v_flex()
|
||||
.gap_6()
|
||||
.children(vec![example_group(vec![
|
||||
single_example(
|
||||
"Small Label (Default)",
|
||||
div().child(input_small).into_any_element(),
|
||||
),
|
||||
single_example(
|
||||
"Regular Label",
|
||||
div().child(input_regular).into_any_element(),
|
||||
),
|
||||
])])
|
||||
.into_any_element(),
|
||||
)
|
||||
}
|
||||
}
|
||||
@@ -1,233 +1,9 @@
|
||||
//! # UI – Text Field
|
||||
//!
|
||||
//! This crate provides a text field component that can be used to create text fields like search inputs, form fields, etc.
|
||||
//! This crate provides UI components that can be used for form-like scenarios, such as a input and number field.
|
||||
//!
|
||||
//! It can't be located in the `ui` crate because it depends on `editor`.
|
||||
//!
|
||||
mod font_picker;
|
||||
mod input_field;
|
||||
mod number_field;
|
||||
|
||||
use component::{example_group, single_example};
|
||||
use editor::{Editor, EditorElement, EditorStyle};
|
||||
pub use font_picker::*;
|
||||
use gpui::{App, Entity, FocusHandle, Focusable, FontStyle, Hsla, Length, TextStyle};
|
||||
pub use input_field::*;
|
||||
pub use number_field::*;
|
||||
use settings::Settings;
|
||||
use std::sync::Arc;
|
||||
use theme::ThemeSettings;
|
||||
use ui::prelude::*;
|
||||
|
||||
pub struct SingleLineInputStyle {
|
||||
text_color: Hsla,
|
||||
background_color: Hsla,
|
||||
border_color: Hsla,
|
||||
}
|
||||
|
||||
/// A Text Field that can be used to create text fields like search inputs, form fields, etc.
|
||||
///
|
||||
/// It wraps a single line [`Editor`] and allows for common field properties like labels, placeholders, icons, etc.
|
||||
#[derive(RegisterComponent)]
|
||||
pub struct SingleLineInput {
|
||||
/// An optional label for the text field.
|
||||
///
|
||||
/// Its position is determined by the [`FieldLabelLayout`].
|
||||
label: Option<SharedString>,
|
||||
/// The size of the label text.
|
||||
label_size: LabelSize,
|
||||
/// The placeholder text for the text field.
|
||||
placeholder: SharedString,
|
||||
/// Exposes the underlying [`Entity<Editor>`] to allow for customizing the editor beyond the provided API.
|
||||
///
|
||||
/// This likely will only be public in the short term, ideally the API will be expanded to cover necessary use cases.
|
||||
pub editor: Entity<Editor>,
|
||||
/// An optional icon that is displayed at the start of the text field.
|
||||
///
|
||||
/// For example, a magnifying glass icon in a search field.
|
||||
start_icon: Option<IconName>,
|
||||
/// Whether the text field is disabled.
|
||||
disabled: bool,
|
||||
/// The minimum width of for the input
|
||||
min_width: Length,
|
||||
}
|
||||
|
||||
impl Focusable for SingleLineInput {
|
||||
fn focus_handle(&self, cx: &App) -> FocusHandle {
|
||||
self.editor.focus_handle(cx)
|
||||
}
|
||||
}
|
||||
|
||||
impl SingleLineInput {
|
||||
pub fn new(window: &mut Window, cx: &mut App, placeholder: impl Into<SharedString>) -> Self {
|
||||
let placeholder_text = placeholder.into();
|
||||
|
||||
let editor = cx.new(|cx| {
|
||||
let mut input = Editor::single_line(window, cx);
|
||||
input.set_placeholder_text(&placeholder_text, window, cx);
|
||||
input
|
||||
});
|
||||
|
||||
Self {
|
||||
label: None,
|
||||
label_size: LabelSize::Small,
|
||||
placeholder: placeholder_text,
|
||||
editor,
|
||||
start_icon: None,
|
||||
disabled: false,
|
||||
min_width: px(192.).into(),
|
||||
}
|
||||
}
|
||||
|
||||
pub fn start_icon(mut self, icon: IconName) -> Self {
|
||||
self.start_icon = Some(icon);
|
||||
self
|
||||
}
|
||||
|
||||
pub fn label(mut self, label: impl Into<SharedString>) -> Self {
|
||||
self.label = Some(label.into());
|
||||
self
|
||||
}
|
||||
|
||||
pub fn label_size(mut self, size: LabelSize) -> Self {
|
||||
self.label_size = size;
|
||||
self
|
||||
}
|
||||
|
||||
pub fn label_min_width(mut self, width: impl Into<Length>) -> Self {
|
||||
self.min_width = width.into();
|
||||
self
|
||||
}
|
||||
|
||||
pub fn set_disabled(&mut self, disabled: bool, cx: &mut Context<Self>) {
|
||||
self.disabled = disabled;
|
||||
self.editor
|
||||
.update(cx, |editor, _| editor.set_read_only(disabled))
|
||||
}
|
||||
|
||||
pub fn is_empty(&self, cx: &App) -> bool {
|
||||
self.editor().read(cx).text(cx).trim().is_empty()
|
||||
}
|
||||
|
||||
pub fn editor(&self) -> &Entity<Editor> {
|
||||
&self.editor
|
||||
}
|
||||
|
||||
pub fn text(&self, cx: &App) -> String {
|
||||
self.editor().read(cx).text(cx)
|
||||
}
|
||||
|
||||
pub fn set_text(&self, text: impl Into<Arc<str>>, window: &mut Window, cx: &mut App) {
|
||||
self.editor()
|
||||
.update(cx, |editor, cx| editor.set_text(text, window, cx))
|
||||
}
|
||||
}
|
||||
|
||||
impl Render for SingleLineInput {
|
||||
fn render(&mut self, _: &mut Window, cx: &mut Context<Self>) -> impl IntoElement {
|
||||
let settings = ThemeSettings::get_global(cx);
|
||||
let theme_color = cx.theme().colors();
|
||||
|
||||
let mut style = SingleLineInputStyle {
|
||||
text_color: theme_color.text,
|
||||
background_color: theme_color.editor_background,
|
||||
border_color: theme_color.border_variant,
|
||||
};
|
||||
|
||||
if self.disabled {
|
||||
style.text_color = theme_color.text_disabled;
|
||||
style.background_color = theme_color.editor_background;
|
||||
style.border_color = theme_color.border_disabled;
|
||||
}
|
||||
|
||||
// if self.error_message.is_some() {
|
||||
// style.text_color = cx.theme().status().error;
|
||||
// style.border_color = cx.theme().status().error_border
|
||||
// }
|
||||
|
||||
let text_style = TextStyle {
|
||||
font_family: settings.ui_font.family.clone(),
|
||||
font_features: settings.ui_font.features.clone(),
|
||||
font_size: rems(0.875).into(),
|
||||
font_weight: settings.buffer_font.weight,
|
||||
font_style: FontStyle::Normal,
|
||||
line_height: relative(1.2),
|
||||
color: style.text_color,
|
||||
..Default::default()
|
||||
};
|
||||
|
||||
let editor_style = EditorStyle {
|
||||
background: theme_color.ghost_element_background,
|
||||
local_player: cx.theme().players().local(),
|
||||
syntax: cx.theme().syntax().clone(),
|
||||
text: text_style,
|
||||
..Default::default()
|
||||
};
|
||||
|
||||
v_flex()
|
||||
.id(self.placeholder.clone())
|
||||
.w_full()
|
||||
.gap_1()
|
||||
.when_some(self.label.clone(), |this, label| {
|
||||
this.child(
|
||||
Label::new(label)
|
||||
.size(self.label_size)
|
||||
.color(if self.disabled {
|
||||
Color::Disabled
|
||||
} else {
|
||||
Color::Default
|
||||
}),
|
||||
)
|
||||
})
|
||||
.child(
|
||||
h_flex()
|
||||
.min_w(self.min_width)
|
||||
.min_h_8()
|
||||
.w_full()
|
||||
.px_2()
|
||||
.py_1p5()
|
||||
.flex_grow()
|
||||
.text_color(style.text_color)
|
||||
.rounded_md()
|
||||
.bg(style.background_color)
|
||||
.border_1()
|
||||
.border_color(style.border_color)
|
||||
.when_some(self.start_icon, |this, icon| {
|
||||
this.gap_1()
|
||||
.child(Icon::new(icon).size(IconSize::Small).color(Color::Muted))
|
||||
})
|
||||
.child(EditorElement::new(&self.editor, editor_style)),
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
impl Component for SingleLineInput {
|
||||
fn scope() -> ComponentScope {
|
||||
ComponentScope::Input
|
||||
}
|
||||
|
||||
fn preview(window: &mut Window, cx: &mut App) -> Option<AnyElement> {
|
||||
let input_small =
|
||||
cx.new(|cx| SingleLineInput::new(window, cx, "placeholder").label("Small Label"));
|
||||
|
||||
let input_regular = cx.new(|cx| {
|
||||
SingleLineInput::new(window, cx, "placeholder")
|
||||
.label("Regular Label")
|
||||
.label_size(LabelSize::Default)
|
||||
});
|
||||
|
||||
Some(
|
||||
v_flex()
|
||||
.gap_6()
|
||||
.children(vec![example_group(vec![
|
||||
single_example(
|
||||
"Small Label (Default)",
|
||||
div().child(input_small).into_any_element(),
|
||||
),
|
||||
single_example(
|
||||
"Regular Label",
|
||||
div().child(input_regular).into_any_element(),
|
||||
),
|
||||
])])
|
||||
.into_any_element(),
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user