+ Explore default checked state, two-way binding, and handling change events for a customizable user experience.
+
+
@@ -78,19 +92,93 @@
Two-way bound:
-
-
+
+
OnChange:
-
- Check status is: @example32Value
+ Check status is: @example52Value
+
+
+
+
+
+
+
+ Varying sizes for buttons tailored to meet diverse design needs, ensuring flexibility and visual hierarchy within your interface.
+
+
+
+
+
+
+
+
+
+ Empower customization by overriding default styles and classes, allowing tailored design modifications to suit specific UI requirements.
+
+
+ Component's Style & Class:
+
+
+
+
+
+
+
+ Styles & Classes:
+
+
+
+
+
+
+
+
+
+
+
+
+ You can control the display of buttons with three settings, 'Visible' for full display, 'Hidden' for concealing buttons without altering layout, and 'Collapsed' to remove the button and its space.
+
+
+
+
Visible: [ Visible toggle button ]
+
Hidden: [ Hidden toggle button ]
+
Collapsed: [ Collapsed toggle button ]
diff --git a/src/BlazorUI/Demo/Client/Core/Pages/Components/Buttons/BitToggleButtonDemo.razor.cs b/src/BlazorUI/Demo/Client/Core/Pages/Components/Buttons/BitToggleButtonDemo.razor.cs
index e4a6ec6cd2..33cff510e3 100644
--- a/src/BlazorUI/Demo/Client/Core/Pages/Components/Buttons/BitToggleButtonDemo.razor.cs
+++ b/src/BlazorUI/Demo/Client/Core/Pages/Components/Buttons/BitToggleButtonDemo.razor.cs
@@ -120,6 +120,15 @@ public partial class BitToggleButtonDemo
Description = "The title of the BitToggleButton when it is checked.",
},
new()
+ {
+ Name = "Size",
+ Type = "BitButtonSize",
+ LinkType = LinkType.Link,
+ Href = "#button-size-enum",
+ DefaultValue = "null",
+ Description = "The size of button, Possible values: Small | Medium | Large.",
+ },
+ new()
{
Name = "Styles",
Type = "BitToggleButtonClassStyles?",
@@ -204,14 +213,47 @@ public partial class BitToggleButtonDemo
Name= "Standard",
Description="The button with black text on a white background.",
Value="1",
+ },
+ new()
+ {
+ Name= "Text",
+ Description="The button for less-pronounced actions.",
+ Value="2",
+ }
+ }
+ },
+ new()
+ {
+ Id = "button-size-enum",
+ Name = "BitButtonSize",
+ Description = "",
+ Items = new()
+ {
+ new()
+ {
+ Name= "Small",
+ Description="The small size button.",
+ Value="0",
+ },
+ new()
+ {
+ Name= "Medium",
+ Description="The medium size button.",
+ Value="1",
+ },
+ new()
+ {
+ Name= "Large",
+ Description="The large size button.",
+ Value="2",
}
}
}
};
- private bool example31Value;
- private bool example32Value;
+ private bool example51Value;
+ private bool example52Value;
private readonly string example1RazorCode = @"
@@ -222,10 +264,59 @@ public partial class BitToggleButtonDemo
OffIconName=""@BitIconName.Microphone"" OnIconName=""@BitIconName.MicOff""
ButtonStyle=""BitButtonStyle.Standard"" />
-
";
- private readonly string example1CsharpCode = @"";
+
";
private readonly string example2RazorCode = @"
+
+
";
+
+ private readonly string example3RazorCode = @"
+
+
";
+
+ private readonly string example4RazorCode = @"
+
+
";
+
+ private readonly string example5RazorCode = @"
+
+
+
+
+
+
example52Value = v""
+ OffText=""Unmute"" OnText=""Mute""
+ OffIconName=""@BitIconName.Microphone"" OnIconName=""@BitIconName.MicOff"" />
+Check status is: @example52Value";
+ private readonly string example5CsharpCode = @"
+private bool example51Value;
+private bool example52Value;";
+
+ private readonly string example6RazorCode = @"
+Small
+Medium
+Large
+
+Small
+Medium
+Large
+
+Small
+Medium
+Large";
+
+ private readonly string example7RazorCode = @"
+
@@ -257,34 +349,15 @@ public partial class BitToggleButtonDemo
+ Styles=""@(new() { Container = ""font-size: 18px;"", Icon = ""color: red;"", Text = ""color: blue;"" })"" />
";
- private readonly string example2CsharpCode = @"";
+ Classes=""@(new() { Container = ""custom-container"", Icon = ""custom-icon"", Text = ""custom-text"" })"" />";
- private readonly string example3RazorCode = @"
+ private readonly string example8RazorCode = @"
Visible: [ Visible toggle button ]
Hidden: [ Hidden toggle button ]
Collapsed: [ Collapsed toggle button ]";
-
- private readonly string example4RazorCode = @"
-
-
-
-
-
- example32Value = v""
- OffText=""Unmute"" OnText=""Mute""
- OffIconName=""@BitIconName.Microphone"" OnIconName=""@BitIconName.MicOff"" />
-Check status is: @example32Value";
- private readonly string example4CsharpCode = @"
-private bool example31Value;
-private bool example32Value;";
}
diff --git a/src/BlazorUI/Demo/Client/Core/Pages/Components/Buttons/BitToggleButtonDemo.razor.scss b/src/BlazorUI/Demo/Client/Core/Pages/Components/Buttons/BitToggleButtonDemo.razor.scss
index 24175ce582..83ab080adb 100644
--- a/src/BlazorUI/Demo/Client/Core/Pages/Components/Buttons/BitToggleButtonDemo.razor.scss
+++ b/src/BlazorUI/Demo/Client/Core/Pages/Components/Buttons/BitToggleButtonDemo.razor.scss
@@ -11,6 +11,18 @@
}
}
+.buttons-container {
+ gap: 0.5rem;
+ display: flex;
+ flex-flow: row wrap;
+ align-items: flex-start;
+}
+
+.buttons-container-grid {
+ gap: 0.5rem;
+ display: grid;
+}
+
::deep {
.custom-class {
color: aqua;