@page "/"
@{
int[] mainColumnWidths = { 100,100 };
int[] extrasColumnWidths = { 100, 500 };
}
<MatAccordion>
@foreach (var car in cars)
{
<MatExpansionPanel>
<MatExpansionPanelSummary>
<table>
<thead>
<tr>
<th style="width:@mainColumnWidths[0];">Name</th>
<th style="width:@mainColumnWidths[0];">Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>@car.Name</td>
<td>£ @car.Price</td>
</tr>
</tbody>
</table>
</MatExpansionPanelSummary>
<MatExpansionPanelDetails>
<table>
<thead>
<tr>
<th style="width:@extrasColumnWidths[0];">Horse Power</th>
<th style="width:@extrasColumnWidths[1];">Piccy</th>
</tr>
</thead>
<tbody>
<tr>
<td>@car.extras.HorsePower Hp</td>
<td>
<img src="@car.extras.prettyPiccyUrl" style="width:@extrasColumnWidths[1]" />
</td>
</tr>
</tbody>
</table>
</MatExpansionPanelDetails>
</MatExpansionPanel>
}
</MatAccordion>
@code
{
bool panelOpenState = false;
class car
{
public string Name;
public decimal Price;
public moreCarDetails extras;
}
class moreCarDetails
{
public int HorsePower;
public string prettyPiccyUrl;
}
car[] cars = new car[]
{
new car { Name="hotrod", Price = 12345.67M, extras = new moreCarDetails{ HorsePower = 500, prettyPiccyUrl="https://th.bing.com/th/id/OIP.xkNgqs-pQVQzThVt6bJv5AHaE8?pid=ImgDet&rs=1" } },
new car { Name="automan's car", Price= 66666.66M, extras = new moreCarDetails{ HorsePower = 6666, prettyPiccyUrl = "https://th.bing.com/th/id/OIP.1tj3C-2QIDn60tN5VQBXSAHaDv?pid=ImgDet&rs=1" } }
};
}