Skip to content

Commit

Permalink
docs: Fixing snippets format
Browse files Browse the repository at this point in the history
  • Loading branch information
@eriklimakc
eriklimakc committed Dec 21, 2023
1 parent 2d493fc commit 931cbd5
Show file tree
Hide file tree
Showing 2 changed files with 302 additions and 301 deletions.
223 changes: 112 additions & 111 deletions doc/material-controls-extensions.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,48 +16,48 @@ Here are supported control with samples:
* TextBox:

# [**XAML**](#tab/xaml)

<TextBox Style="{StaticResource MaterialFilledTextBoxStyle}">
<um:ControlExtensions.Icon>
<SymbolIcon Symbol="SolidStar" />
</um:ControlExtensions.Icon>
</ComboBox>

```xml
<TextBox Style="{StaticResource MaterialFilledTextBoxStyle}">
<um:ControlExtensions.Icon>
<SymbolIcon Symbol="SolidStar" />
</um:ControlExtensions.Icon>
</ComboBox>
```

# [**C#**](#tab/csharp)

new TextBox()
.Style(Theme.TextBox.Styles.Filled)
.ControlExtensions
(
icon:
new SymbolIcon()
.Symbol(Symbol.SolidStar)
)

```cs
new TextBox()
.Style(Theme.TextBox.Styles.Filled)
.ControlExtensions
(
icon:
new SymbolIcon()
.Symbol(Symbol.SolidStar)
)
```
***

* ComboBox:

# [**XAML**](#tab/xaml)

<ComboBox Style="{StaticResource MaterialComboBoxStyle}">
<um:ControlExtensions.Icon>
<SymbolIcon Symbol="SolidStar" />
</um:ControlExtensions.Icon>
</ComboBox>

```xml
<ComboBox Style="{StaticResource MaterialComboBoxStyle}">
<um:ControlExtensions.Icon>
<SymbolIcon Symbol="SolidStar" />
</um:ControlExtensions.Icon>
</ComboBox>
```
# [**C#**](#tab/csharp)

new ComboBox()
.Style(Theme.ComboBox.Styles.Default)
.ControlExtensions
(
icon:
new SymbolIcon()
.Symbol(Symbol.SolidStar)
)

```cs
new ComboBox()
.Style(Theme.ComboBox.Styles.Default)
.ControlExtensions
(
icon:
new SymbolIcon()
.Symbol(Symbol.SolidStar)
)
```
***

## Alternate Content
Expand All @@ -68,34 +68,34 @@ It's control specific and for now, you can only use it with the ToggleButton con
### Alternate Content on ToggleButton

# [**XAML**](#tab/xaml)

<ToggleButton Style="{StaticResource MaterialToggleButtonIconStyle}">
<!-- This is the default content - which is when the control state is UNCHECKED (the default value of a ToggleButton) -->
<PathIcon Data="{StaticResource Icon_more_horizontal}" />
<!-- This is the alternate content - which is when the control state is CHECKED -->
<um:ControlExtensions.AlternateContent>
<PathIcon Data="{StaticResource Icon_more_vertical}" />
</um:ControlExtensions.AlternateContent>
</ToggleButton>

```xml
<ToggleButton Style="{StaticResource MaterialToggleButtonIconStyle}">
<!-- This is the default content - which is when the control state is UNCHECKED (the default value of a ToggleButton) -->
<PathIcon Data="{StaticResource Icon_more_horizontal}" />
<!-- This is the alternate content - which is when the control state is CHECKED -->
<um:ControlExtensions.AlternateContent>
<PathIcon Data="{StaticResource Icon_more_vertical}" />
</um:ControlExtensions.AlternateContent>
</ToggleButton>
```
# [**C#**](#tab/csharp)

