starred/radzen-blazor
1
0
Fork 0
mirror of https://github.com/radzenhq/radzen-blazor.git synced 2026-07-08 18:16:08 +00:00
Code Issues 1.3k Packages Projects Releases 28 Wiki Activity

Add list of components

Browse Source
This commit is contained in:
yordanov
2021-09-09 14:06:20 +03:00
committed by Atanas Korchev
parent 88a1a56e9b
commit ac74479c3c
3 changed files with 256 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

184
RadzenBlazorDemos/Pages/Index.razor
View File

@@ -62,14 +62,183 @@
</div>
</div>
</div>
<div id="components" class="row no-gutters">
<div class="col-md-12">
<h2 class="subtitle text-center">Most Popular Components</h2>
<div class="row popular-components pb-3">
<a href="/datagrid">
<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" class="component-icon">
<path fill-rule="evenodd" clip-rule="evenodd" d="M16 0H0V16H16V0ZM15 1H11V5H15V1ZM15 6H11V10H15V6ZM15 11H11V15H15V11ZM10 11V15H6V11H10ZM10 6V10H6V6H10ZM10 1V5H6V1H10ZM5 1H1V5H5V1ZM5 6H1V10H5V6ZM5 11H1V15H5V11Z" fill="currentColor"/>
</svg>
DataGrid
</a>
<a href="/scheduler">
<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" class="component-icon">
<path fill-rule="evenodd" clip-rule="evenodd" d="M3 0H4V2H12V0H13V2H16V16H0V2H3V0ZM12 3V4H13V3H15V15H1V3H3V4H4V3H12ZM3 13V6H7V13H3ZM4 12V7H6V12H4ZM9 6H13V10H9V6ZM10 9V7H12V9H10Z" fill="currentColor"/>
</svg>
Scheduler
</a>
<a href="/dropdown">
<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" class="component-icon">
<path fill-rule="evenodd" clip-rule="evenodd" d="M0 0H13V1H0V0ZM14 0H16V1H14V0ZM0 3H16V16H0V3ZM1 4H15V15H1V4ZM14 5H13V10H14V5ZM11 6H3V7H11V6ZM11 9H3V10H11V9ZM3 12H11V13H3V12Z" fill="currentColor"/>
</svg>
DropDown
</a>
<a href="/dialog">
<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" class="component-icon">
<path fill-rule="evenodd" clip-rule="evenodd" d="M0 0V16H16V0H0ZM15 1H1V15H15V1ZM8 3H3V4H8V3ZM13 7V6H3V7H13ZM13 12H10V13H13V12ZM3 8H13V9H3V8ZM12 3H13V4H12V3ZM9 12H6V13H9V12Z" fill="currentColor"/>
</svg>
Dialog
</a>
<a href="/datepicker">
<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" class="component-icon">
<path fill-rule="evenodd" clip-rule="evenodd" d="M0 13V3H16V13H0ZM1 4H15V12H1V4ZM6.89778 10H8.05248L10.3619 6H9.20718L6.89778 10ZM6 9H3V10H6V9ZM10 9H13V10H10V9Z" fill="currentColor"/>
</svg>
DatePicker
</a>
</div>
<h2 class="subtitle text-center mb-4">All Components</h2>
<div class="row all-components">
<div class="col-sm-12 col-md-4">
<div class="row">
<div class="col-sm-6 col-md-12 col-lg-6">
<h4>Data</h4>
<ul>
<li><a href="/datagrid">DataGrid</a></li>
<li><a href="/datalist">DataList</a></li>
<li><a href="/pager">Pager</a></li>
<li><a href="/tree">Tree</a></li>
<li><a href="/scheduler">Scheduler</a></li>
</ul>
<h4>Images</h4>
<ul>
<li><a href="/gravatar">Gravatar</a></li>
<li><a href="/icon">Icon</a></li>
<li><a href="/image">Image</a></li>
</ul>
</div>
<div class="col-sm-6 col-md-12 col-lg-6">
<h4>Layout & Navigation</h4>
<ul>
<li><a href="#">Accordion</a></li>
<li><a href="#">Card</a></li>
<li><a href="#">ContextMenu</a></li>
<li><a href="#">Dialog</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Login</a></li>
<li><a href="#">Menu</a></li>
<li><a href="#">Panel</a></li>
<li><a href="#">PanelMenu</a></li>
<li><a href="#">ProfileMenu</a></li>
<li><a href="#">Splitter</a></li>
<li><a href="#">Steps</a></li>
<li><a href="#">Tabs</a></li>
</ul>
</div>
</div>
</div>
<div class="col-sm-12 col-md-4">
<h4>Forms</h4>
<div class="row">
<div class="col-sm-6 col-md-12 col-lg-6">
<ul>
<li><a href="#">AutoComplete</a></li>
<li><a href="#">Button</a></li>
<li><a href="#">CheckBox</a></li>
<li><a href="#">CheckBoxList</a></li>
<li><a href="#">ColorPicker</a></li>
<li><a href="#">DatePicker</a></li>
<li><a href="#">DropDown</a></li>
<li><a href="#">DropDownDataGrid</a></li>
<li><a href="#">Fieldset</a></li>
<li><a href="#">FileInput</a></li>
<li><a href="#">HTMLEditor</a></li>
<li><a href="#">ListBox</a></li>
<li><a href="#">Mask</a></li>
</ul>
</div>
<div class="col-sm-6 col-md-12 col-lg-6">
<ul>
<li><a href="#">Numeric</a></li>
<li><a href="#">Password</a></li>
<li><a href="#">RadioButtonList</a></li>
<li><a href="#">Rating</a></li>
<li><a href="#">SelectBar</a></li>
<li><a href="#">Slider</a></li>
<li><a href="#">SplitButton</a></li>
<li><a href="#">Switch</a></li>
<li><a href="#">TemplateForm</a></li>
<li><a href="#">TextArea</a></li>
<li><a href="#">TextBox</a></li>
<li><a href="#">Upload</a></li>
</ul>
</div>
</div>
</div>
<div class="col-sm-12 col-md-4">
<div class="row">
<div class="col-sm-6 col-md-12 col-lg-6">
<h4>Data Visualization</h4>
<ul>
<li><a href="#">Area Chart</a></li>
<li><a href="#">Bar Chart</a></li>
<li><a href="#">Column Chart</a></li>
<li><a href="#">Donut Chart</a></li>
<li><a href="#">Line Chart</a></li>
<li><a href="#">Pie Chart</a></li>
<li><a href="#">Chart</a></li>
<li><a href="#">Arc Gauge</a></li>
<li><a href="#">Radial Gauge</a></li>
<li><a href="#">Styling Gauge</a></li>
<li><a href="#">GoogleMap</a></li>
</ul>
</div>
<div class="col-sm-6 col-md-12 col-lg-6">
<h4>Feedback</h4>
<ul>
<li><a href="#">Badge</a></li>
<li><a href="#">Notification</a></li>
<li><a href="#">ProgressBar</a></li>
<li><a href="#">Tooltip</a></li>
</ul>
<h4>Validators</h4>
<ul>
<li><a href="#">CompareValidator</a></li>
<li><a href="#">EmailValidator</a></li>
<li><a href="#">LengthValidator</a></li>
<li><a href="#">NumericRangeValidator</a></li>
<li><a href="#">RegexValidator</a></li>
<li><a href="#">RequiredValidator</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container-fluid stage dark">
<div class="container">
<div class="row text-center">
<div class="col-md-12">
<h1 class="mx-auto">Boost your Blazor development</h1>
<h2 class="mx-auto subtitle text-center">Radzen provides tons of productivity gains for Blazor developers</h2>
<h1>Boost your Blazor development</h1>
<h2 class="subtitle">Radzen provides tons of productivity gains for Blazor developers</h2>
</div>
</div>
@@ -91,7 +260,7 @@
<ul>
<li>Authentication, authorization, user and role management are built-in. <a href="https://www.radzen.com/documentation/azure-ad/" target="_blank">Azure AD</a>, <a href="https://www.radzen.com/documentation/active-directory/" taret="_blank">Active Directory</a>,
<a href="https://www.radzen.com/documentation/windows-security/" target="_blank">Windows Authentication</a> or <a href="https://www.radzen.com/documentation/security/" target="_blank">ASP.NET Identity</a>.</li>
<li><a href="https://www.radzen.com/documentation/run-with-visual-studio/" target="_blank">Run your Radzen Blazor application directly from Visual Studio Code or Visual Studio Professional</a>.</li>
<li>Run your Radzen Blazor application directly from <a href="https://www.radzen.com/documentation/run-with-visual-studio/" target="_blank">Visual Studio Code or Visual Studio Professional</a>.</li>
<li>Deploy your Blazor applications to <a href="https://www.radzen.com/documentation/blazor/deploy/" target="_blank">IIS</a> and <a href="https://www.radzen.com/documentation/deploy-to-azure/" target="_blank">Azure</a> with a single click.</li>
<li>Dedicated support with 24 hour response time (or even less).</li>
<li>Get help from the active <a href="https://forum.radzen.com/" target="_blank">community</a>.</li>
@@ -101,23 +270,26 @@
<div class="row text-center mt-5">
<div class="col-md-12">
<h3 id="components" class="text-center mb-5">Your secret web application builder.</h3>
<NavLink class="cta-button primary" href="https://www.radzen.com/download/">Download Radzen Now</NavLink>
<h3>Get started today. Radzen is free to use.</h3>
<p class="description">You can also test the premium features for 15 days.</p>
<NavLink class="cta-button primary" href="https://www.radzen.com/download/">Download Radzen</NavLink>
</div>
</div>
<div class="row text-center copyright">
<div class="col-md-12">
<p><RadzenLabel Text="Radzen Blazor Components, Copyright &copy; 2021"></RadzenLabel></p>
<p>
<RadzenLabel Text="Radzen Blazor Components, &copy; 2021 Radzen."></RadzenLabel>
<a href="https://github.com/radzenhq/radzen-blazor" target="_blank">Source Code</a> licensed
<a href="https://github.com/radzenhq/radzen-blazor/blob/master/LICENSE" target="_blank">MIT</a>
</p>
<Social />
<p class="mt-5">
<a href="https://www.radzen.com" title="Radzen - Create .NET Core web applications fast & easy" target="_blank"><img src="images/easier-than-you-think.svg" /></a>
</p>
</div>
</div>
</div>
</div>
</div>

