From 69ce93dd5ab95f6130c2e67169b293f038c6520f Mon Sep 17 00:00:00 2001 From: Peace Date: Thu, 4 Jul 2024 15:14:35 +0900 Subject: [PATCH] card --- .../ComponentPractice/Components/App.razor | 8 +- .../Components/Layout/NavMenu.razor | 1 + .../Components/Pages/LayoutCard.razor | 84 +++++++++++++++++++ .../Components/Pages/LayoutColumn.razor | 14 +--- .../ComponentPractice/wwwroot/custom.css | 3 + 5 files changed, 96 insertions(+), 14 deletions(-) create mode 100644 ComponentPractice/ComponentPractice/Components/Pages/LayoutCard.razor create mode 100644 ComponentPractice/ComponentPractice/wwwroot/custom.css diff --git a/ComponentPractice/ComponentPractice/Components/App.razor b/ComponentPractice/ComponentPractice/Components/App.razor index 6a1289d..aa839fd 100644 --- a/ComponentPractice/ComponentPractice/Components/App.razor +++ b/ComponentPractice/ComponentPractice/Components/App.razor @@ -7,17 +7,19 @@ + - + + - - @* *@ + @* *@ + diff --git a/ComponentPractice/ComponentPractice/Components/Layout/NavMenu.razor b/ComponentPractice/ComponentPractice/Components/Layout/NavMenu.razor index 5a6f82a..c8bcb04 100644 --- a/ComponentPractice/ComponentPractice/Components/Layout/NavMenu.razor +++ b/ComponentPractice/ComponentPractice/Components/Layout/NavMenu.razor @@ -36,6 +36,7 @@ + diff --git a/ComponentPractice/ComponentPractice/Components/Pages/LayoutCard.razor b/ComponentPractice/ComponentPractice/Components/Pages/LayoutCard.razor new file mode 100644 index 0000000..cfe07c2 --- /dev/null +++ b/ComponentPractice/ComponentPractice/Components/Pages/LayoutCard.razor @@ -0,0 +1,84 @@ +@page "/layoutcard" + +@inject InMemoryData data + +@rendermode RenderMode.InteractiveServer + + + Card +
+ + RadzenCard component can display a piece of content, like an image and text. + + + + + + + Employee + @($"{employee.FirstName} {employee.LastName}") + Job Title + @($"{employee.Title} {employee.Job}") + + + + Personal Information + + + Hire Date + @employee.HireDate.ToString("yyyy-MM-dd") + Phone + @employee.Phone + + + Region + @employee.Region + Address + @employee.Address + + + + + + + + + + + + Card Variant +
+ + Use Variant property to change the card varient. + + + + + + + + + + + + Employee + @($"{employee.FirstName} {employee.LastName}") + Job Title + @($"{employee.Title} {employee.Job}") + + + + + +@code { + Employee employee; + + Variant variant = Variant.Filled; + + protected override async Task OnInitializedAsync() + { + List employees = await data.GetEmployeeDataAsync(100); + int id = Random.Shared.Next(1, 100); + employee = employees.Where(e => e.ID == id).FirstOrDefault(); + } +} diff --git a/ComponentPractice/ComponentPractice/Components/Pages/LayoutColumn.razor b/ComponentPractice/ComponentPractice/Components/Pages/LayoutColumn.razor index eaa4861..1975409 100644 --- a/ComponentPractice/ComponentPractice/Components/Pages/LayoutColumn.razor +++ b/ComponentPractice/ComponentPractice/Components/Pages/LayoutColumn.razor @@ -1,13 +1,5 @@ @page "/layoutcolumn" - - Auto-layout columns
@@ -79,7 +71,7 @@ Column wrapping
- If the totoal sum of all column sizes is greater than 12, columns might be wrapped. Use RowGap property to specify the vertical spacing. + If the totoal sum of all column sizes is greater than 12, columns might be wrapped. Use RowGap property to specify the vertical spacing. @@ -92,7 +84,7 @@ Column Offset
- The Offset property moves the column to the right. + The Offset property moves the column to the right. @@ -168,7 +160,7 @@ Gutters
- Spacing between columns can be controlled by setting the Gap property of the parent RadzenRow component. + Spacing between columns can be controlled by setting the Gap property of the parent RadzenRow component. 1 diff --git a/ComponentPractice/ComponentPractice/wwwroot/custom.css b/ComponentPractice/ComponentPractice/wwwroot/custom.css new file mode 100644 index 0000000..ac77391 --- /dev/null +++ b/ComponentPractice/ComponentPractice/wwwroot/custom.css @@ -0,0 +1,3 @@ +.radzen-badge { + text-transform: none !important; +} \ No newline at end of file