init receiver UI web project using devexpress template
This commit is contained in:
@@ -0,0 +1,24 @@
|
||||
@page "/counter"
|
||||
|
||||
<PageTitle>Counter</PageTitle>
|
||||
|
||||
<h1>Counter</h1>
|
||||
|
||||
<div class="counter-block">
|
||||
<div class="counter-content">
|
||||
<div class="counter-count">
|
||||
@currentCount
|
||||
</div>
|
||||
current count
|
||||
</div>
|
||||
<DxButton Click="IncrementCount">Click me</DxButton>
|
||||
</div>
|
||||
|
||||
@code {
|
||||
private int currentCount;
|
||||
|
||||
private void IncrementCount()
|
||||
{
|
||||
currentCount++;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,25 @@
|
||||
.counter-block {
|
||||
align-items: center;
|
||||
border-radius: 1rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.5rem;
|
||||
height: 17rem;
|
||||
justify-content: center;
|
||||
padding: 2.5rem 1.5rem 1.5rem;
|
||||
width: 16.875rem;
|
||||
border: 1px solid var(--dxds-color-border-neutral-default-rest);
|
||||
}
|
||||
|
||||
.counter-block .counter-content {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.counter-block .counter-count {
|
||||
font-size: 7.5rem;
|
||||
font-weight: 400;
|
||||
line-height: 7.75rem;
|
||||
}
|
||||
@@ -0,0 +1,27 @@
|
||||
@page "/"
|
||||
|
||||
<PageTitle>Welcome</PageTitle>
|
||||
|
||||
<div class="main-content">
|
||||
<DxGridLayout CssClass="index-gridlayout">
|
||||
<Rows>
|
||||
<DxGridLayoutRow Height="auto" Areas="header"></DxGridLayoutRow>
|
||||
<DxGridLayoutRow Height="auto" Areas="tiles"></DxGridLayoutRow>
|
||||
</Rows>
|
||||
<Items>
|
||||
<DxGridLayoutItem Area="header" CssClass="title">
|
||||
<Template>
|
||||
<div class="title-header-text">Hello World!</div>
|
||||
<div class="title-content-text">Welcome to your new DevExpress Blazor Application</div>
|
||||
</Template>
|
||||
</DxGridLayoutItem>
|
||||
<DxGridLayoutItem Area="tiles" CssClass="tiles">
|
||||
<Template>
|
||||
<IndexTile NavigateUrl="/counter" Title="Counter" Description="Count mouse clicks and track the total." IconCssClass="icon-counter" />
|
||||
<IndexTile NavigateUrl="/weather" Title="Weather" Description="See a 5-day temperature and weather conditions forecast." IconCssClass="icon-weather" />
|
||||
<IndexTile NavigateUrl="/pdfviewer" Title="PDF Viewer" Description="Load PDF files and view them in the web browser." IconCssClass="icon-pdf-viewer" />
|
||||
</Template>
|
||||
</DxGridLayoutItem>
|
||||
</Items>
|
||||
</DxGridLayout>
|
||||
</div>
|
||||
@@ -0,0 +1,31 @@
|
||||
::deep .index-gridlayout {
|
||||
container-type: inline-size;
|
||||
height: auto;
|
||||
margin-top: auto;
|
||||
margin-bottom: auto;
|
||||
padding-bottom: 9rem;
|
||||
}
|
||||
|
||||
::deep .title {
|
||||
padding-bottom: 3rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
::deep .tiles {
|
||||
--tile-column-count: 4;
|
||||
|
||||
display: grid;
|
||||
gap: 1rem;
|
||||
grid-template-columns: repeat(var(--tile-column-count), max-content);
|
||||
justify-content: center;
|
||||
|
||||
@container (max-width: 60.5rem) {
|
||||
--tile-column-count: 3;
|
||||
}
|
||||
@container (max-width: 45.125rem) {
|
||||
--tile-column-count: 2;
|
||||
}
|
||||
@container (max-width: 29.75rem) {
|
||||
--tile-column-count: 1;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,40 @@
|
||||
@inherits DrawerStateComponentBase
|
||||
|
||||
<div class="tile">
|
||||
<NavLink href="@AddDrawerStateToUrl(NavigateUrl)">
|
||||
<DxGridLayout CssClass="tile-content" ColumnSpacing="0.75rem" RowSpacing="0.75rem">
|
||||
<Rows>
|
||||
<DxGridLayoutRow Areas="icon title" Height="auto" />
|
||||
<DxGridLayoutRow Areas="description description" Height="auto" />
|
||||
</Rows>
|
||||
<Columns>
|
||||
<DxGridLayoutColumn Width="auto" />
|
||||
<DxGridLayoutColumn />
|
||||
</Columns>
|
||||
<Items>
|
||||
<DxGridLayoutItem Area="icon" CssClass="tile-icon">
|
||||
<Template>
|
||||
<div class="@("icon " + IconCssClass)" aria-hidden="true"></div>
|
||||
</Template>
|
||||
</DxGridLayoutItem>
|
||||
<DxGridLayoutItem Area="title" CssClass="tile-title">
|
||||
<Template>
|
||||
@Title
|
||||
</Template>
|
||||
</DxGridLayoutItem>
|
||||
<DxGridLayoutItem Area="description" CssClass="tile-description">
|
||||
<Template>
|
||||
@Description
|
||||
</Template>
|
||||
</DxGridLayoutItem>
|
||||
</Items>
|
||||
</DxGridLayout>
|
||||
</NavLink>
|
||||
</div>
|
||||
|
||||
@code {
|
||||
[Parameter] public string NavigateUrl { get; set; } = string.Empty;
|
||||
[Parameter] public string? Title { get; set; }
|
||||
[Parameter] public string? Description { get; set; }
|
||||
[Parameter] public string? IconCssClass { get; set; }
|
||||
}
|
||||
@@ -0,0 +1,44 @@
|
||||
.tile {
|
||||
border-radius: 0.75rem;
|
||||
height: 7.5rem;
|
||||
transition: box-shadow 0.2s;
|
||||
width: 14.375rem;
|
||||
border: 1px solid var(--dxds-color-border-neutral-default-rest);
|
||||
}
|
||||
|
||||
.tile:hover {
|
||||
box-shadow: 0 4px 8px 0 rgba(170, 170, 170, 0.24), 0 0 2px 0 rgba(170, 170, 170, 0.2);
|
||||
}
|
||||
|
||||
.tile ::deep > a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
::deep .tile-content {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
::deep .tile-icon {
|
||||
border-radius: 0.375rem;
|
||||
height: 2.75rem;
|
||||
padding: 0.75rem;
|
||||
width: 2.75rem;
|
||||
border: 1px solid var(--dxds-color-border-neutral-default-rest);
|
||||
}
|
||||
|
||||
::deep .tile-title {
|
||||
align-self: center;
|
||||
color: var(--dxds-color-content-neutral-default-rest);
|
||||
font-size: var(--dxds-font-size-base-md);
|
||||
font-weight: var(--dxds-font-weight-base-strong);
|
||||
letter-spacing: var(--dxds-letter-spacing-base-md);
|
||||
line-height: var(--dxds-line-height-base-md);
|
||||
}
|
||||
|
||||
::deep .tile-description {
|
||||
color: var(--dxds-color-content-neutral-subdued-rest);
|
||||
font-size: var(--dxds-font-size-base-sm);
|
||||
font-weight: var(--dxds-font-weight-base-default);
|
||||
letter-spacing: var(--dxds-letter-spacing-base-sm);
|
||||
line-height: var(--dxds-line-height-base-sm);
|
||||
}
|
||||
@@ -0,0 +1,22 @@
|
||||
@page "/pdfviewer"
|
||||
|
||||
<PageTitle>PDF Viewer</PageTitle>
|
||||
|
||||
<h1>PDF Viewer</h1>
|
||||
|
||||
<DxPdfViewer CssClass="h-100 w-100" DocumentContent="DocumentContent" ZoomLevel="1" />
|
||||
|
||||
@code {
|
||||
byte[]? DocumentContent { get; set; }
|
||||
|
||||
protected override async Task OnInitializedAsync() {
|
||||
await base.OnInitializedAsync();
|
||||
|
||||
await using Stream stream =
|
||||
System.Reflection.Assembly.GetExecutingAssembly().GetManifestResourceStream("EnvelopeGenerator.ReceiverUI.Web.Client.Documents.Invoice.pdf")
|
||||
?? throw new InvalidOperationException("Resource not found.");
|
||||
using MemoryStream ms = new();
|
||||
await stream.CopyToAsync(ms);
|
||||
DocumentContent = ms.ToArray();
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,32 @@
|
||||
@page "/weather"
|
||||
|
||||
<PageTitle>Weather</PageTitle>
|
||||
|
||||
<h1>Weather</h1>
|
||||
|
||||
<DxGrid Data="@forecasts">
|
||||
<Columns>
|
||||
<DxGridDataColumn Caption="Date" FieldName="Date" />
|
||||
<DxGridDataColumn Caption="Temperature (C)" FieldName="TemperatureC" />
|
||||
<DxGridDataColumn Caption="Temperature (F)" FieldName="TemperatureF" />
|
||||
<DxGridDataColumn Caption="Summary" FieldName="Summary" />
|
||||
</Columns>
|
||||
</DxGrid>
|
||||
|
||||
@code {
|
||||
private WeatherForecast[]? forecasts;
|
||||
|
||||
protected override async Task OnInitializedAsync() {
|
||||
DateOnly startDate = DateOnly.FromDateTime(DateTime.Now);
|
||||
string[] summaries = ["Freezing", "Bracing", "Chilly", "Cool", "Mild", "Warm", "Balmy", "Hot", "Sweltering", "Scorching"];
|
||||
forecasts = Enumerable.Range(1, 5).Select(index => new WeatherForecast(
|
||||
Date: startDate.AddDays(index),
|
||||
TemperatureC: Random.Shared.Next(-20, 55),
|
||||
Summary: summaries[Random.Shared.Next(summaries.Length)]
|
||||
)).ToArray();
|
||||
}
|
||||
|
||||
private record WeatherForecast(DateOnly Date, int TemperatureC, string? Summary) {
|
||||
public int TemperatureF => 32 + (int)(TemperatureC / 0.5556);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user