89
RadzenBlazorDemos/wwwroot/css/site.css
View File

@@ -159,9 +159,18 @@ text-decoration: none;
}
.next a:hover {
text-decoration: none;
color: #FF7371;
}
.dark a {
color: #FF9C9A;
}
.dark a:hover {
color: #FF504D;
}
body {
background-color: #F4F5F9;
background-image: url("../images/background.svg");
@@ -170,16 +179,17 @@ body {
background-attachment: fixed;
}
.stage {
padding-top: 6rem;
padding-bottom: 6rem;
}
.dark {
background-color: #050A23;
background-image: url("../images/background.svg");
background-repeat: no-repeat;
background-position: 50% 0;
}
.stage {
padding-top: 6rem;
padding-bottom: 6rem;
padding-bottom: 3rem;
}
.next h1,
@@ -198,7 +208,8 @@ body {
.next .dark h3,
.next .dark h4,
.next .dark h5,
.next .dark h6 {
.next .dark h6,
.next .dark p {
color: #ffffff;
}
.next h1 {
@@ -207,13 +218,20 @@ body {
letter-spacing: -0.02em;
}
.subtitle {
.next .subtitle {
font-weight: 100;
font-size: 24px;
line-height: 100%;
margin: 3rem 0 3.75rem;
}
.next .description {
font-weight: 300;
font-size: 16px;
line-height: 100%;
margin-bottom: 4rem;
}
.next h3 {
font-weight: 700;
font-size: 2rem;
@@ -256,7 +274,7 @@ body {
border: 1px solid #050A23;
box-sizing: border-box;
color: #050A23 !important;
transition: background-color .2s, border-color .2s, color .2s;
transition: all 0.3s ease-in-out;
}
.cta-button.primary {
@@ -305,6 +323,7 @@ body {
video {
box-shadow: 0px 12px 20px rgba(0, 0, 0, 0.5);
background: rgba(0,0,0,.3) url("../images/play.svg") no-repeat 50% 50%;
}
.radzen-features ul {
@@ -317,7 +336,7 @@ video {
cursor: default;
padding-top: 0.6rem;
padding-bottom: 0.6rem;
transition: opacity .2s;
transition: all 0.3s ease-in-out;
}
.radzen-features li:hover {
@@ -333,15 +352,55 @@ video {
color: #ACAFB9;
}
.copyright a {
color: #515256;
}
.copyright a img {
opacity: .5;
transition: opacity .2s;
opacity: .2;
transition: all 0.4s ease-in-out;
}
.copyright a:hover img {
opacity: 1;
}
/* Most Popular Components */
.popular-components {
justify-content: space-evenly;
}
.popular-components a {
font-size: 1.125rem;
font-weight: 600;
color: #050A23;
transition: all 0.2s;
}
.popular-components a:hover {
color: #FF504D;
}
.popular-components .component-icon {
width: 32px;
height: 32px;
display: block;
margin: 0 auto 1rem;
}
/* All Components */
.all-components ul {
list-style-type: none;
padding: 0;
margin: 0;
}
.all-components h4 {
font-size: 1rem;
line-height: 150%;
margin: 1rem 0 0.25rem;
}
.all-components a {
font-weight: 300;
line-height: 200%;
color: #050A23;
transition: all 0.2s;
}

4
RadzenBlazorDemos/wwwroot/images/play.svg Normal file
View File

@@ -0,0 +1,4 @@
<svg width="120" height="120" viewBox="0 0 120 120" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="60" cy="60" r="60" fill="black" fill-opacity="0.3"/>
<path d="M80 60.4752L48 78.9504L48 42L80 60.4752Z" fill="white"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 238 B