Skip to content

Commit

Permalink
Merge pull request #722 from IgniteUI/ikitanov/textarea-samples-blazor
Browse files Browse the repository at this point in the history
Adding textarea samples
  • Loading branch information
kacheshmarova committed Jun 7, 2024
2 parents 9e03f11 + cb78c51 commit 596c169
Show file tree
Hide file tree
Showing 45 changed files with 1,199 additions and 0 deletions.
29 changes: 29 additions & 0 deletions samples/inputs/textarea/form-integration/App.razor
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
@using IgniteUI.Blazor.Controls

<style>
.controls {
margin-top: 1rem;
}
</style>

<div class="container sample center">
<form id="form" @onsubmit="Submit">
<IgbTextarea Rows="5" Name="user_feedback" Label="Your review" Required="true"></IgbTextarea>
<div class="controls">
<IgbButton Type="submit">Submit review</IgbButton>
<IgbButton Type="reset" Variant="ButtonVariant.Outlined">Reset</IgbButton>
</div>
<IgbToast Id="submitted" @ref="ToastRef" Position="BaseAlertLikePosition.Top" DisplayTime="1000">Your review was submitted</IgbToast>
</form>
</div>

@code {

public IgbToast ToastRef { get; set; }

private void Submit()
{
this.ToastRef.Show();
}

}
25 changes: 25 additions & 0 deletions samples/inputs/textarea/form-integration/BlazorClientApp.csproj
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
<Project Sdk="Microsoft.NET.Sdk.BlazorWebAssembly">

<PropertyGroup>
<TargetFramework>net8.0</TargetFramework>
<RazorLangVersion>3.0</RazorLangVersion>
<AssemblyName>Infragistics.Samples</AssemblyName>
<RootNamespace>Infragistics.Samples</RootNamespace>
</PropertyGroup>

<PropertyGroup Condition="'$(Configuration)|$(Platform)'=='Debug|AnyCPU'">
<NoWarn>1701;1702,IDE0028,BL0005,0219,CS1998</NoWarn>
</PropertyGroup>

<ItemGroup>
<PackageReference Include="IgniteUI.Blazor" Version="23.2.218" />
<PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="8.0.0" />
<PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="8.0.0" />
<PackageReference Include="System.Net.Http.Json" Version="8.0.0" />
</ItemGroup>

<ItemGroup>
<Folder Include="Services\" />
</ItemGroup>

</Project>
24 changes: 24 additions & 0 deletions samples/inputs/textarea/form-integration/BlazorClientApp.sln
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
Microsoft Visual Studio Solution File, Format Version 12.00
# Visual Studio Version 16
VisualStudioVersion = 16.0.29613.14
MinimumVisualStudioVersion = 10.0.40219.1
Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "BlazorClientApp", "BlazorClientApp.csproj", "{F69CC3F0-BCD1-4CE6-9F39-CBED14E7FA78}"
EndProject
Global
GlobalSection(SolutionConfigurationPlatforms) = preSolution
Debug|Any CPU = Debug|Any CPU
Release|Any CPU = Release|Any CPU
EndGlobalSection
GlobalSection(ProjectConfigurationPlatforms) = postSolution
{F69CC3F0-BCD1-4CE6-9F39-CBED14E7FA78}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
{F69CC3F0-BCD1-4CE6-9F39-CBED14E7FA78}.Debug|Any CPU.Build.0 = Debug|Any CPU
{F69CC3F0-BCD1-4CE6-9F39-CBED14E7FA78}.Release|Any CPU.ActiveCfg = Release|Any CPU
{F69CC3F0-BCD1-4CE6-9F39-CBED14E7FA78}.Release|Any CPU.Build.0 = Release|Any CPU
EndGlobalSection
GlobalSection(SolutionProperties) = preSolution
HideSolutionNode = FALSE
EndGlobalSection
GlobalSection(ExtensibilityGlobals) = postSolution
SolutionGuid = {FC52AAC8-4488-40AE-9621-75F6BA744B18}
EndGlobalSection
EndGlobal
26 changes: 26 additions & 0 deletions samples/inputs/textarea/form-integration/Program.cs
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
using System;
using System.Net.Http;
using System.Collections.Generic;
using System.Threading.Tasks;
using System.Text;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
using IgniteUI.Blazor.Controls; // for registering Ignite UI modules

