Skip to content

Commit

Permalink
Merge pull request SamProf#539 from enkodellc/develop
Browse files Browse the repository at this point in the history
SamProf#496 Target for MatButton / MatIconButton
  • Loading branch information
lindespang authored May 14, 2020
2 parents 75f7a0e + 1914e79 commit 32b14b6
Show file tree
Hide file tree
Showing 12 changed files with 307 additions and 39 deletions.
Binary file modified content/mat-hidden-breakpoints.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
20 changes: 20 additions & 0 deletions src/MatBlazor.Demo/Demo/DemoMatButton.razor
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,16 @@
<i class="fa fa-github" aria-hidden="true"></i> &nbsp; Github
</MatButton>

<h5 class="mat-subtitle1">With Font-Awsome Icons and Link in a new Window - Target Defined</h5>
<MatButton Link="https://github.com/BlazorComponents/MatBlazor" Target="_blank">
<i class="fa fa-github" aria-hidden="true"></i> &nbsp; Github
</MatButton>

<h5 class="mat-subtitle1">Internal Link in a new Window - Target Defined</h5>
<MatButton Link="/TextField" Target="_blank">
<i class="fa fa-paragraph" aria-hidden="true"></i> &nbsp; TextField
</MatButton>

@code
{

Expand All @@ -39,6 +49,16 @@
<i class=""fa fa-github"" aria-hidden=""true""></i> &nbsp; Github
</MatButton>
<h5 class=""mat-subtitle1"">With Font-Awsome Icons and Link in a new Window - Target Defined</h5>
<MatButton Link=""https://github.com/BlazorComponents/MatBlazor"" Target=""_blank"">
<i class=""fa fa-github"" aria-hidden=""true""></i> &nbsp; Github
</MatButton>
<h5 class=""mat-subtitle1"">Internal Link in a new Window - Target Defined</h5>
<MatButton Link=""/TextField"" Target=""_blank"">
<i class=""fa fa-paragraph"" aria-hidden=""true""></i> &nbsp; TextField
</MatButton>
@code
{
Expand Down
20 changes: 20 additions & 0 deletions src/MatBlazor.Demo/Demo/DemoMatIconButton.razor
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,16 @@
<MatIcon>@MatIconNames.Touch_app</MatIcon>
</MatIconButton>

<h5 class="mat-subtitle1">With Font-Awsome Icons and Link in a new Window - Target Defined</h5>
<MatIconButton Link="https://github.com/BlazorComponents/MatBlazor" Target="_blank">
<MatIcon>@MatIconNames.Touch_app</MatIcon>
</MatIconButton>

<h5 class="mat-subtitle1">Internal Link in a new Window - Target Defined</h5>
<MatIconButton Link="/TextField" Target="_blank">
<MatIcon>@MatIconNames.Touch_app</MatIcon>
</MatIconButton>

@code
{

Expand Down Expand Up @@ -50,6 +60,16 @@
<MatIcon>@MatIconNames.Touch_app</MatIcon>
</MatIconButton>
<h5 class=""mat-subtitle1"">With Font-Awsome Icons and Link in a new Window - Target Defined</h5>
<MatIconButton Link=""https://github.com/BlazorComponents/MatBlazor"" Target=""_blank"">
<MatIcon>@MatIconNames.Touch_app</MatIcon>
</MatIconButton>
<h5 class=""mat-subtitle1"">Internal Link in a new Window - Target Defined</h5>
<MatIconButton Link=""/TextField"" Target=""_blank"">
<MatIcon>@MatIconNames.Touch_app</MatIcon>
</MatIconButton>
@code
{
Expand Down
5 changes: 3 additions & 2 deletions src/MatBlazor.Demo/Demo/DemoMatNavMenu.razor
Original file line number Diff line number Diff line change
Expand Up @@ -29,9 +29,10 @@
<MatNavItem Disabled="true" Href="#">Item 6.A</MatNavItem>
<MatNavItem>Item 6.B</MatNavItem>
<MatNavItem>Item 6.C</MatNavItem>

</MatNavSubMenuList>
</MatNavSubMenu>
<MatNavItem Href="https://blazorboilerplate.com/">Blazor Boilerplate - Href</MatNavItem>
<MatNavItem Href="https://blazorboilerplate.com/" Target="_blank">Blazor Boilerplate - Href - Target = _blank</MatNavItem>
<MatNavItem Href="https://www.matblazor.com/">MatBlazor - Href</MatNavItem>
</MatNavMenu>

Expand Down Expand Up @@ -311,4 +312,4 @@
}
")></BlazorFiddle>
</SourceContent>
</DemoContainer>
</DemoContainer>
189 changes: 182 additions & 7 deletions src/MatBlazor.Demo/Demo/DemoTable.razor
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@

</Content>
<SourceContent>
<BlazorFiddle Template="MatBlazor" Code=@(@"
<BlazorFiddle Template="MatBlazor" Code=@(@"
<MatTable Items=""@cars"" class=""mat-elevation-z5"">
<MatTableHeader>
<th>Name</th>
Expand Down Expand Up @@ -133,7 +133,7 @@

</Content>
<SourceContent>
<BlazorFiddle Template="MatBlazor" Code=@(@"
<BlazorFiddle Template="MatBlazor" Code=@(@"
<MatTable Items=""@todos"" LoadInitialData=""true"" Striped=""true"" RequestApiOnlyOnce=""true"" AllowSelection=""true"" RowClass=""tester""
ApiUrl=""https://jsonplaceholder.typicode.com/todos"" FilterByColumnName=""Title"" DebounceMilliseconds=""150"" class=""mat-elevation-z5"">
<MatTableHeader>
Expand Down Expand Up @@ -170,6 +170,184 @@
</SourceContent>
</DemoContainer>

<h5 class="mat-h5">Example with sort header table</h5>
<DemoContainer>
<Content>
<MatTable Items="@sortedData" class="mat-elevation-z5" ShowPaging="false" UseSortHeaderRow="true">
<MatTableHeader>
<MatSortHeaderRow SortChanged="@SortData">
<MatSortHeader SortId="name"><span style="width:600px">Dessert (100g)</span></MatSortHeader>
<MatSortHeader SortId="calories">Calories</MatSortHeader>
<MatSortHeader SortId="fat">Fat (g)</MatSortHeader>
<MatSortHeader SortId="carbs">Carbs (g)</MatSortHeader>
<MatSortHeader SortId="protein">Protein (g)</MatSortHeader>
</MatSortHeaderRow>
</MatTableHeader>
<MatTableRow>
<td>@context.Name</td>
<td>@context.Calories</td>
<td>@context.Fat</td>
<td>@context.Carbs</td>
<td>@context.Protein</td>
</MatTableRow>
</MatTable>

@code
{
class Dessert
{
public int Calories { get; set; }
public int Carbs { get; set; }
public int Fat { get; set; }
public string Name { get; set; }
public int Protein { get; set; }
}

Dessert[] desserts = new[]
{
new Dessert() {Name = "Frozen yogurt", Calories = 159, Fat = 6, Carbs = 24, Protein = 4},
new Dessert() {Name = "Ice cream sandwich", Calories = 237, Fat = 9, Carbs = 37, Protein = 4},
new Dessert() {Name = "Eclair", Calories = 262, Fat = 16, Carbs = 24, Protein = 6},
new Dessert() {Name = "Cupcake", Calories = 305, Fat = 4, Carbs = 67, Protein = 4},
new Dessert() {Name = "Gingerbread", Calories = 356, Fat = 16, Carbs = 49, Protein = 4},
};

void SortData(MatSortChangedEvent sort)
{
sortedData = desserts.ToArray();
if (!(sort == null || sort.Direction == MatSortDirection.None || string.IsNullOrEmpty(sort.SortId)))
{
Comparison<Dessert> comparison = null;
switch (sort.SortId)
{
case "name":
comparison = (s1, s2) => string.Compare(s1.Name, s2.Name, StringComparison.InvariantCultureIgnoreCase);
break;
case "calories":
comparison = (s1, s2) => s1.Calories.CompareTo(s2.Calories);
break;
case "fat":
comparison = (s1, s2) => s1.Fat.CompareTo(s2.Fat);
break;
case "carbs":
comparison = (s1, s2) => s1.Carbs.CompareTo(s2.Carbs);
break;
case "protein":
comparison = (s1, s2) => s1.Protein.CompareTo(s2.Protein);
break;
}
if (comparison != null)
{
if (sort.Direction == MatSortDirection.Desc)
{
Array.Sort(sortedData, (s1, s2) => -1 * comparison(s1, s2));
}
else
{
Array.Sort(sortedData, comparison);
}
}
}
}

Dessert[] sortedData = null;

protected override void OnInitialized()
{
base.OnInitialized();
SortData(null);
}
}

</Content>
<SourceContent>
<BlazorFiddle Template="MatBlazor" Code=@(@"
<MatTable Items=""@sortedData"" class=""mat-elevation-z5"" ShowPaging=""false"" UseSortHeaderRow=""true"">
<MatTableHeader >
<MatSortHeaderRow SortChanged=""@SortData"">
<MatSortHeader SortId=""name"">Dessert (100g)</MatSortHeader>
<MatSortHeader SortId=""calories"">Calories</MatSortHeader>
<MatSortHeader SortId=""fat"">Fat (g)</MatSortHeader>
<MatSortHeader SortId=""carbs"">Carbs (g)</MatSortHeader>
<MatSortHeader SortId=""protein"">Protein (g)</MatSortHeader>
</MatSortHeaderRow>
</MatTableHeader>
<MatTableRow>
<td>@context.Name</td>
<td>@context.Calories</td>
<td>@context.Fat</td>
<td>@context.Carbs</td>
<td>@context.Protein</td>
</MatTableRow>
</MatTable>
@code
{
class Dessert
{
public int Calories { get; set; }
public int Carbs { get; set; }
public int Fat { get; set; }
public string Name { get; set; }
public int Protein { get; set; }
}
Dessert[] desserts = new[]
{
new Dessert() {Name = ""Frozen yogurt"", Calories = 159, Fat = 6, Carbs = 24, Protein = 4},
new Dessert() {Name = ""Ice cream sandwich"", Calories = 237, Fat = 9, Carbs = 37, Protein = 4},
new Dessert() {Name = ""Eclair"", Calories = 262, Fat = 16, Carbs = 24, Protein = 6},
new Dessert() {Name = ""Cupcake"", Calories = 305, Fat = 4, Carbs = 67, Protein = 4},
new Dessert() {Name = ""Gingerbread"", Calories = 356, Fat = 16, Carbs = 49, Protein = 4},
};
void SortData(MatSortChangedEvent sort)
{
sortedData = desserts.ToArray();
if (!(sort == null || sort.Direction == MatSortDirection.None || string.IsNullOrEmpty(sort.SortId)))
{
Comparison<Dessert> comparison = null;
switch (sort.SortId)
{
case ""name"":
comparison = (s1, s2) => string.Compare(s1.Name, s2.Name, StringComparison.InvariantCultureIgnoreCase);
break;
case ""calories"":
comparison = (s1, s2) => s1.Calories.CompareTo(s2.Calories);
break;
case ""fat"":
comparison = (s1, s2) => s1.Fat.CompareTo(s2.Fat);
break;
case ""carbs"":
comparison = (s1, s2) => s1.Carbs.CompareTo(s2.Carbs);
break;
case ""protein"":
comparison = (s1, s2) => s1.Protein.CompareTo(s2.Protein);
break;
}
if (comparison != null)
{
if (sort.Direction == MatSortDirection.Desc)
{
Array.Sort(sortedData, (s1, s2) => -1 * comparison(s1, s2));
}
else
{
Array.Sort(sortedData, comparison);
}
}
}
}
Dessert[] sortedData = null;
protected override void OnInitialized()
{
base.OnInitialized();
SortData(null);
}
}
")></BlazorFiddle>
</SourceContent>
</DemoContainer>



<h5 class="mat-h5">Select row, with returning selected item example</h5>
<DemoContainer>
<Content>
Expand Down Expand Up @@ -202,9 +380,6 @@
Description = description;
}
}
protected override void OnInitialized()
{
}

Task[] tasks = new[]
{
Expand Down Expand Up @@ -233,7 +408,7 @@

</Content>
<SourceContent>
<BlazorFiddle Template="MatBlazor" Code=@(@"
<BlazorFiddle Template="MatBlazor" Code=@(@"
<MatTable Items=""tasks"" class=""mat-elevation-z5"" AllowSelection=""true"" SelectionChanged=""SelectionChangedEvent"">
<MatTableHeader>
<th>Id</th>
Expand Down Expand Up @@ -294,4 +469,4 @@
")></BlazorFiddle>
</SourceContent>
</DemoContainer>
</DemoContainer>
2 changes: 1 addition & 1 deletion src/MatBlazor/Components/Base/BaseMatComponent.cs
Original file line number Diff line number Diff line change
Expand Up @@ -118,4 +118,4 @@ protected void DisposeDotNetObjectRef<T>(DotNetObjectReference<T> value) where T

#endregion
}
}
}
Loading

0 comments on commit 32b14b6

Please sign in to comment.