diff --git a/components/button/appearance.md b/components/button/appearance.md new file mode 100644 index 0000000000..5490159a79 --- /dev/null +++ b/components/button/appearance.md @@ -0,0 +1,192 @@ +--- +title: Appearance +page_title: Button Appearance +description: Appearance settings of the Button for Blazor. +slug: button-appearance +tags: telerik,blazor,button,appearance +published: True +position: 35 +--- + +# Appearance Settings + +You can control the appearance of the button by setting the following attributes: + +* [FillMode](#fillmode) +* [Rounded](#rounded) +* [Shape](#shape) +* [Size](#size) +* [ThemeColor](#themecolor) + +You can use all of them together to achieve the desired appearance. This article will explain their effect one by one. + +## FillMode + +The `FillMode` controls how the TelerikButton is filled. You can set it to a member of the `Telerik.Blazor.ThemeConstants.Button.FillMode` class: + +| Class members | Manual declarations | +|------------|--------| +|`Solid`
default value|`solid`| +|`Flat`|`flat`| +|`Outline`|`outline`| +|`Link`|`link`| + +>caption The built-in Fill modes + +````CSHTML +@* These are all built-in fill modes *@ + +@{ + var fields = typeof(Telerik.Blazor.ThemeConstants.Button.FillMode) + .GetFields(System.Reflection.BindingFlags.Public | System.Reflection.BindingFlags.Static + | System.Reflection.BindingFlags.FlattenHierarchy) + .Where(field => field.IsLiteral && !field.IsInitOnly).ToList(); + + foreach (var field in fields) + { + string fillmode = field.GetValue(null).ToString(); + +
+ @fillmode +
+ } +} +```` + +## Rounded + +The `Rounded` parameter applies the `border-radius` CSS rule to the button to achieve curving of the edges. You can set it to a member of the `Telerik.Blazor.ThemeConstants.Button.Rounded` class: + +| Class members | Manual declarations | +|------------|--------| +|`Small` |`sm`| +|`Medium`|`md`| +|`Large`|`lg`| +|`Full`|`full`| + +>caption The built-in values of the Rounded attribute + +````CSHTML +@* The built-in rounded edges of the button. *@ + +@{ + var fields = typeof(Telerik.Blazor.ThemeConstants.Button.Rounded) + .GetFields(System.Reflection.BindingFlags.Public | System.Reflection.BindingFlags.Static + | System.Reflection.BindingFlags.FlattenHierarchy) + .Where(field => field.IsLiteral && !field.IsInitOnly).ToList(); + + foreach (var field in fields) + { + string rounded = field.GetValue(null).ToString(); + +
+ @rounded +
+ } +} +```` + +## Shape + +The `Shape` attribute defines the geometric shape of the button. You can set it to a member of the `Telerik.Blazor.ThemeConstants.Button.Shape` class: + +| Class members | Manual declarations | +|---------------|--------| +| `Rectangle` |`rectangle`| +| `Square` |`square`| +| `Circle` |To create a circular button you should set the `Shape` attribute to **Square**, and the `Rounded` attribute to **Full**| + + +>note The width and height of the geometric shapes depend on the amount of text in the button, and the size of the font. + +>caption The built-in button shapes + +````CSHTML +@{ + var fields = typeof(Telerik.Blazor.ThemeConstants.Button.Shape) + .GetFields(System.Reflection.BindingFlags.Public | System.Reflection.BindingFlags.Static + | System.Reflection.BindingFlags.FlattenHierarchy) + .Where(field => field.IsLiteral && !field.IsInitOnly).ToList(); + + foreach (var field in fields) + { + string shape = field.GetValue(null).ToString(); + +
+ @shape +
+ } +} +```` + +## Size + +You can increase or decrease the size of the button by setting the `Size` parameter to a member of the `Telerik.Blazor.ThemeConstants.Button.Size` class: + +| Class members | Manual declarations | +|---------------|--------| +| `Small` |`sm`| +| `Medium` |`md`| +| `Large` |`lg`| + +>caption The built-in button sizes + +````CSHTML +@{ + var fields = typeof(Telerik.Blazor.ThemeConstants.Button.Size) + .GetFields(System.Reflection.BindingFlags.Public | System.Reflection.BindingFlags.Static + | System.Reflection.BindingFlags.FlattenHierarchy) + .Where(field => field.IsLiteral && !field.IsInitOnly).ToList(); + + foreach (var field in fields) + { + string size = field.GetValue(null).ToString(); + +
+ @size +
+ } +} +```` + +## ThemeColor + +The color of the button is controlled through the `ThemeColor` parameter. You can set it to a member of the `Telerik.Blazor.ThemeConstants.Button.ThemeColor` class: + +| Class members | Manual declarations | +|------------|--------| +|`Base`
default value |`base`| +|`Primary`|`primary`| +|`Secondary`|`secondary`| +|`Tertiary`|`tertiary`| +|`Info`|`info`| +|`Success`|`success`| +|`Warning`|`warning`| +|`Error`|`error`| +|`Dark`|`dark`| +|`Light`|`light`| +|`Inverse`|`inverse`| + + +>caption The built-in ThemeColors + +````CSHTML +@* The built-in button colors *@ + +@{ + var fields = typeof(Telerik.Blazor.ThemeConstants.Button.ThemeColor) + .GetFields(System.Reflection.BindingFlags.Public | System.Reflection.BindingFlags.Static + | System.Reflection.BindingFlags.FlattenHierarchy) + .Where(field => field.IsLiteral && !field.IsInitOnly).ToList(); + + foreach (var field in fields) + { + string themeColor = field.GetValue(null).ToString(); + +
+ @themeColor +
+ } +} +```` + diff --git a/components/button/overview.md b/components/button/overview.md index 7af906264f..2428dbe0fc 100644 --- a/components/button/overview.md +++ b/components/button/overview.md @@ -87,6 +87,10 @@ Add a reference to the Button instance to use its methods (for example - `FocusA * [Using Button Icons]({%slug button-icons%}) +>caption The result from the code snippet above + +![use css to change the button size](images/button-size-change.png) + ## See Also * [Live Demo: Button](https://demos.telerik.com/blazor-ui/button/index) diff --git a/components/button/styling.md b/components/button/styling.md index c05a34a971..7db9b625c6 100644 --- a/components/button/styling.md +++ b/components/button/styling.md @@ -18,13 +18,7 @@ There are a few ways to style the Button component: ## Primary Button -Through the primary button styling, you can make the button use a strong color to attract attention. To do that, set its `Primary` property to true. - ->caption Button with the Primary color scheme from the current theme - -````CSHTML -Primary -```` +To set a Primary button you should set the `ThemeColor` parameter to `primary`. [Read the Appearance article for further information...]({%slug button-appearance%}). ## Button Class diff --git a/components/buttongroup/appearance.md b/components/buttongroup/appearance.md new file mode 100644 index 0000000000..54aba0cd99 --- /dev/null +++ b/components/buttongroup/appearance.md @@ -0,0 +1,187 @@ +--- +title: Appearance +page_title: ButtonGroup Button Appearance +description: Appearance settings of the Buttons in the ButtonGroup for Blazor. +slug: buttongroup-appearance +tags: telerik,blazor,buttongroup,button,appearance +published: True +position: 35 +--- + +# Appearance Settings + +You can control the appearance of the buttons in the `` by setting the following attributes: + +* [FillMode](#fillmode) +* [Rounded](#rounded) +* [Shape](#shape) +* [Size](#size) +* [ThemeColor](#themecolor) + +You can use all of them together to achieve the desired appearance. This article will explain their effect one by one. + +## FillMode + +The `FillMode` controls how the TelerikButton is filled. You can set it to a member of the `Telerik.Blazor.ThemeConstants.Button.FillMode` class: + +| Class members | Manual declarations | +|------------|--------| +|`Solid`
default value|`solid`| +|`Flat`|`flat`| +|`Outline`|`outline`| +|`Link`|`link`| + +>caption The built-in Fill modes + +````CSHTML +@* These are all built-in fill modes *@ + +@{ + var fields = typeof(Telerik.Blazor.ThemeConstants.Button.FillMode) + .GetFields(System.Reflection.BindingFlags.Public | System.Reflection.BindingFlags.Static + | System.Reflection.BindingFlags.FlattenHierarchy) + .Where(field => field.IsLiteral && !field.IsInitOnly).ToList(); + + + @foreach (var field in fields) + { + string fillmode = field.GetValue(null).ToString(); + @fillmode + } + +} +```` + +## Rounded + +The `Rounded` parameter applies the `border-radius` CSS rule to the button to achieve curving of the edges. You can set it to a member of the `Telerik.Blazor.ThemeConstants.Button.Rounded` class: + +| Class members | Manual declarations | +|------------|--------| +|`Small` |`sm`| +|`Medium`|`md`| +|`Large`|`lg`| +|`Full`|`full`| + +>caption The built-in values of the Rounded attribute + +````CSHTML +@* The built-in rounded edges of the button. *@ + +@{ + var fields = typeof(Telerik.Blazor.ThemeConstants.Button.Rounded) + .GetFields(System.Reflection.BindingFlags.Public | System.Reflection.BindingFlags.Static + | System.Reflection.BindingFlags.FlattenHierarchy) + .Where(field => field.IsLiteral && !field.IsInitOnly).ToList(); + + + @foreach (var field in fields) + { + string rounded = field.GetValue(null).ToString(); + @rounded + } + +} +```` + +## Shape + +The `Shape` attribute defines the geometric shape of the button. You can set it to a member of the `Telerik.Blazor.ThemeConstants.Button.Shape` class: + +| Class members | Manual declarations | +|---------------|--------| +| `Rectangle` |`rectangle`| +| `Square` |`square`| +| `Circle` |To create a circular button you should set the `Shape` attribute to **Square**, and the `Rounded` attribute to **Full**| + + +>note The width and height of the geometric shapes depend on the amount of text in the button, and the size of the font. + +>caption The built-in button shapes + +````CSHTML +@{ + var fields = typeof(Telerik.Blazor.ThemeConstants.Button.Shape) + .GetFields(System.Reflection.BindingFlags.Public | System.Reflection.BindingFlags.Static + | System.Reflection.BindingFlags.FlattenHierarchy) + .Where(field => field.IsLiteral && !field.IsInitOnly).ToList(); + + + @foreach (var field in fields) + { + string shape = field.GetValue(null).ToString(); + @shape + } + +} +```` + +## Size + +You can increase or decrease the size of the button by setting the `Size` parameter to a member of the `Telerik.Blazor.ThemeConstants.Button.Size` class: + +| Class members | Manual declarations | +|---------------|--------| +| `Small` |`sm`| +| `Medium` |`md`| +| `Large` |`lg`| + +>caption The built-in button sizes + +````CSHTML +@{ + var fields = typeof(Telerik.Blazor.ThemeConstants.Button.Size) + .GetFields(System.Reflection.BindingFlags.Public | System.Reflection.BindingFlags.Static + | System.Reflection.BindingFlags.FlattenHierarchy) + .Where(field => field.IsLiteral && !field.IsInitOnly).ToList(); + + + @foreach (var field in fields) + { + string size = field.GetValue(null).ToString(); + @size + } + +} +```` + +## ThemeColor + +The color of the button is controlled through the `ThemeColor` parameter. You can set it to a member of the `Telerik.Blazor.ThemeConstants.Button.ThemeColor` class: + +| Class members | Manual declarations | +|------------|--------| +|`Base`
default value |`base`| +|`Primary`|`primary`| +|`Secondary`|`secondary`| +|`Tertiary`|`tertiary`| +|`Info`|`info`| +|`Success`|`success`| +|`Warning`|`warning`| +|`Error`|`error`| +|`Dark`|`dark`| +|`Light`|`light`| +|`Inverse`|`inverse`| + + +>caption The built-in ThemeColors + +````CSHTML +@* The built-in button colors *@ + +@{ + var fields = typeof(Telerik.Blazor.ThemeConstants.Button.ThemeColor) + .GetFields(System.Reflection.BindingFlags.Public | System.Reflection.BindingFlags.Static + | System.Reflection.BindingFlags.FlattenHierarchy) + .Where(field => field.IsLiteral && !field.IsInitOnly).ToList(); + + + @foreach (var field in fields) + { + string themeColor = field.GetValue(null).ToString(); + @themeColor + } + +} +```` + diff --git a/components/checkbox/appearance.md b/components/checkbox/appearance.md new file mode 100644 index 0000000000..dd2eeb382c --- /dev/null +++ b/components/checkbox/appearance.md @@ -0,0 +1,90 @@ +--- +title: Appearance +page_title: CheckBox Appearance +description: Appearance settings of the CheckBox for Blazor. +slug: checkbox-appearance +tags: telerik,blazor,button,checkbox,appearance +published: True +position: 35 +--- + +# Appearance Settings + +You can control the appearance of the CheckBox button by setting the following attribute: + +* [Size](#size) +* [Rounded](#rounded) + + +## Size + +You can increase or decrease the size of the CheckBox by setting the `Size` attribute to a member of the `Telerik.Blazor.ThemeConstants.CheckBox.Size` class: + +| Class members | Manual declarations | +|------------|--------| +|`Small` |`sm`| +|`Medium`|`md`| +|`Large`|`lg`| + +>caption The built-in sizes + +````CSHTML +@{ + var fields = typeof(Telerik.Blazor.ThemeConstants.CheckBox.Size) + .GetFields(System.Reflection.BindingFlags.Public | System.Reflection.BindingFlags.Static + | System.Reflection.BindingFlags.FlattenHierarchy) + .Where(field => field.IsLiteral && !field.IsInitOnly).ToList(); + + + @foreach (var field in fields) + { + string size = field.GetValue(null).ToString(); + +
+ +
+ } +} + +@code{ + private bool isSelected { get; set; } +} +```` + +## Rounded + +The `Rounded` attribute applies the `border-radius` CSS rule to the checkbox to achieve curving of the edges. You can set it to a member of the `Telerik.Blazor.ThemeConstants.CheckBox.Rounded` class: + +| Class members | Manual declarations | +|------------|--------| +|`Small` |`sm`| +|`Medium`|`md`| +|`Large`|`lg`| + +>caption The built-in values of the Rounded attribute + +````CSHTML +@* The built-in values of the Rounded attribute. *@ + +@{ + var fields = typeof(Telerik.Blazor.ThemeConstants.CheckBox.Rounded) + .GetFields(System.Reflection.BindingFlags.Public | System.Reflection.BindingFlags.Static + | System.Reflection.BindingFlags.FlattenHierarchy) + .Where(field => field.IsLiteral && !field.IsInitOnly).ToList(); + + + @foreach (var field in fields) + { + string rounded = field.GetValue(null).ToString(); + +
+ +
+ } +} + +@code{ + private bool isSelected { get; set; } +} +```` + diff --git a/components/grid/columns/command.md b/components/grid/columns/command.md index 29d6861c8d..f9fb0e7709 100644 --- a/components/grid/columns/command.md +++ b/components/grid/columns/command.md @@ -35,7 +35,7 @@ The `GridCommandButton` tag offers the following features: * `OnClick` - the event handler that the button will fire. If used on a built-in command, this handler will fire before the [corresponding CRUD event]({%slug components/grid/editing/overview%}). Cancelling it will prevent the built-in CRUD event from firing. * `ShowInEdit` - a boolean property indicating whether the button is only visible while the user is editing/inserting data. * `ChildContent` - the text the button will render. You can also place it between the command button's opening and closing tags. -* Appearance properties like `Icon`, `Class`, `Enabled` that are come from the underlying [Button Component features]({%slug components/button/overview%}). +* You can customize the appearance of the `GridCommandButton` by applying the [appearance attributes available for the TelerikButton]({%slug button-appearance%}). ### Built-in Commands diff --git a/components/maskedtextbox/appearance.md b/components/maskedtextbox/appearance.md new file mode 100644 index 0000000000..7c5ecc93cc --- /dev/null +++ b/components/maskedtextbox/appearance.md @@ -0,0 +1,129 @@ +--- +title: Appearance +page_title: MaskedTextBox Appearance +description: Appearance settings of the MaskedTextBox for Blazor. +slug: maskedtextbox-appearance +tags: telerik,blazor,button,maskedtextbox,mask,appearance +published: True +position: 55 +--- + +# Appearance Settings + +You can control the appearance of the MaskedTextBox button by setting the following attribute: + +* [Size](#size) +* [Rounded](#rounded) +* [FillMode](#fillmode) + + +## Size + +You can increase or decrease the size of the MaskedTextBox by setting the `Size` attribute to a member of the `Telerik.Blazor.ThemeConstants.MaskedTextBox.Size` class: + +| Class members | Manual declarations | +|------------|--------| +|`Small` |`sm`| +|`Medium`|`md`| +|`Large`|`lg`| + +>caption The built-in sizes + +````CSHTML +@{ + var fields = typeof(Telerik.Blazor.ThemeConstants.MaskedTextBox.Size) + .GetFields(System.Reflection.BindingFlags.Public | System.Reflection.BindingFlags.Static + | System.Reflection.BindingFlags.FlattenHierarchy) + .Where(field => field.IsLiteral && !field.IsInitOnly).ToList(); + + + @foreach (var field in fields) + { + string size = field.GetValue(null).ToString(); + +
+ +
+ } +} + +@code{ + private string MaskedTextBoxValue { get; set; } +} +```` + +## Rounded + +The `Rounded` attribute applies the `border-radius` CSS rule to the textbox to achieve curving of the edges. You can set it to a member of the `Telerik.Blazor.ThemeConstants.MaskedTextBox.Rounded` class: + +| Class members | Manual declarations | +|------------|--------| +|`Small` |`sm`| +|`Medium`|`md`| +|`Large`|`lg`| +|`Full`|`full`| + +>caption The built-in values of the Rounded attribute + +````CSHTML +@* The built-in values of the Rounded attribute. *@ + +@{ + var fields = typeof(Telerik.Blazor.ThemeConstants.MaskedTextBox.Rounded) + .GetFields(System.Reflection.BindingFlags.Public | System.Reflection.BindingFlags.Static + | System.Reflection.BindingFlags.FlattenHierarchy) + .Where(field => field.IsLiteral && !field.IsInitOnly).ToList(); + + + @foreach (var field in fields) + { + string rounded = field.GetValue(null).ToString(); + +
+ +
+ } +} + +@code{ + private string MaskedTextBoxValue { get; set; } +} +```` + +## FillMode + +The `FillMode` controls how the TelerikMaskedTextBox is filled. You can set it to a member of the `Telerik.Blazor.ThemeConstants.MaskedTextBox.FillMode` class: + +| Class members | Result | +|------------|--------| +|`Solid`
default value|`solid`| +|`Flat`|`flat`| +|`Outline`|`outline`| + +>caption The built-in Fill modes + +````CSHTML +@* These are all built-in fill modes *@ + +@{ + var fields = typeof(Telerik.Blazor.ThemeConstants.MaskedTextBox.FillMode) + .GetFields(System.Reflection.BindingFlags.Public | System.Reflection.BindingFlags.Static + | System.Reflection.BindingFlags.FlattenHierarchy) + .Where(field => field.IsLiteral && !field.IsInitOnly).ToList(); + + + @foreach (var field in fields) + { + string fillMode = field.GetValue(null).ToString(); + +
+ +
+ } +} + +@code{ + private string MaskedTextBoxValue { get; set; } +} +```` + diff --git a/components/numerictextbox/appearance.md b/components/numerictextbox/appearance.md new file mode 100644 index 0000000000..8d6bf8a0c3 --- /dev/null +++ b/components/numerictextbox/appearance.md @@ -0,0 +1,129 @@ +--- +title: Appearance +page_title: NumericTextBox Appearance +description: Appearance settings of the NumericTextBox for Blazor. +slug: numerictextbox-appearance +tags: telerik,blazor,button,numerictextbox,appearance +published: True +position: 35 +--- + +# Appearance Settings + +You can control the appearance of the NumericTextBox button by setting the following attribute: + +* [Size](#size) +* [Rounded](#rounded) +* [FillMode](#fillmode) + + +## Size + +You can increase or decrease the size of the NumericTextBox by setting the `Size` attribute to a member of the `Telerik.Blazor.ThemeConstants.NumericTextBox.Size` class: + +| Class members | Manual declarations | +|------------|--------| +|`Small` |`sm`| +|`Medium`|`md`| +|`Large`|`lg`| + +>caption The built-in sizes + +````CSHTML +@{ + var fields = typeof(Telerik.Blazor.ThemeConstants.NumericTextBox.Size) + .GetFields(System.Reflection.BindingFlags.Public | System.Reflection.BindingFlags.Static + | System.Reflection.BindingFlags.FlattenHierarchy) + .Where(field => field.IsLiteral && !field.IsInitOnly).ToList(); + + + @foreach (var field in fields) + { + string size = field.GetValue(null).ToString(); + +
+ +
+ } +} + +@code{ + private int NumericValue { get; set; } +} +```` + +## Rounded + +The `Rounded` attribute applies the `border-radius` CSS rule to the textbox to achieve curving of the edges. You can set it to a member of the `Telerik.Blazor.ThemeConstants.NumericTextBox.Rounded` class: + +| Class members | Manual declarations | +|------------|--------| +|`Small` |`sm`| +|`Medium`|`md`| +|`Large`|`lg`| +|`Full`|`full`| + +>caption The built-in values of the Rounded attribute + +````CSHTML +@* The built-in values of the Rounded attribute. *@ + +@{ + var fields = typeof(Telerik.Blazor.ThemeConstants.NumericTextBox.Rounded) + .GetFields(System.Reflection.BindingFlags.Public | System.Reflection.BindingFlags.Static + | System.Reflection.BindingFlags.FlattenHierarchy) + .Where(field => field.IsLiteral && !field.IsInitOnly).ToList(); + + + @foreach (var field in fields) + { + string rounded = field.GetValue(null).ToString(); + +
+ +
+ } +} + +@code{ + private int NumericValue { get; set; } +} +```` + +## FillMode + +The `FillMode` controls how the TelerikNumericTextBox is filled. You can set it to a member of the `Telerik.Blazor.ThemeConstants.NumericTextBox.FillMode` class: + +| Class members | Result | +|------------|--------| +|`Solid`
default value|`solid`| +|`Flat`|`flat`| +|`Outline`|`outline`| + +>caption The built-in Fill modes + +````CSHTML +@* These are all built-in fill modes *@ + +@{ + var fields = typeof(Telerik.Blazor.ThemeConstants.NumericTextBox.FillMode) + .GetFields(System.Reflection.BindingFlags.Public | System.Reflection.BindingFlags.Static + | System.Reflection.BindingFlags.FlattenHierarchy) + .Where(field => field.IsLiteral && !field.IsInitOnly).ToList(); + + + @foreach (var field in fields) + { + string fillMode = field.GetValue(null).ToString(); + +
+ +
+ } +} + +@code{ + private int NumericValue { get; set; } +} +```` + diff --git a/components/radiogroup/appearance.md b/components/radiogroup/appearance.md new file mode 100644 index 0000000000..88aeb6c6e3 --- /dev/null +++ b/components/radiogroup/appearance.md @@ -0,0 +1,60 @@ +--- +title: Appearance +page_title: RadioButtonGroup Button Appearance +description: Appearance settings of the RadioButtonGroup Button for Blazor. +slug: radiogroup-appearance +tags: telerik,blazor,button,radio,radiobutton,appearance +published: True +position: 35 +--- + +# Appearance Settings + +You can control the appearance of the RadioButtonGroup button by setting the following attribute: + +* [Size](#size) + + +## Size + +You can increase or decrease the size of the button by setting the `Size` parameter to a member of the `Telerik.Blazor.ThemeConstants.Button.Size` class: + +| Class members | Manual declarations | +|---------------|--------| +|`Small`|`sm`| +|`Medium`|`md`| +|`Large` |`lg`| + +>caption The built-in sizes + +````CSHTML +@{ + var fields = typeof(Telerik.Blazor.ThemeConstants.Button.Size) + .GetFields(System.Reflection.BindingFlags.Public | System.Reflection.BindingFlags.Static + | System.Reflection.BindingFlags.FlattenHierarchy) + .Where(field => field.IsLiteral && !field.IsInitOnly).ToList(); + + + @foreach (var field in fields) + { + string size = field.GetValue(null).ToString(); + +
+ + +
+ } +} + +@code{ + string ChosenOption { get; set; } + + List Options { get; set; } = new List() + { + "first", "second", "third" + }; +} +```` + diff --git a/components/radiogroup/images/radio-group-size-large.png b/components/radiogroup/images/radio-group-size-large.png new file mode 100644 index 0000000000..b9d4c480c8 Binary files /dev/null and b/components/radiogroup/images/radio-group-size-large.png differ diff --git a/components/radiogroup/images/radio-group-size-medium.png b/components/radiogroup/images/radio-group-size-medium.png new file mode 100644 index 0000000000..4a2a1877ec Binary files /dev/null and b/components/radiogroup/images/radio-group-size-medium.png differ diff --git a/components/radiogroup/images/radio-group-size-small.png b/components/radiogroup/images/radio-group-size-small.png new file mode 100644 index 0000000000..8e33578e1b Binary files /dev/null and b/components/radiogroup/images/radio-group-size-small.png differ diff --git a/components/switch/appearance.md b/components/switch/appearance.md new file mode 100644 index 0000000000..3129d0b23a --- /dev/null +++ b/components/switch/appearance.md @@ -0,0 +1,132 @@ +--- +title: Appearance +page_title: Switch Appearance +description: Appearance settings of the Switch for Blazor. +slug: switch-appearance +tags: telerik,blazor,button,switch,appearance +published: True +position: 35 +--- + +# Appearance Settings + +You can control the appearance of the Switch button by setting the following attribute: + +* [Size](#size) +* [ThumbRounded](#thumbrounded) +* [TrackRounded](#trackrounded) + + +## Size + +You can increase or decrease the size of the Switch by setting the `Size` attribute to a member of the `Telerik.Blazor.ThemeConstants.Switch.Size` class: + +| Class members | Manual declarations | +|------------|--------| +|`Small` |`sm`| +|`Medium`|`md`| +|`Large`|`lg`| + +>caption The built-in sizes + +````CSHTML +@{ + var fields = typeof(Telerik.Blazor.ThemeConstants.Switch.Size) + .GetFields(System.Reflection.BindingFlags.Public | System.Reflection.BindingFlags.Static + | System.Reflection.BindingFlags.FlattenHierarchy) + .Where(field => field.IsLiteral && !field.IsInitOnly).ToList(); + + + @foreach (var field in fields) + { + string size = field.GetValue(null).ToString(); + +
+ +
+ } +} + +@code{ + private bool isSelected { get; set; } +} +```` + +## ThumbRounded + +The `ThumbRounded` attribute applies the `border-radius` CSS rule to the thumb of the switch to achieve curving of the edges. You can set it to a member of the `Telerik.Blazor.ThemeConstants.Switch.ThumbRounded` class: + +| Class members | Manual declarations | +|------------|--------| +|`Small` |`sm`| +|`Medium`|`md`| +|`Large`|`lg`| +|`Full`|`full`| + +>caption The built-in values of the ThumbRounded attribute + +````CSHTML +@* The built-in values of the ThumbRounded attribute. *@ + +@{ + var fields = typeof(Telerik.Blazor.ThemeConstants.Switch.ThumbRounded) + .GetFields(System.Reflection.BindingFlags.Public | System.Reflection.BindingFlags.Static + | System.Reflection.BindingFlags.FlattenHierarchy) + .Where(field => field.IsLiteral && !field.IsInitOnly).ToList(); + + + @foreach (var field in fields) + { + string thumbRounded = field.GetValue(null).ToString(); + +
+ +
+ } +} + +@code{ + private bool isSelected { get; set; } +} +```` + +## TrackRounded + +The `TrackRounded` attribute applies the `border-radius` CSS rule to the track of the switch to achieve curving of the edges. You can set it to a member of the `Telerik.Blazor.ThemeConstants.Switch.TrackRounded` class: + +| Class members | Manual declarations | +|------------|--------| +|`Small` |`sm`| +|`Medium`|`md`| +|`Large`|`lg`| +|`Full`|`full`| + +>tip To achieve the best possible layout you should match the values passed to the `ThumbRounded` and `TrackRounded` attributes. + +>caption The built-in values of the TrackRounded attribute + +````CSHTML +@* The built-in values of the TrackRounded attribute. *@ + +@{ + var fields = typeof(Telerik.Blazor.ThemeConstants.Switch.TrackRounded) + .GetFields(System.Reflection.BindingFlags.Public | System.Reflection.BindingFlags.Static + | System.Reflection.BindingFlags.FlattenHierarchy) + .Where(field => field.IsLiteral && !field.IsInitOnly).ToList(); + + + @foreach (var field in fields) + { + string trackRounded = field.GetValue(null).ToString(); + +
+ +
+ } +} + +@code{ + private bool isSelected { get; set; } +} +```` + diff --git a/components/textarea/appearance.md b/components/textarea/appearance.md new file mode 100644 index 0000000000..6f006a6628 --- /dev/null +++ b/components/textarea/appearance.md @@ -0,0 +1,130 @@ +--- +title: Appearance +page_title: TextArea Appearance +description: Appearance settings of the TextArea for Blazor. +slug: TextArea-appearance +tags: telerik,blazor,button,TextArea,appearance +published: True +position: 35 +--- + +# Appearance Settings + +You can control the appearance of the TextArea button by setting the following attribute: + +* [Size](#size) +* [Rounded](#rounded) +* [FillMode](#fillmode) + + +## Size + +You can increase or decrease the size of the TextArea by setting the `Size` attribute to a member of the `Telerik.Blazor.ThemeConstants.TextArea.Size` class: + +| Class members | Manual declarations | +|------------|--------| +|`Small` |`sm`| +|`Medium`|`md`| +|`Large`|`lg`| + +>caption The built-in sizes + +````CSHTML +@{ + var fields = typeof(Telerik.Blazor.ThemeConstants.TextArea.Size) + .GetFields(System.Reflection.BindingFlags.Public | System.Reflection.BindingFlags.Static + | System.Reflection.BindingFlags.FlattenHierarchy) + .Where(field => field.IsLiteral && !field.IsInitOnly).ToList(); + + + @foreach (var field in fields) + { + string size = field.GetValue(null).ToString(); + +
+ +
+ } +} + +@code{ + private string TextAreaValue { get; set; } +} +```` + +## Rounded + +The `Rounded` attribute applies the `border-radius` CSS rule to the TextArea to achieve curving of the edges. You can set it to a member of the `Telerik.Blazor.ThemeConstants.TextArea.Rounded` class: + +| Class members | Manual declarations | +|------------|--------| +|`Small` |`sm`| +|`Medium`|`md`| +|`Large`|`lg`| +|`Full`|`full`| + +>caption The built-in values of the Rounded attribute + +````CSHTML +@* The built-in values of the Rounded attribute. *@ + +@{ + var fields = typeof(Telerik.Blazor.ThemeConstants.TextArea.Rounded) + .GetFields(System.Reflection.BindingFlags.Public | System.Reflection.BindingFlags.Static + | System.Reflection.BindingFlags.FlattenHierarchy) + .Where(field => field.IsLiteral && !field.IsInitOnly).ToList(); + + + @foreach (var field in fields) + { + string rounded = field.GetValue(null).ToString(); + +
+ +
+ } +} + +@code{ + private string TextAreaValue { get; set; } +} +```` + +## FillMode + +The `FillMode` controls how the TelerikTextArea is filled. You can set it to a member of the `Telerik.Blazor.ThemeConstants.TextArea.FillMode` class: + +| Class members | Result | +|------------|--------| +|`Solid`
default value|`solid`| +|`Flat`|`flat`| +|`Outline`|`outline`| + +>caption The built-in Fill modes + +````CSHTML +@* These are all built-in fill modes *@ + +@{ + var fields = typeof(Telerik.Blazor.ThemeConstants.TextArea.FillMode) + .GetFields(System.Reflection.BindingFlags.Public | System.Reflection.BindingFlags.Static + | System.Reflection.BindingFlags.FlattenHierarchy) + .Where(field => field.IsLiteral && !field.IsInitOnly).ToList(); + + + @foreach (var field in fields) + { + string fillMode = field.GetValue(null).ToString(); + +
+ @fillMode + +
+ } +} + +@code{ + private string TextAreaValue { get; set; } +} +```` + diff --git a/components/textbox/appearance.md b/components/textbox/appearance.md new file mode 100644 index 0000000000..026eb2b0d0 --- /dev/null +++ b/components/textbox/appearance.md @@ -0,0 +1,130 @@ +--- +title: Appearance +page_title: TextBox Appearance +description: Appearance settings of the TextBox for Blazor. +slug: textbox-appearance +tags: telerik,blazor,button,textbox,appearance +published: True +position: 35 +--- + +# Appearance Settings + +You can control the appearance of the TextBox button by setting the following attribute: + +* [Size](#size) +* [Rounded](#rounded) +* [FillMode](#fillmode) + + +## Size + +You can increase or decrease the size of the TextBox by setting the `Size` attribute to a member of the `Telerik.Blazor.ThemeConstants.TextBox.Size` class: + +| Class members | Manual declarations | +|------------|--------| +|`Small` |`sm`| +|`Medium`|`md`| +|`Large`|`lg`| + +>caption The built-in sizes + +````CSHTML +@{ + var fields = typeof(Telerik.Blazor.ThemeConstants.TextBox.Size) + .GetFields(System.Reflection.BindingFlags.Public | System.Reflection.BindingFlags.Static + | System.Reflection.BindingFlags.FlattenHierarchy) + .Where(field => field.IsLiteral && !field.IsInitOnly).ToList(); + + + @foreach (var field in fields) + { + string size = field.GetValue(null).ToString(); + +
+ +
+ } +} + +@code{ + private string TextBoxValue { get; set; } +} +```` + +## Rounded + +The `Rounded` attribute applies the `border-radius` CSS rule to the textbox to achieve curving of the edges. You can set it to a member of the `Telerik.Blazor.ThemeConstants.TextBox.Rounded` class: + +| Class members | Manual declarations | +|------------|--------| +|`Small` |`sm`| +|`Medium`|`md`| +|`Large`|`lg`| +|`Full`|`full`| + +>caption The built-in values of the Rounded attribute + +````CSHTML +@* The built-in values of the Rounded attribute. *@ + +@{ + var fields = typeof(Telerik.Blazor.ThemeConstants.TextBox.Rounded) + .GetFields(System.Reflection.BindingFlags.Public | System.Reflection.BindingFlags.Static + | System.Reflection.BindingFlags.FlattenHierarchy) + .Where(field => field.IsLiteral && !field.IsInitOnly).ToList(); + + + @foreach (var field in fields) + { + string rounded = field.GetValue(null).ToString(); + +
+ +
+ } +} + +@code{ + private string TextBoxValue { get; set; } +} +```` + +## FillMode + +The `FillMode` controls how the TelerikTextBox is filled. You can set it to a member of the `Telerik.Blazor.ThemeConstants.TextBox.FillMode` class: + +| Class members | Result | +|------------|--------| +|`Solid`
default value|`solid`| +|`Flat`|`flat`| +|`Outline`|`outline`| + +>caption The built-in Fill modes + +````CSHTML +@* These are all built-in fill modes *@ + +@{ + var fields = typeof(Telerik.Blazor.ThemeConstants.TextBox.FillMode) + .GetFields(System.Reflection.BindingFlags.Public | System.Reflection.BindingFlags.Static + | System.Reflection.BindingFlags.FlattenHierarchy) + .Where(field => field.IsLiteral && !field.IsInitOnly).ToList(); + + + @foreach (var field in fields) + { + string fillMode = field.GetValue(null).ToString(); + +
+ @fillMode + +
+ } +} + +@code{ + private string TextBoxValue { get; set; } +} +```` + diff --git a/components/togglebutton/appearance.md b/components/togglebutton/appearance.md new file mode 100644 index 0000000000..7e2294c558 --- /dev/null +++ b/components/togglebutton/appearance.md @@ -0,0 +1,192 @@ +--- +title: Appearance +page_title: ToggleButton Appearance +description: Appearance settings of the ToggleButton for Blazor. +slug: togglebutton-appearance +tags: telerik,blazor,button,toggle,togglebutton,appearance +published: True +position: 35 +--- + +# Appearance Settings + +You can control the appearance of the toggle button by setting the following attributes: + +* [FillMode](#fillmode) +* [Rounded](#rounded) +* [Shape](#shape) +* [Size](#size) +* [ThemeColor](#themecolor) + +You can use all of them together to achieve the desired appearance. This article will explain their effect one by one. + +## FillMode + +The `FillMode` controls how the TelerikToggleButton is filled. You can set it to a member of the `Telerik.Blazor.ThemeConstants.Button.FillMode` class: + +| Class members | Manual declarations | +|------------|--------| +|`Solid`
default value|`solid`| +|`Flat`|`flat`| +|`Outline`|`outline`| +|`Link`|`link`| + +>caption The built-in Fill modes + +````CSHTML +@* These are all built-in fill modes *@ + +@{ + var fields = typeof(Telerik.Blazor.ThemeConstants.Button.FillMode) + .GetFields(System.Reflection.BindingFlags.Public | System.Reflection.BindingFlags.Static + | System.Reflection.BindingFlags.FlattenHierarchy) + .Where(field => field.IsLiteral && !field.IsInitOnly).ToList(); + + foreach (var field in fields) + { + string fillmode = field.GetValue(null).ToString(); + +
+ @fillmode +
+ } +} +```` + +## Rounded + +The `Rounded` parameter applies the `border-radius` CSS rule to the button to achieve curving of the edges. You can set it to a member of the `Telerik.Blazor.ThemeConstants.Button.Rounded` class: + +| Class members | Manual declarations | +|------------|--------| +|`Small` |`sm`| +|`Medium`|`md`| +|`Large`|`lg`| +|`Full`|`full`| + +>caption The built-in values of the Rounded attribute + +````CSHTML +@* The built-in rounded edges of the button. *@ + +@{ + var fields = typeof(Telerik.Blazor.ThemeConstants.Button.Rounded) + .GetFields(System.Reflection.BindingFlags.Public | System.Reflection.BindingFlags.Static + | System.Reflection.BindingFlags.FlattenHierarchy) + .Where(field => field.IsLiteral && !field.IsInitOnly).ToList(); + + foreach (var field in fields) + { + string rounded = field.GetValue(null).ToString(); + +
+ @rounded +
+ } +} +```` + +## Shape + +The `Shape` attribute defines the geometric shape of the button. You can set it to a member of the `Telerik.Blazor.ThemeConstants.Button.Shape` class: + +| Class members | Manual declarations | +|---------------|--------| +| `Rectangle` |`rectangle`| +| `Square` |`square`| +| `Circle` |To create a circular button you should set the `Shape` attribute to **Square**, and the `Rounded` attribute to **Full**| + + +>note The width and height of the geometric shapes depend on the amount of text in the button, and the size of the font. + +>caption The built-in button shapes + +````CSHTML +@{ + var fields = typeof(Telerik.Blazor.ThemeConstants.Button.Shape) + .GetFields(System.Reflection.BindingFlags.Public | System.Reflection.BindingFlags.Static + | System.Reflection.BindingFlags.FlattenHierarchy) + .Where(field => field.IsLiteral && !field.IsInitOnly).ToList(); + + foreach (var field in fields) + { + string shape = field.GetValue(null).ToString(); + +
+ @shape +
+ } +} +```` + +## Size + +You can increase or decrease the size of the button by setting the `Size` parameter to a member of the `Telerik.Blazor.ThemeConstants.Button.Size` class: + +| Class members | Manual declarations | +|---------------|--------| +| `Small` |`sm`| +| `Medium` |`md`| +| `Large` |`lg`| + +>caption The built-in button sizes + +````CSHTML +@{ + var fields = typeof(Telerik.Blazor.ThemeConstants.Button.Size) + .GetFields(System.Reflection.BindingFlags.Public | System.Reflection.BindingFlags.Static + | System.Reflection.BindingFlags.FlattenHierarchy) + .Where(field => field.IsLiteral && !field.IsInitOnly).ToList(); + + foreach (var field in fields) + { + string size = field.GetValue(null).ToString(); + +
+ @size +
+ } +} +```` + +## ThemeColor + +The color of the button is controlled through the `ThemeColor` parameter. You can set it to a member of the `Telerik.Blazor.ThemeConstants.Button.ThemeColor` class: + +| Class members | Manual declarations | +|------------|--------| +|`Base`
default value |`base`| +|`Primary`|`primary`| +|`Secondary`|`secondary`| +|`Tertiary`|`tertiary`| +|`Info`|`info`| +|`Success`|`success`| +|`Warning`|`warning`| +|`Error`|`error`| +|`Dark`|`dark`| +|`Light`|`light`| +|`Inverse`|`inverse`| + + +>caption The built-in ThemeColors + +````CSHTML +@* The built-in button colors *@ + +@{ + var fields = typeof(Telerik.Blazor.ThemeConstants.Button.ThemeColor) + .GetFields(System.Reflection.BindingFlags.Public | System.Reflection.BindingFlags.Static + | System.Reflection.BindingFlags.FlattenHierarchy) + .Where(field => field.IsLiteral && !field.IsInitOnly).ToList(); + + foreach (var field in fields) + { + string themeColor = field.GetValue(null).ToString(); + +
+ @themeColor +
+ } +} +```` + diff --git a/components/togglebutton/images/button-fillmode-flat.png b/components/togglebutton/images/button-fillmode-flat.png new file mode 100644 index 0000000000..6d3f957af3 Binary files /dev/null and b/components/togglebutton/images/button-fillmode-flat.png differ diff --git a/components/togglebutton/images/button-fillmode-link.png b/components/togglebutton/images/button-fillmode-link.png new file mode 100644 index 0000000000..c7c4d7aa2b Binary files /dev/null and b/components/togglebutton/images/button-fillmode-link.png differ diff --git a/components/togglebutton/images/button-fillmode-outline.png b/components/togglebutton/images/button-fillmode-outline.png new file mode 100644 index 0000000000..804a6009ba Binary files /dev/null and b/components/togglebutton/images/button-fillmode-outline.png differ diff --git a/components/togglebutton/images/button-fillmode-solid.png b/components/togglebutton/images/button-fillmode-solid.png new file mode 100644 index 0000000000..af9c07e7e0 Binary files /dev/null and b/components/togglebutton/images/button-fillmode-solid.png differ diff --git a/components/togglebutton/images/button-rounded-full.png b/components/togglebutton/images/button-rounded-full.png new file mode 100644 index 0000000000..f79ebff27a Binary files /dev/null and b/components/togglebutton/images/button-rounded-full.png differ diff --git a/components/togglebutton/images/button-rounded-large.png b/components/togglebutton/images/button-rounded-large.png new file mode 100644 index 0000000000..3e3eb36329 Binary files /dev/null and b/components/togglebutton/images/button-rounded-large.png differ diff --git a/components/togglebutton/images/button-rounded-medium.png b/components/togglebutton/images/button-rounded-medium.png new file mode 100644 index 0000000000..f767029057 Binary files /dev/null and b/components/togglebutton/images/button-rounded-medium.png differ diff --git a/components/togglebutton/images/button-rounded-small.png b/components/togglebutton/images/button-rounded-small.png new file mode 100644 index 0000000000..d3ace4f560 Binary files /dev/null and b/components/togglebutton/images/button-rounded-small.png differ diff --git a/components/togglebutton/images/button-shape-rectangle.png b/components/togglebutton/images/button-shape-rectangle.png new file mode 100644 index 0000000000..8313922f20 Binary files /dev/null and b/components/togglebutton/images/button-shape-rectangle.png differ diff --git a/components/togglebutton/images/button-shape-square.png b/components/togglebutton/images/button-shape-square.png new file mode 100644 index 0000000000..59cc3d9116 Binary files /dev/null and b/components/togglebutton/images/button-shape-square.png differ diff --git a/components/togglebutton/images/button-size-large.png b/components/togglebutton/images/button-size-large.png new file mode 100644 index 0000000000..9e14f3f387 Binary files /dev/null and b/components/togglebutton/images/button-size-large.png differ diff --git a/components/togglebutton/images/button-size-medium.png b/components/togglebutton/images/button-size-medium.png new file mode 100644 index 0000000000..680b13d414 Binary files /dev/null and b/components/togglebutton/images/button-size-medium.png differ diff --git a/components/togglebutton/images/button-size-small.png b/components/togglebutton/images/button-size-small.png new file mode 100644 index 0000000000..9f7d629add Binary files /dev/null and b/components/togglebutton/images/button-size-small.png differ diff --git a/components/togglebutton/images/button-themecolor-base.png b/components/togglebutton/images/button-themecolor-base.png new file mode 100644 index 0000000000..aca44d6179 Binary files /dev/null and b/components/togglebutton/images/button-themecolor-base.png differ diff --git a/components/togglebutton/images/button-themecolor-dark.png b/components/togglebutton/images/button-themecolor-dark.png new file mode 100644 index 0000000000..e7257b9ef0 Binary files /dev/null and b/components/togglebutton/images/button-themecolor-dark.png differ diff --git a/components/togglebutton/images/button-themecolor-error.png b/components/togglebutton/images/button-themecolor-error.png new file mode 100644 index 0000000000..8cc38f7aa3 Binary files /dev/null and b/components/togglebutton/images/button-themecolor-error.png differ diff --git a/components/togglebutton/images/button-themecolor-info.png b/components/togglebutton/images/button-themecolor-info.png new file mode 100644 index 0000000000..288cb1cede Binary files /dev/null and b/components/togglebutton/images/button-themecolor-info.png differ diff --git a/components/togglebutton/images/button-themecolor-inverse.png b/components/togglebutton/images/button-themecolor-inverse.png new file mode 100644 index 0000000000..cb438c3092 Binary files /dev/null and b/components/togglebutton/images/button-themecolor-inverse.png differ diff --git a/components/togglebutton/images/button-themecolor-light.png b/components/togglebutton/images/button-themecolor-light.png new file mode 100644 index 0000000000..6799351e78 Binary files /dev/null and b/components/togglebutton/images/button-themecolor-light.png differ diff --git a/components/togglebutton/images/button-themecolor-primary.png b/components/togglebutton/images/button-themecolor-primary.png new file mode 100644 index 0000000000..86fff7a62b Binary files /dev/null and b/components/togglebutton/images/button-themecolor-primary.png differ diff --git a/components/togglebutton/images/button-themecolor-secondary.png b/components/togglebutton/images/button-themecolor-secondary.png new file mode 100644 index 0000000000..9e9c4cb678 Binary files /dev/null and b/components/togglebutton/images/button-themecolor-secondary.png differ diff --git a/components/togglebutton/images/button-themecolor-success.png b/components/togglebutton/images/button-themecolor-success.png new file mode 100644 index 0000000000..8e366754e6 Binary files /dev/null and b/components/togglebutton/images/button-themecolor-success.png differ diff --git a/components/togglebutton/images/button-themecolor-tertiary.png b/components/togglebutton/images/button-themecolor-tertiary.png new file mode 100644 index 0000000000..77b4aacb9d Binary files /dev/null and b/components/togglebutton/images/button-themecolor-tertiary.png differ diff --git a/components/togglebutton/images/button-themecolor-warning.png b/components/togglebutton/images/button-themecolor-warning.png new file mode 100644 index 0000000000..a7acf469c9 Binary files /dev/null and b/components/togglebutton/images/button-themecolor-warning.png differ diff --git a/components/togglebutton/images/primary-button.png b/components/togglebutton/images/primary-button.png new file mode 100644 index 0000000000..061a97047b Binary files /dev/null and b/components/togglebutton/images/primary-button.png differ