namespace Infragistics.Samples
{
public class Program
{
public static async Task Main(string[] args)
{
var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("app");
builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
// registering Ignite UI modules
builder.Services.AddIgniteUIBlazor(typeof(IgbTextareaModule));
await builder.Build().RunAsync();
}
}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
{
"iisSettings": {
"windowsAuthentication": false,
"anonymousAuthentication": true,
"iisExpress": {
"applicationUrl": "http://localhost:4200",
"sslPort": 44385
}
},
"profiles": {
"IIS Express": {
"commandName": "IISExpress",
"launchBrowser": true,
"environmentVariables": {
"ASPNETCORE_ENVIRONMENT": "Development"
}
},
"BlazorClientApp": {
"commandName": "Project",
"launchBrowser": true,
"environmentVariables": {
"ASPNETCORE_ENVIRONMENT": "Development"
},
"applicationUrl": "https://localhost:5001;http://localhost:4200"
}
}
}
70 changes: 70 additions & 0 deletions samples/inputs/textarea/form-integration/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,70 @@
<!-- NOTE: do not change this file because it's auto re-generated from template: -->
<!-- https://github.com/IgniteUI/igniteui-blazor-examples/tree/vnext/templates/sample/ReadMe.md -->

This folder contains implementation of Blazor application with example of Overview feature using [Input](https://www.infragistics.com/products/ignite-ui-blazor/blazor/components/general-getting-started.html) component.


<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<body>
<!-- https://static.infragistics.com/xplatform/images/browsers -->
<a target="_blank" href="https://www.infragistics.com/products/ignite-ui-blazor/blazor/components/general-getting-started.html" rel="noopener noreferrer">
<img height="40px" style="border-radius: 0rem" alt="View Docs" src="https://github.com/IgniteUI/igniteui-blazor-examples/raw/vnext/templates/sample/images/button-docs.png"/>
</a>
<a target="_blank" href="./App.razor" rel="noopener noreferrer">
<img height="40px" style="border-radius: 0rem; max-width: 100%;" alt="View Code" src="https://github.com/IgniteUI/igniteui-blazor-examples/raw/vnext/templates/sample/images/button-code.png"/>
</a>
<a target="_blank" href="https://infragistics.com/blazor-client/samples/inputs/input/overview" rel="noopener noreferrer">
<img height="40px" style="border-radius: 0rem; max-width: 100%;" alt="Run Sample" src="https://github.com/IgniteUI/igniteui-blazor-examples/raw/vnext/templates/sample/images/button-run.png"/>
</a>
<!-- <a target="_blank" href="https://codesandbox.io/s/github/IgniteUI/igniteui-blazor-examples/tree/master/samples/inputs/input/overview?fontsize=14&hidenavigation=1&theme=dark&view=preview&file=/src/App.razor" rel="noopener noreferrer">
<img height="40px" style="border-radius: 0rem; max-width: 100%;" alt="Run Sample" src="https://github.com/IgniteUI/igniteui-blazor-examples/raw/vnext/templates/sample/images/button-sandbox.png"/>
</a> -->
</body>
</html>

## Branches

> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-blazor-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-blazor-examples/tree/vnext) branch only when you want to contribute new samples to this repository.
## Setup

- instal **.NET SDK** from this [website](https://dotnet.microsoft.com/learn/aspnet/blazor-tutorial/install)

## Running App in Visual Studio 2019

NOTE: VS 2019 has better code highlighting and error detection than VS Code does.

- open **Visual Studio 2019** as an administrator

- open the **BlazorClientApp.sln** solution

- right click solution and select **Restore NuGet Packages** menu item

- click **Debug** menu and select **Start Debugging** or press **F5** key


## Running App in VS Code

- open **VS Code** as an administrator

- open this folder in **VS Code**

- open a terminal window

- to restore assemblies, run this command:
```dotnet restore```

- to run samples, run this command:
```dotnet watch run```

- wait for for message:
**Now listening on: http://localhost:4200**

- open **http://localhost:4200** in your browser


## Resources

- [Razor Component Models](https://www.codemag.com/article/1911052)
- [Razor Syntax](https://docs.microsoft.com/en-us/aspnet/core/blazor/components/?view=aspnetcore-3.1#razor-syntax)
- [Getting reference to components](https://docs.microsoft.com/en-us/aspnet/core/blazor/components/?view=aspnetcore-3.1#capture-references-to-components)
8 changes: 8 additions & 0 deletions samples/inputs/textarea/form-integration/_Imports.razor
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
@using System.Net.Http
@using System.Net.Http.Json
@using Microsoft.AspNetCore.Components.Forms
@using Microsoft.AspNetCore.Components.Routing
@using Microsoft.AspNetCore.Components.Web
@using Microsoft.AspNetCore.Components.WebAssembly.Http
@using Microsoft.JSInterop
@using Infragistics.Samples
4 changes: 4 additions & 0 deletions samples/inputs/textarea/form-integration/wwwroot/index.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
/*
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/
31 changes: 31 additions & 0 deletions samples/inputs/textarea/form-integration/wwwroot/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="description" content="Explore samples of IgniteUI for Blazor components.">
<meta name="keywords" content="Sample, Example, Blazor, IgniteUI for Blazor, Components, Infragistics">
<meta name="author" content="Infragistics">
<title>Samples | IgniteUI for Blazor | Infragistics</title>
<base href="/" />
<link href="https://static.infragistics.com/xplatform/images/browsers/blazor.ico" rel="icon" type="image/x-icon">
<link href="https://static.infragistics.com/xplatform/css/samples/shared.v6.css" rel="stylesheet" />
<link href="https://static.infragistics.com/xplatform/css/samples/blazor.css" rel="stylesheet" />
<link href="_content/IgniteUI.Blazor/themes/light/bootstrap.css" rel="stylesheet" />
</head>

<body>
<app class="app"><img class="app-loading" src="https://static.infragistics.com/xplatform/images/browsers/loading.gif" /></app>
<div class="app-error-ui">
An unhandled error has occurred.
<a href="" class="reload">Reload</a>
<a class="app-error-dismiss">🗙</a>
</div>
<!-- importing blazor bundle for IG controls: -->
<script src="_content/IgniteUI.Blazor/app.bundle.js"></script>
<script src="_framework/blazor.webassembly.js"></script>

</body>

</html>
10 changes: 10 additions & 0 deletions samples/inputs/textarea/overview/App.razor
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
@using IgniteUI.Blazor.Controls


<div class="container sample center">
<IgbTextarea Rows="5" Label="Tell us your story:">It was a dark and stormy night...</IgbTextarea>
</div>

@code {

}
25 changes: 25 additions & 0 deletions samples/inputs/textarea/overview/BlazorClientApp.csproj
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
<Project Sdk="Microsoft.NET.Sdk.BlazorWebAssembly">

<PropertyGroup>
<TargetFramework>net8.0</TargetFramework>
<RazorLangVersion>3.0</RazorLangVersion>
<AssemblyName>Infragistics.Samples</AssemblyName>
<RootNamespace>Infragistics.Samples</RootNamespace>
</PropertyGroup>

<PropertyGroup Condition="'$(Configuration)|$(Platform)'=='Debug|AnyCPU'">
<NoWarn>1701;1702,IDE0028,BL0005,0219,CS1998</NoWarn>
</PropertyGroup>

<ItemGroup>
<PackageReference Include="IgniteUI.Blazor" Version="23.2.218" />
<PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="8.0.0" />
<PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="8.0.0" />
<PackageReference Include="System.Net.Http.Json" Version="8.0.0" />
</ItemGroup>

<ItemGroup>
<Folder Include="Services\" />
</ItemGroup>

</Project>
24 changes: 24 additions & 0 deletions samples/inputs/textarea/overview/BlazorClientApp.sln
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
Microsoft Visual Studio Solution File, Format Version 12.00
# Visual Studio Version 16
VisualStudioVersion = 16.0.29613.14
MinimumVisualStudioVersion = 10.0.40219.1
Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "BlazorClientApp", "BlazorClientApp.csproj", "{F69CC3F0-BCD1-4CE6-9F39-CBED14E7FA78}"
EndProject
Global
GlobalSection(SolutionConfigurationPlatforms) = preSolution
Debug|Any CPU = Debug|Any CPU
Release|Any CPU = Release|Any CPU
EndGlobalSection
GlobalSection(ProjectConfigurationPlatforms) = postSolution
{F69CC3F0-BCD1-4CE6-9F39-CBED14E7FA78}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
{F69CC3F0-BCD1-4CE6-9F39-CBED14E7FA78}.Debug|Any CPU.Build.0 = Debug|Any CPU
{F69CC3F0-BCD1-4CE6-9F39-CBED14E7FA78}.Release|Any CPU.ActiveCfg = Release|Any CPU
{F69CC3F0-BCD1-4CE6-9F39-CBED14E7FA78}.Release|Any CPU.Build.0 = Release|Any CPU
EndGlobalSection
GlobalSection(SolutionProperties) = preSolution
HideSolutionNode = FALSE
EndGlobalSection
GlobalSection(ExtensibilityGlobals) = postSolution
SolutionGuid = {FC52AAC8-4488-40AE-9621-75F6BA744B18}
EndGlobalSection
EndGlobal
26 changes: 26 additions & 0 deletions samples/inputs/textarea/overview/Program.cs
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
using System;
using System.Net.Http;
using System.Collections.Generic;
using System.Threading.Tasks;
using System.Text;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
using IgniteUI.Blazor.Controls; // for registering Ignite UI modules

namespace Infragistics.Samples
{
public class Program
{
public static async Task Main(string[] args)
{
var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("app");
builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
// registering Ignite UI modules
builder.Services.AddIgniteUIBlazor(typeof(IgbTextareaModule));
await builder.Build().RunAsync();
}
}
}
27 changes: 27 additions & 0 deletions samples/inputs/textarea/overview/Properties/launchSettings.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
{
"iisSettings": {
"windowsAuthentication": false,
"anonymousAuthentication": true,
"iisExpress": {
"applicationUrl": "http://localhost:4200",
"sslPort": 44385
}
},
"profiles": {
"IIS Express": {
"commandName": "IISExpress",
"launchBrowser": true,
"environmentVariables": {
"ASPNETCORE_ENVIRONMENT": "Development"
}
},
"BlazorClientApp": {
"commandName": "Project",
"launchBrowser": true,
"environmentVariables": {
"ASPNETCORE_ENVIRONMENT": "Development"
},
"applicationUrl": "https://localhost:5001;http://localhost:4200"
}
}
}
Loading

0 comments on commit 596c169

Please sign in to comment.