Merge Component and ComponentPreview trait (#28365)
- Merge `Component` and `ComponentPreview` trait - Adds a number of component previews - Removes a number of stories Release Notes: - N/A
This commit is contained in:
Nate Butler
@@ -1,6 +1,6 @@
|
||||
use component::{ComponentPreview, example_group_with_title, single_example};
|
||||
use crate::component_prelude::*;
|
||||
use gpui::{AnyElement, AnyView, DefiniteLength};
|
||||
use ui_macros::IntoComponent;
|
||||
use ui_macros::RegisterComponent;
|
||||
|
||||
use crate::{ButtonCommon, ButtonLike, ButtonSize, ButtonStyle, IconName, IconSize, Label};
|
||||
use crate::{
|
||||
@@ -77,8 +77,7 @@ use super::button_icon::ButtonIcon;
|
||||
/// });
|
||||
/// ```
|
||||
///
|
||||
#[derive(IntoElement, IntoComponent)]
|
||||
#[component(scope = "Input")]
|
||||
#[derive(IntoElement, Documented, RegisterComponent)]
|
||||
pub struct Button {
|
||||
base: ButtonLike,
|
||||
label: SharedString,
|
||||
@@ -466,121 +465,135 @@ impl RenderOnce for Button {
|
||||
}
|
||||
|
||||
// View this component preview using `workspace: open component-preview`
|
||||
impl ComponentPreview for Button {
|
||||
fn preview(_window: &mut Window, _cx: &mut App) -> AnyElement {
|
||||
v_flex()
|
||||
.gap_6()
|
||||
.children(vec![
|
||||
example_group_with_title(
|
||||
"Button Styles",
|
||||
vec![
|
||||
single_example(
|
||||
"Default",
|
||||
Button::new("default", "Default").into_any_element(),
|
||||
),
|
||||
single_example(
|
||||
"Filled",
|
||||
Button::new("filled", "Filled")
|
||||
.style(ButtonStyle::Filled)
|
||||
.into_any_element(),
|
||||
),
|
||||
single_example(
|
||||
"Subtle",
|
||||
Button::new("outline", "Subtle")
|
||||
.style(ButtonStyle::Subtle)
|
||||
.into_any_element(),
|
||||
),
|
||||
single_example(
|
||||
"Tinted",
|
||||
Button::new("tinted_accent_style", "Accent")
|
||||
.style(ButtonStyle::Tinted(TintColor::Accent))
|
||||
.into_any_element(),
|
||||
),
|
||||
single_example(
|
||||
"Transparent",
|
||||
Button::new("transparent", "Transparent")
|
||||
.style(ButtonStyle::Transparent)
|
||||
.into_any_element(),
|
||||
),
|
||||
],
|
||||
),
|
||||
example_group_with_title(
|
||||
"Tint Styles",
|
||||
vec![
|
||||
single_example(
|
||||
"Accent",
|
||||
Button::new("tinted_accent", "Accent")
|
||||
.style(ButtonStyle::Tinted(TintColor::Accent))
|
||||
.into_any_element(),
|
||||
),
|
||||
single_example(
|
||||
"Error",
|
||||
Button::new("tinted_negative", "Error")
|
||||
.style(ButtonStyle::Tinted(TintColor::Error))
|
||||
.into_any_element(),
|
||||
),
|
||||
single_example(
|
||||
"Warning",
|
||||
Button::new("tinted_warning", "Warning")
|
||||
.style(ButtonStyle::Tinted(TintColor::Warning))
|
||||
.into_any_element(),
|
||||
),
|
||||
single_example(
|
||||
"Success",
|
||||
Button::new("tinted_positive", "Success")
|
||||
.style(ButtonStyle::Tinted(TintColor::Success))
|
||||
.into_any_element(),
|
||||
),
|
||||
],
|
||||
),
|
||||
example_group_with_title(
|
||||
"Special States",
|
||||
vec![
|
||||
single_example(
|
||||
"Default",
|
||||
Button::new("default_state", "Default").into_any_element(),
|
||||
),
|
||||
single_example(
|
||||
"Disabled",
|
||||
Button::new("disabled", "Disabled")
|
||||
.disabled(true)
|
||||
.into_any_element(),
|
||||
),
|
||||
single_example(
|
||||
"Selected",
|
||||
Button::new("selected", "Selected")
|
||||
.toggle_state(true)
|
||||
.into_any_element(),
|
||||
),
|
||||
],
|
||||
),
|
||||
example_group_with_title(
|
||||
"Buttons with Icons",
|
||||
vec![
|
||||
single_example(
|
||||
"Icon Start",
|
||||
Button::new("icon_start", "Icon Start")
|
||||
.icon(IconName::Check)
|
||||
.icon_position(IconPosition::Start)
|
||||
.into_any_element(),
|
||||
),
|
||||
single_example(
|
||||
"Icon End",
|
||||
Button::new("icon_end", "Icon End")
|
||||
.icon(IconName::Check)
|
||||
.icon_position(IconPosition::End)
|
||||
.into_any_element(),
|
||||
),
|
||||
single_example(
|
||||
"Icon Color",
|
||||
Button::new("icon_color", "Icon Color")
|
||||
.icon(IconName::Check)
|
||||
.icon_color(Color::Accent)
|
||||
.into_any_element(),
|
||||
),
|
||||
],
|
||||
),
|
||||
])
|
||||
.into_any_element()
|
||||
impl Component for Button {
|
||||
fn scope() -> ComponentScope {
|
||||
ComponentScope::Input
|
||||
}
|
||||
|
||||
fn sort_name() -> &'static str {
|
||||
"ButtonA"
|
||||
}
|
||||
|
||||
fn description() -> Option<&'static str> {
|
||||
Some("A button triggers an event or action.")
|
||||
}
|
||||
|
||||
fn preview(_window: &mut Window, _cx: &mut App) -> Option<AnyElement> {
|
||||
Some(
|
||||
v_flex()
|
||||
.gap_6()
|
||||
.children(vec![
|
||||
example_group_with_title(
|
||||
"Button Styles",
|
||||
vec![
|
||||
single_example(
|
||||
"Default",
|
||||
Button::new("default", "Default").into_any_element(),
|
||||
),
|
||||
single_example(
|
||||
"Filled",
|
||||
Button::new("filled", "Filled")
|
||||
.style(ButtonStyle::Filled)
|
||||
.into_any_element(),
|
||||
),
|
||||
single_example(
|
||||
"Subtle",
|
||||
Button::new("outline", "Subtle")
|
||||
.style(ButtonStyle::Subtle)
|
||||
.into_any_element(),
|
||||
),
|
||||
single_example(
|
||||
"Tinted",
|
||||
Button::new("tinted_accent_style", "Accent")
|
||||
.style(ButtonStyle::Tinted(TintColor::Accent))
|
||||
.into_any_element(),
|
||||
),
|
||||
single_example(
|
||||
"Transparent",
|
||||
Button::new("transparent", "Transparent")
|
||||
.style(ButtonStyle::Transparent)
|
||||
.into_any_element(),
|
||||
),
|
||||
],
|
||||
),
|
||||
example_group_with_title(
|
||||
"Tint Styles",
|
||||
vec![
|
||||
single_example(
|
||||
"Accent",
|
||||
Button::new("tinted_accent", "Accent")
|
||||
.style(ButtonStyle::Tinted(TintColor::Accent))
|
||||
.into_any_element(),
|
||||
),
|
||||
single_example(
|
||||
"Error",
|
||||
Button::new("tinted_negative", "Error")
|
||||
.style(ButtonStyle::Tinted(TintColor::Error))
|
||||
.into_any_element(),
|
||||
),
|
||||
single_example(
|
||||
"Warning",
|
||||
Button::new("tinted_warning", "Warning")
|
||||
.style(ButtonStyle::Tinted(TintColor::Warning))
|
||||
.into_any_element(),
|
||||
),
|
||||
single_example(
|
||||
"Success",
|
||||
Button::new("tinted_positive", "Success")
|
||||
.style(ButtonStyle::Tinted(TintColor::Success))
|
||||
.into_any_element(),
|
||||
),
|
||||
],
|
||||
),
|
||||
example_group_with_title(
|
||||
"Special States",
|
||||
vec![
|
||||
single_example(
|
||||
"Default",
|
||||
Button::new("default_state", "Default").into_any_element(),
|
||||
),
|
||||
single_example(
|
||||
"Disabled",
|
||||
Button::new("disabled", "Disabled")
|
||||
.disabled(true)
|
||||
.into_any_element(),
|
||||
),
|
||||
single_example(
|
||||
"Selected",
|
||||
Button::new("selected", "Selected")
|
||||
.toggle_state(true)
|
||||
.into_any_element(),
|
||||
),
|
||||
],
|
||||
),
|
||||
example_group_with_title(
|
||||
"Buttons with Icons",
|
||||
vec![
|
||||
single_example(
|
||||
"Icon Start",
|
||||
Button::new("icon_start", "Icon Start")
|
||||
.icon(IconName::Check)
|
||||
.icon_position(IconPosition::Start)
|
||||
.into_any_element(),
|
||||
),
|
||||
single_example(
|
||||
"Icon End",
|
||||
Button::new("icon_end", "Icon End")
|
||||
.icon(IconName::Check)
|
||||
.icon_position(IconPosition::End)
|
||||
.into_any_element(),
|
||||
),
|
||||
single_example(
|
||||
"Icon Color",
|
||||
Button::new("icon_color", "Icon Color")
|
||||
.icon(IconName::Check)
|
||||
.icon_color(Color::Accent)
|
||||
.into_any_element(),
|
||||
),
|
||||
],
|
||||
),
|
||||
])
|
||||
.into_any_element(),
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
@@ -5,7 +5,7 @@ use gpui::Hsla;
|
||||
///
|
||||
/// Can be used as either an icon alongside a label, like in [`Button`](crate::Button),
|
||||
/// or as a standalone icon, like in [`IconButton`](crate::IconButton).
|
||||
#[derive(IntoElement)]
|
||||
#[derive(IntoElement, RegisterComponent)]
|
||||
pub(super) struct ButtonIcon {
|
||||
icon: IconName,
|
||||
size: IconSize,
|
||||
@@ -39,7 +39,6 @@ impl ButtonIcon {
|
||||
if let Some(size) = size.into() {
|
||||
self.size = size;
|
||||
}
|
||||
|
||||
self
|
||||
}
|
||||
|
||||
@@ -47,7 +46,6 @@ impl ButtonIcon {
|
||||
if let Some(color) = color.into() {
|
||||
self.color = color;
|
||||
}
|
||||
|
||||
self
|
||||
}
|
||||
|
||||
@@ -120,3 +118,82 @@ impl RenderOnce for ButtonIcon {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
impl Component for ButtonIcon {
|
||||
fn scope() -> ComponentScope {
|
||||
ComponentScope::Input
|
||||
}
|
||||
|
||||
fn name() -> &'static str {
|
||||
"ButtonIcon"
|
||||
}
|
||||
|
||||
fn description() -> Option<&'static str> {
|
||||
Some("An icon component specifically designed for use within buttons.")
|
||||
}
|
||||
|
||||
fn preview(_window: &mut Window, _cx: &mut App) -> Option<AnyElement> {
|
||||
Some(
|
||||
v_flex()
|
||||
.gap_6()
|
||||
.children(vec![
|
||||
example_group_with_title(
|
||||
"Basic Usage",
|
||||
vec![
|
||||
single_example(
|
||||
"Default",
|
||||
ButtonIcon::new(IconName::Star).into_any_element(),
|
||||
),
|
||||
single_example(
|
||||
"Custom Size",
|
||||
ButtonIcon::new(IconName::Star)
|
||||
.size(IconSize::Medium)
|
||||
.into_any_element(),
|
||||
),
|
||||
single_example(
|
||||
"Custom Color",
|
||||
ButtonIcon::new(IconName::Star)
|
||||
.color(Color::Accent)
|
||||
.into_any_element(),
|
||||
),
|
||||
],
|
||||
),
|
||||
example_group_with_title(
|
||||
"States",
|
||||
vec![
|
||||
single_example(
|
||||
"Selected",
|
||||
ButtonIcon::new(IconName::Star)
|
||||
.toggle_state(true)
|
||||
.into_any_element(),
|
||||
),
|
||||
single_example(
|
||||
"Disabled",
|
||||
ButtonIcon::new(IconName::Star)
|
||||
.disabled(true)
|
||||
.into_any_element(),
|
||||
),
|
||||
],
|
||||
),
|
||||
example_group_with_title(
|
||||
"With Indicator",
|
||||
vec![
|
||||
single_example(
|
||||
"Default Indicator",
|
||||
ButtonIcon::new(IconName::Star)
|
||||
.indicator(Indicator::dot())
|
||||
.into_any_element(),
|
||||
),
|
||||
single_example(
|
||||
"Custom Indicator",
|
||||
ButtonIcon::new(IconName::Star)
|
||||
.indicator(Indicator::dot().color(Color::Error))
|
||||
.into_any_element(),
|
||||
),
|
||||
],
|
||||
),
|
||||
])
|
||||
.into_any_element(),
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,5 +1,8 @@
|
||||
use gpui::{AnyElement, AnyView, ClickEvent, Hsla, Rems, transparent_black};
|
||||
use gpui::{CursorStyle, DefiniteLength, MouseButton, MouseDownEvent, MouseUpEvent, relative};
|
||||
use documented::Documented;
|
||||
use gpui::{
|
||||
AnyElement, AnyView, ClickEvent, CursorStyle, DefiniteLength, Hsla, MouseButton,
|
||||
MouseDownEvent, MouseUpEvent, Rems, relative, transparent_black,
|
||||
};
|
||||
use smallvec::SmallVec;
|
||||
|
||||
use crate::{DynamicSpacing, ElevationIndex, prelude::*};
|
||||
@@ -343,7 +346,7 @@ impl ButtonSize {
|
||||
/// unconstrained and may make the UI feel less consistent.
|
||||
///
|
||||
/// This is also used to build the prebuilt buttons.
|
||||
#[derive(IntoElement)]
|
||||
#[derive(IntoElement, Documented, RegisterComponent)]
|
||||
pub struct ButtonLike {
|
||||
pub(super) base: Div,
|
||||
id: ElementId,
|
||||
@@ -585,3 +588,99 @@ impl RenderOnce for ButtonLike {
|
||||
.children(self.children)
|
||||
}
|
||||
}
|
||||
|
||||
impl Component for ButtonLike {
|
||||
fn scope() -> ComponentScope {
|
||||
ComponentScope::Input
|
||||
}
|
||||
|
||||
fn sort_name() -> &'static str {
|
||||
// ButtonLike should be at the bottom of the button list
|
||||
"ButtonZ"
|
||||
}
|
||||
|
||||
fn description() -> Option<&'static str> {
|
||||
Some(ButtonLike::DOCS)
|
||||
}
|
||||
|
||||
fn preview(_window: &mut Window, _cx: &mut App) -> Option<AnyElement> {
|
||||
Some(
|
||||
v_flex()
|
||||
.gap_6()
|
||||
.children(vec![
|
||||
example_group(vec![
|
||||
single_example(
|
||||
"Default",
|
||||
ButtonLike::new("default")
|
||||
.child(Label::new("Default"))
|
||||
.into_any_element(),
|
||||
),
|
||||
single_example(
|
||||
"Filled",
|
||||
ButtonLike::new("filled")
|
||||
.style(ButtonStyle::Filled)
|
||||
.child(Label::new("Filled"))
|
||||
.into_any_element(),
|
||||
),
|
||||
single_example(
|
||||
"Subtle",
|
||||
ButtonLike::new("outline")
|
||||
.style(ButtonStyle::Subtle)
|
||||
.child(Label::new("Subtle"))
|
||||
.into_any_element(),
|
||||
),
|
||||
single_example(
|
||||
"Tinted",
|
||||
ButtonLike::new("tinted_accent_style")
|
||||
.style(ButtonStyle::Tinted(TintColor::Accent))
|
||||
.child(Label::new("Accent"))
|
||||
.into_any_element(),
|
||||
),
|
||||
single_example(
|
||||
"Transparent",
|
||||
ButtonLike::new("transparent")
|
||||
.style(ButtonStyle::Transparent)
|
||||
.child(Label::new("Transparent"))
|
||||
.into_any_element(),
|
||||
),
|
||||
]),
|
||||
example_group_with_title(
|
||||
"Button Group Constructors",
|
||||
vec![
|
||||
single_example(
|
||||
"Left Rounded",
|
||||
ButtonLike::new_rounded_left("left_rounded")
|
||||
.child(Label::new("Left Rounded"))
|
||||
.style(ButtonStyle::Filled)
|
||||
.into_any_element(),
|
||||
),
|
||||
single_example(
|
||||
"Right Rounded",
|
||||
ButtonLike::new_rounded_right("right_rounded")
|
||||
.child(Label::new("Right Rounded"))
|
||||
.style(ButtonStyle::Filled)
|
||||
.into_any_element(),
|
||||
),
|
||||
single_example(
|
||||
"Button Group",
|
||||
h_flex()
|
||||
.gap_px()
|
||||
.child(
|
||||
ButtonLike::new_rounded_left("bg_left")
|
||||
.child(Label::new("Left"))
|
||||
.style(ButtonStyle::Filled),
|
||||
)
|
||||
.child(
|
||||
ButtonLike::new_rounded_right("bg_right")
|
||||
.child(Label::new("Right"))
|
||||
.style(ButtonStyle::Filled),
|
||||
)
|
||||
.into_any_element(),
|
||||
),
|
||||
],
|
||||
),
|
||||
])
|
||||
.into_any_element(),
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
@@ -13,8 +13,7 @@ pub enum IconButtonShape {
|
||||
Wide,
|
||||
}
|
||||
|
||||
#[derive(IntoElement, IntoComponent)]
|
||||
#[component(scope = "Input")]
|
||||
#[derive(IntoElement, RegisterComponent)]
|
||||
pub struct IconButton {
|
||||
base: ButtonLike,
|
||||
shape: IconButtonShape,
|
||||
@@ -210,159 +209,169 @@ impl RenderOnce for IconButton {
|
||||
}
|
||||
}
|
||||
|
||||
impl ComponentPreview for IconButton {
|
||||
fn preview(_window: &mut Window, _cx: &mut App) -> AnyElement {
|
||||
v_flex()
|
||||
.gap_6()
|
||||
.children(vec![
|
||||
example_group_with_title(
|
||||
"Icon Button Styles",
|
||||
vec![
|
||||
single_example(
|
||||
"Default",
|
||||
IconButton::new("default", IconName::Check)
|
||||
.layer(ElevationIndex::Background)
|
||||
.into_any_element(),
|
||||
),
|
||||
single_example(
|
||||
"Filled",
|
||||
IconButton::new("filled", IconName::Check)
|
||||
.layer(ElevationIndex::Background)
|
||||
.style(ButtonStyle::Filled)
|
||||
.into_any_element(),
|
||||
),
|
||||
single_example(
|
||||
"Subtle",
|
||||
IconButton::new("subtle", IconName::Check)
|
||||
.layer(ElevationIndex::Background)
|
||||
.style(ButtonStyle::Subtle)
|
||||
.into_any_element(),
|
||||
),
|
||||
single_example(
|
||||
"Tinted",
|
||||
IconButton::new("tinted", IconName::Check)
|
||||
.layer(ElevationIndex::Background)
|
||||
.style(ButtonStyle::Tinted(TintColor::Accent))
|
||||
.into_any_element(),
|
||||
),
|
||||
single_example(
|
||||
"Transparent",
|
||||
IconButton::new("transparent", IconName::Check)
|
||||
.layer(ElevationIndex::Background)
|
||||
.style(ButtonStyle::Transparent)
|
||||
.into_any_element(),
|
||||
),
|
||||
],
|
||||
),
|
||||
example_group_with_title(
|
||||
"Icon Button Shapes",
|
||||
vec![
|
||||
single_example(
|
||||
"Square",
|
||||
IconButton::new("square", IconName::Check)
|
||||
.shape(IconButtonShape::Square)
|
||||
.style(ButtonStyle::Filled)
|
||||
.layer(ElevationIndex::Background)
|
||||
.into_any_element(),
|
||||
),
|
||||
single_example(
|
||||
"Wide",
|
||||
IconButton::new("wide", IconName::Check)
|
||||
.shape(IconButtonShape::Wide)
|
||||
.style(ButtonStyle::Filled)
|
||||
.layer(ElevationIndex::Background)
|
||||
.into_any_element(),
|
||||
),
|
||||
],
|
||||
),
|
||||
example_group_with_title(
|
||||
"Icon Button Sizes",
|
||||
vec![
|
||||
single_example(
|
||||
"Small",
|
||||
IconButton::new("small", IconName::Check)
|
||||
.icon_size(IconSize::XSmall)
|
||||
.style(ButtonStyle::Filled)
|
||||
.layer(ElevationIndex::Background)
|
||||
.into_any_element(),
|
||||
),
|
||||
single_example(
|
||||
"Small",
|
||||
IconButton::new("small", IconName::Check)
|
||||
.icon_size(IconSize::Small)
|
||||
.style(ButtonStyle::Filled)
|
||||
.layer(ElevationIndex::Background)
|
||||
.into_any_element(),
|
||||
),
|
||||
single_example(
|
||||
"Medium",
|
||||
IconButton::new("medium", IconName::Check)
|
||||
.icon_size(IconSize::Medium)
|
||||
.style(ButtonStyle::Filled)
|
||||
.layer(ElevationIndex::Background)
|
||||
.into_any_element(),
|
||||
),
|
||||
single_example(
|
||||
"XLarge",
|
||||
IconButton::new("xlarge", IconName::Check)
|
||||
.icon_size(IconSize::XLarge)
|
||||
.style(ButtonStyle::Filled)
|
||||
.layer(ElevationIndex::Background)
|
||||
.into_any_element(),
|
||||
),
|
||||
],
|
||||
),
|
||||
example_group_with_title(
|
||||
"Special States",
|
||||
vec![
|
||||
single_example(
|
||||
"Disabled",
|
||||
IconButton::new("disabled", IconName::Check)
|
||||
.disabled(true)
|
||||
.style(ButtonStyle::Filled)
|
||||
.layer(ElevationIndex::Background)
|
||||
.into_any_element(),
|
||||
),
|
||||
single_example(
|
||||
"Selected",
|
||||
IconButton::new("selected", IconName::Check)
|
||||
.toggle_state(true)
|
||||
.style(ButtonStyle::Filled)
|
||||
.layer(ElevationIndex::Background)
|
||||
.into_any_element(),
|
||||
),
|
||||
single_example(
|
||||
"With Indicator",
|
||||
IconButton::new("indicator", IconName::Check)
|
||||
.indicator(Indicator::dot().color(Color::Success))
|
||||
.style(ButtonStyle::Filled)
|
||||
.layer(ElevationIndex::Background)
|
||||
.into_any_element(),
|
||||
),
|
||||
],
|
||||
),
|
||||
example_group_with_title(
|
||||
"Custom Colors",
|
||||
vec![
|
||||
single_example(
|
||||
"Custom Icon Color",
|
||||
IconButton::new("custom_color", IconName::Check)
|
||||
.icon_color(Color::Accent)
|
||||
.style(ButtonStyle::Filled)
|
||||
.layer(ElevationIndex::Background)
|
||||
.into_any_element(),
|
||||
),
|
||||
single_example(
|
||||
"With Alpha",
|
||||
IconButton::new("alpha", IconName::Check)
|
||||
.alpha(0.5)
|
||||
.style(ButtonStyle::Filled)
|
||||
.layer(ElevationIndex::Background)
|
||||
.into_any_element(),
|
||||
),
|
||||
],
|
||||
),
|
||||
])
|
||||
.into_any_element()
|
||||
impl Component for IconButton {
|
||||
fn scope() -> ComponentScope {
|
||||
ComponentScope::Input
|
||||
}
|
||||
|
||||
fn sort_name() -> &'static str {
|
||||
"ButtonB"
|
||||
}
|
||||
|
||||
fn preview(_window: &mut Window, _cx: &mut App) -> Option<AnyElement> {
|
||||
Some(
|
||||
v_flex()
|
||||
.gap_6()
|
||||
.children(vec![
|
||||
example_group_with_title(
|
||||
"Icon Button Styles",
|
||||
vec![
|
||||
single_example(
|
||||
"Default",
|
||||
IconButton::new("default", IconName::Check)
|
||||
.layer(ElevationIndex::Background)
|
||||
.into_any_element(),
|
||||
),
|
||||
single_example(
|
||||
"Filled",
|
||||
IconButton::new("filled", IconName::Check)
|
||||
.layer(ElevationIndex::Background)
|
||||
.style(ButtonStyle::Filled)
|
||||
.into_any_element(),
|
||||
),
|
||||
single_example(
|
||||
"Subtle",
|
||||
IconButton::new("subtle", IconName::Check)
|
||||
.layer(ElevationIndex::Background)
|
||||
.style(ButtonStyle::Subtle)
|
||||
.into_any_element(),
|
||||
),
|
||||
single_example(
|
||||
"Tinted",
|
||||
IconButton::new("tinted", IconName::Check)
|
||||
.layer(ElevationIndex::Background)
|
||||
.style(ButtonStyle::Tinted(TintColor::Accent))
|
||||
.into_any_element(),
|
||||
),
|
||||
single_example(
|
||||
"Transparent",
|
||||
IconButton::new("transparent", IconName::Check)
|
||||
.layer(ElevationIndex::Background)
|
||||
.style(ButtonStyle::Transparent)
|
||||
.into_any_element(),
|
||||
),
|
||||
],
|
||||
),
|
||||
example_group_with_title(
|
||||
"Icon Button Shapes",
|
||||
vec![
|
||||
single_example(
|
||||
"Square",
|
||||
IconButton::new("square", IconName::Check)
|
||||
.shape(IconButtonShape::Square)
|
||||
.style(ButtonStyle::Filled)
|
||||
.layer(ElevationIndex::Background)
|
||||
.into_any_element(),
|
||||
),
|
||||
single_example(
|
||||
"Wide",
|
||||
IconButton::new("wide", IconName::Check)
|
||||
.shape(IconButtonShape::Wide)
|
||||
.style(ButtonStyle::Filled)
|
||||
.layer(ElevationIndex::Background)
|
||||
.into_any_element(),
|
||||
),
|
||||
],
|
||||
),
|
||||
example_group_with_title(
|
||||
"Icon Button Sizes",
|
||||
vec![
|
||||
single_example(
|
||||
"XSmall",
|
||||
IconButton::new("xsmall", IconName::Check)
|
||||
.icon_size(IconSize::XSmall)
|
||||
.style(ButtonStyle::Filled)
|
||||
.layer(ElevationIndex::Background)
|
||||
.into_any_element(),
|
||||
),
|
||||
single_example(
|
||||
"Small",
|
||||
IconButton::new("small", IconName::Check)
|
||||
.icon_size(IconSize::Small)
|
||||
.style(ButtonStyle::Filled)
|
||||
.layer(ElevationIndex::Background)
|
||||
.into_any_element(),
|
||||
),
|
||||
single_example(
|
||||
"Medium",
|
||||
IconButton::new("medium", IconName::Check)
|
||||
.icon_size(IconSize::Medium)
|
||||
.style(ButtonStyle::Filled)
|
||||
.layer(ElevationIndex::Background)
|
||||
.into_any_element(),
|
||||
),
|
||||
single_example(
|
||||
"XLarge",
|
||||
IconButton::new("xlarge", IconName::Check)
|
||||
.icon_size(IconSize::XLarge)
|
||||
.style(ButtonStyle::Filled)
|
||||
.layer(ElevationIndex::Background)
|
||||
.into_any_element(),
|
||||
),
|
||||
],
|
||||
),
|
||||
example_group_with_title(
|
||||
"Special States",
|
||||
vec![
|
||||
single_example(
|
||||
"Disabled",
|
||||
IconButton::new("disabled", IconName::Check)
|
||||
.disabled(true)
|
||||
.style(ButtonStyle::Filled)
|
||||
.layer(ElevationIndex::Background)
|
||||
.into_any_element(),
|
||||
),
|
||||
single_example(
|
||||
"Selected",
|
||||
IconButton::new("selected", IconName::Check)
|
||||
.toggle_state(true)
|
||||
.style(ButtonStyle::Filled)
|
||||
.layer(ElevationIndex::Background)
|
||||
.into_any_element(),
|
||||
),
|
||||
single_example(
|
||||
"With Indicator",
|
||||
IconButton::new("indicator", IconName::Check)
|
||||
.indicator(Indicator::dot().color(Color::Success))
|
||||
.style(ButtonStyle::Filled)
|
||||
.layer(ElevationIndex::Background)
|
||||
.into_any_element(),
|
||||
),
|
||||
],
|
||||
),
|
||||
example_group_with_title(
|
||||
"Custom Colors",
|
||||
vec![
|
||||
single_example(
|
||||
"Custom Icon Color",
|
||||
IconButton::new("custom_color", IconName::Check)
|
||||
.icon_color(Color::Accent)
|
||||
.style(ButtonStyle::Filled)
|
||||
.layer(ElevationIndex::Background)
|
||||
.into_any_element(),
|
||||
),
|
||||
single_example(
|
||||
"With Alpha",
|
||||
IconButton::new("alpha", IconName::Check)
|
||||
.alpha(0.5)
|
||||
.style(ButtonStyle::Filled)
|
||||
.layer(ElevationIndex::Background)
|
||||
.into_any_element(),
|
||||
),
|
||||
],
|
||||
),
|
||||
])
|
||||
.into_any_element(),
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
@@ -15,8 +15,7 @@ pub enum ToggleButtonPosition {
|
||||
Last,
|
||||
}
|
||||
|
||||
#[derive(IntoElement, IntoComponent)]
|
||||
#[component(scope = "Input")]
|
||||
#[derive(IntoElement, RegisterComponent)]
|
||||
pub struct ToggleButton {
|
||||
base: ButtonLike,
|
||||
position_in_group: Option<ToggleButtonPosition>,
|
||||
@@ -155,129 +154,139 @@ impl RenderOnce for ToggleButton {
|
||||
}
|
||||
}
|
||||
|
||||
impl ComponentPreview for ToggleButton {
|
||||
fn preview(_window: &mut Window, _cx: &mut App) -> AnyElement {
|
||||
v_flex()
|
||||
.gap_6()
|
||||
.children(vec![
|
||||
example_group_with_title(
|
||||
"Button Styles",
|
||||
vec![
|
||||
single_example(
|
||||
"Off",
|
||||
ToggleButton::new("off", "Off")
|
||||
.layer(ElevationIndex::Background)
|
||||
.style(ButtonStyle::Filled)
|
||||
.into_any_element(),
|
||||
),
|
||||
single_example(
|
||||
"On",
|
||||
ToggleButton::new("on", "On")
|
||||
.layer(ElevationIndex::Background)
|
||||
.toggle_state(true)
|
||||
.style(ButtonStyle::Filled)
|
||||
.into_any_element(),
|
||||
),
|
||||
single_example(
|
||||
"Off – Disabled",
|
||||
ToggleButton::new("disabled_off", "Disabled Off")
|
||||
.layer(ElevationIndex::Background)
|
||||
.disabled(true)
|
||||
.style(ButtonStyle::Filled)
|
||||
.into_any_element(),
|
||||
),
|
||||
single_example(
|
||||
"On – Disabled",
|
||||
ToggleButton::new("disabled_on", "Disabled On")
|
||||
.layer(ElevationIndex::Background)
|
||||
.disabled(true)
|
||||
.toggle_state(true)
|
||||
.style(ButtonStyle::Filled)
|
||||
.into_any_element(),
|
||||
),
|
||||
],
|
||||
),
|
||||
example_group_with_title(
|
||||
"Button Group",
|
||||
vec![
|
||||
single_example(
|
||||
"Three Buttons",
|
||||
h_flex()
|
||||
.child(
|
||||
ToggleButton::new("three_btn_first", "First")
|
||||
.layer(ElevationIndex::Background)
|
||||
.style(ButtonStyle::Filled)
|
||||
.first()
|
||||
.into_any_element(),
|
||||
)
|
||||
.child(
|
||||
ToggleButton::new("three_btn_middle", "Middle")
|
||||
.layer(ElevationIndex::Background)
|
||||
.style(ButtonStyle::Filled)
|
||||
.middle()
|
||||
.toggle_state(true)
|
||||
.into_any_element(),
|
||||
)
|
||||
.child(
|
||||
ToggleButton::new("three_btn_last", "Last")
|
||||
.layer(ElevationIndex::Background)
|
||||
.style(ButtonStyle::Filled)
|
||||
.last()
|
||||
.into_any_element(),
|
||||
)
|
||||
.into_any_element(),
|
||||
),
|
||||
single_example(
|
||||
"Two Buttons",
|
||||
h_flex()
|
||||
.child(
|
||||
ToggleButton::new("two_btn_first", "First")
|
||||
.layer(ElevationIndex::Background)
|
||||
.style(ButtonStyle::Filled)
|
||||
.first()
|
||||
.into_any_element(),
|
||||
)
|
||||
.child(
|
||||
ToggleButton::new("two_btn_last", "Last")
|
||||
.layer(ElevationIndex::Background)
|
||||
.style(ButtonStyle::Filled)
|
||||
.last()
|
||||
.into_any_element(),
|
||||
)
|
||||
.into_any_element(),
|
||||
),
|
||||
],
|
||||
),
|
||||
example_group_with_title(
|
||||
"Alternate Sizes",
|
||||
vec![
|
||||
single_example(
|
||||
"None",
|
||||
ToggleButton::new("none", "None")
|
||||
.layer(ElevationIndex::Background)
|
||||
.style(ButtonStyle::Filled)
|
||||
.size(ButtonSize::None)
|
||||
.into_any_element(),
|
||||
),
|
||||
single_example(
|
||||
"Compact",
|
||||
ToggleButton::new("compact", "Compact")
|
||||
.layer(ElevationIndex::Background)
|
||||
.style(ButtonStyle::Filled)
|
||||
.size(ButtonSize::Compact)
|
||||
.into_any_element(),
|
||||
),
|
||||
single_example(
|
||||
"Large",
|
||||
ToggleButton::new("large", "Large")
|
||||
.layer(ElevationIndex::Background)
|
||||
.style(ButtonStyle::Filled)
|
||||
.size(ButtonSize::Large)
|
||||
.into_any_element(),
|
||||
),
|
||||
],
|
||||
),
|
||||
])
|
||||
.into_any_element()
|
||||
impl Component for ToggleButton {
|
||||
fn scope() -> ComponentScope {
|
||||
ComponentScope::Input
|
||||
}
|
||||
|
||||
fn sort_name() -> &'static str {
|
||||
"ButtonC"
|
||||
}
|
||||
|
||||
fn preview(_window: &mut Window, _cx: &mut App) -> Option<AnyElement> {
|
||||
Some(
|
||||
v_flex()
|
||||
.gap_6()
|
||||
.children(vec![
|
||||
example_group_with_title(
|
||||
"Button Styles",
|
||||
vec![
|
||||
single_example(
|
||||
"Off",
|
||||
ToggleButton::new("off", "Off")
|
||||
.layer(ElevationIndex::Background)
|
||||
.style(ButtonStyle::Filled)
|
||||
.into_any_element(),
|
||||
),
|
||||
single_example(
|
||||
"On",
|
||||
ToggleButton::new("on", "On")
|
||||
.layer(ElevationIndex::Background)
|
||||
.toggle_state(true)
|
||||
.style(ButtonStyle::Filled)
|
||||
.into_any_element(),
|
||||
),
|
||||
single_example(
|
||||
"Off – Disabled",
|
||||
ToggleButton::new("disabled_off", "Disabled Off")
|
||||
.layer(ElevationIndex::Background)
|
||||
.disabled(true)
|
||||
.style(ButtonStyle::Filled)
|
||||
.into_any_element(),
|
||||
),
|
||||
single_example(
|
||||
"On – Disabled",
|
||||
ToggleButton::new("disabled_on", "Disabled On")
|
||||
.layer(ElevationIndex::Background)
|
||||
.disabled(true)
|
||||
.toggle_state(true)
|
||||
.style(ButtonStyle::Filled)
|
||||
.into_any_element(),
|
||||
),
|
||||
],
|
||||
),
|
||||
example_group_with_title(
|
||||
"Button Group",
|
||||
vec![
|
||||
single_example(
|
||||
"Three Buttons",
|
||||
h_flex()
|
||||
.child(
|
||||
ToggleButton::new("three_btn_first", "First")
|
||||
.layer(ElevationIndex::Background)
|
||||
.style(ButtonStyle::Filled)
|
||||
.first()
|
||||
.into_any_element(),
|
||||
)
|
||||
.child(
|
||||
ToggleButton::new("three_btn_middle", "Middle")
|
||||
.layer(ElevationIndex::Background)
|
||||
.style(ButtonStyle::Filled)
|
||||
.middle()
|
||||
.toggle_state(true)
|
||||
.into_any_element(),
|
||||
)
|
||||
.child(
|
||||
ToggleButton::new("three_btn_last", "Last")
|
||||
.layer(ElevationIndex::Background)
|
||||
.style(ButtonStyle::Filled)
|
||||
.last()
|
||||
.into_any_element(),
|
||||
)
|
||||
.into_any_element(),
|
||||
),
|
||||
single_example(
|
||||
"Two Buttons",
|
||||
h_flex()
|
||||
.child(
|
||||
ToggleButton::new("two_btn_first", "First")
|
||||
.layer(ElevationIndex::Background)
|
||||
.style(ButtonStyle::Filled)
|
||||
.first()
|
||||
.into_any_element(),
|
||||
)
|
||||
.child(
|
||||
ToggleButton::new("two_btn_last", "Last")
|
||||
.layer(ElevationIndex::Background)
|
||||
.style(ButtonStyle::Filled)
|
||||
.last()
|
||||
.into_any_element(),
|
||||
)
|
||||
.into_any_element(),
|
||||
),
|
||||
],
|
||||
),
|
||||
example_group_with_title(
|
||||
"Alternate Sizes",
|
||||
vec![
|
||||
single_example(
|
||||
"None",
|
||||
ToggleButton::new("none", "None")
|
||||
.layer(ElevationIndex::Background)
|
||||
.style(ButtonStyle::Filled)
|
||||
.size(ButtonSize::None)
|
||||
.into_any_element(),
|
||||
),
|
||||
single_example(
|
||||
"Compact",
|
||||
ToggleButton::new("compact", "Compact")
|
||||
.layer(ElevationIndex::Background)
|
||||
.style(ButtonStyle::Filled)
|
||||
.size(ButtonSize::Compact)
|
||||
.into_any_element(),
|
||||
),
|
||||
single_example(
|
||||
"Large",
|
||||
ToggleButton::new("large", "Large")
|
||||
.layer(ElevationIndex::Background)
|
||||
.style(ButtonStyle::Filled)
|
||||
.size(ButtonSize::Large)
|
||||
.into_any_element(),
|
||||
),
|
||||
],
|
||||
),
|
||||
])
|
||||
.into_any_element(),
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user