new ToggleButton()
.Style(Theme.ToggleButton.Styles.Icon)
// This is the default content - which is when the control state is UNCHECKED (the default value of a ToggleButton)
.Content
(
```cs
new ToggleButton()
.Style(Theme.ToggleButton.Styles.Icon)
// This is the default content - which is when the control state is UNCHECKED (the default value of a ToggleButton)
.Content
(
new PathIcon()
.Data(StaticResource.Get<Geometry>("Icon_more_horizontal"))
)
// This is the alternate content - which is when the control state is CHECKED
.ControlExtensions
(
alternateContent:
new PathIcon()
.Data(StaticResource.Get<Geometry>("Icon_more_horizontal"))
)
// This is the alternate content - which is when the control state is CHECKED
.ControlExtensions
(
alternateContent:
new PathIcon()
.Data(StaticResource.Get<Geometry>("Icon_more_vertical"))
)

.Data(StaticResource.Get<Geometry>("Icon_more_vertical"))
)
```
***

## Elevation
Expand Down Expand Up @@ -147,59 +147,60 @@ Within the `ControlTemplate` of the `ElevatedButtonStyle`, instead of performing
Applying the surface tint for elevated controls is optional and must be explicitly enabled through the use of the `IsTintEnabled` attached property. Below is an example of how an elevated control may appear with or without a surface tint:

# [**XAML**](#tab/xaml)

<StackPanel Spacing="8">
<Button Content="Elevation 0"
um:ControlExtensions.Elevation="0"
Style="{StaticResource MaterialElevatedButtonStyle}" />
<Button Content="Elevation 1"
um:ControlExtensions.Elevation="1"
Style="{StaticResource MaterialElevatedButtonStyle}" />
<Button Content="Elevation 2"
um:ControlExtensions.Elevation="2"
Style="{StaticResource MaterialElevatedButtonStyle}" />
<Button Content="Elevation 3"
um:ControlExtensions.Elevation="3"
Style="{StaticResource MaterialElevatedButtonStyle}" />
<Button Content="Elevation 4"
um:ControlExtensions.Elevation="4"
Style="{StaticResource MaterialElevatedButtonStyle}" />
<Button Content="Elevation 5"
um:ControlExtensions.Elevation="5"
Style="{StaticResource MaterialElevatedButtonStyle}" />
</StackPanel>

```xml
<StackPanel Spacing="8">
<Button Content="Elevation 0"
um:ControlExtensions.Elevation="0"
Style="{StaticResource MaterialElevatedButtonStyle}" />
<Button Content="Elevation 1"
um:ControlExtensions.Elevation="1"
Style="{StaticResource MaterialElevatedButtonStyle}" />
<Button Content="Elevation 2"
um:ControlExtensions.Elevation="2"
Style="{StaticResource MaterialElevatedButtonStyle}" />
<Button Content="Elevation 3"
um:ControlExtensions.Elevation="3"
Style="{StaticResource MaterialElevatedButtonStyle}" />
<Button Content="Elevation 4"
um:ControlExtensions.Elevation="4"
Style="{StaticResource MaterialElevatedButtonStyle}" />
<Button Content="Elevation 5"
um:ControlExtensions.Elevation="5"
Style="{StaticResource MaterialElevatedButtonStyle}" />
</StackPanel>
```

# [**C#**](#tab/csharp)

new StackPanel()
.Spacing(8)
.Children(
new Button()
.Content("Elevation 0")
.ControlExtensions(elevation: 0)
.Style(Theme.Button.Styles.Elevated),
new Button()
.Content("Elevation 1")
.ControlExtensions(elevation: 1)
.Style(Theme.Button.Styles.Elevated),
new Button()
.Content("Elevation 2")
.ControlExtensions(elevation: 2)
.Style(Theme.Button.Styles.Elevated),
new Button()
.Content("Elevation 3")
.ControlExtensions(elevation: 3)
.Style(Theme.Button.Styles.Elevated),
new Button()
.Content("Elevation 4")
.ControlExtensions(elevation: 4)
.Style(Theme.Button.Styles.Elevated),
new Button()
.Content("Elevation 5")
.ControlExtensions(elevation: 5)
.Style(Theme.Button.Styles.Elevated)
)
```cs
new StackPanel()
.Spacing(8)
.Children(
new Button()
.Content("Elevation 0")
.ControlExtensions(elevation: 0)
.Style(Theme.Button.Styles.Elevated),
new Button()
.Content("Elevation 1")
.ControlExtensions(elevation: 1)
.Style(Theme.Button.Styles.Elevated),
new Button()
.Content("Elevation 2")
.ControlExtensions(elevation: 2)
.Style(Theme.Button.Styles.Elevated),
new Button()
.Content("Elevation 3")
.ControlExtensions(elevation: 3)
.Style(Theme.Button.Styles.Elevated),
new Button()
.Content("Elevation 4")
.ControlExtensions(elevation: 4)
.Style(Theme.Button.Styles.Elevated),
new Button()
.Content("Elevation 5")
.ControlExtensions(elevation: 5)
.Style(Theme.Button.Styles.Elevated)
)
```
***

The above code will produce the following result:
Expand Down
Loading

0 comments on commit 931cbd5

Please sign in to comment.