Thread ID: |
Created: |
Updated: |
Platform: |
Replies: |
149600 | Dec 2,2019 08:46 PM UTC | Dec 7,2019 08:24 AM UTC | Blazor | 9 |
![]() |
Tags: Tabs |
@using Syncfusion.EJ2.Blazor.Navigations
<EjsTab @ref="TabRef">
<TabItems>
<TabItem>
<ChildContent>
<TabHeader Text="Log In"></TabHeader>
</ChildContent>
<ContentTemplate>
<CascadingValue Value="this">
<LogIn></LogIn>
</CascadingValue>
</ContentTemplate>
</TabItem>
<TabItem Disabled="true">
<ChildContent>
<TabHeader Text="Logged In"></TabHeader>
</ChildContent>
<ContentTemplate>
<CascadingValue Value="this">
<LoginSuccess></LoginSuccess>
</CascadingValue>
</ContentTemplate>
</TabItem>
<TabItem Disabled="true">
<ChildContent>
<TabHeader Text="Log out"></TabHeader>
</ChildContent>
<ContentTemplate>
Logged out
</ContentTemplate>
</TabItem>
</TabItems>
</EjsTab>
@code {
EjsTab TabRef;
public void OnTabSelect(int item)
{
this.TabRef.Select(item);
}
public void OnTabEnable(int item, bool enable)
{
this.TabRef.EnableTab(item, enable);
}
} |
@page "/login"
@using Syncfusion.EJ2.Blazor
@using Syncfusion.EJ2.Blazor.Buttons
@using Syncfusion.EJ2.Blazor.Popups
<div class="login-form">
<div class='wrap'>
<div id="heading">Sign in</div>
<div id="input-container">
<div class="e-float-input e-input-group">
<input id="textvalue" type="text" @bind-value="@Textvalue" required />
<span class="e-float-line"></span>
<label class="e-float-text">Username</label>
</div>
<div class="e-float-input e-input-group">
<input id="textvalue2" type="password" @bind-value="@Textvalue2" required />
<span class="e-float-line"></span>
<label class="e-float-text">Password</label>
</div>
</div>
<div class="button-contain">
<EjsButton @onclick="@OnClicked">Log in</EjsButton>
</div>
@if (EmptyField)
{
<span class="error">* Please enter valid credentails</span>
}
</div>
</div>
@code {
public bool EmptyField { get; set; } = false;
[CascadingParameter] Index Tab { get; set; }
private string Textvalue { get; set; } = "";
private string Textvalue2 { get; set; } = "";
private void OnClicked()
{
if ((this.Textvalue == "") || (this.Textvalue2 == "") || (this.Textvalue == null) || (this.Textvalue2 == null))
{
this.EmptyField = true;
this.StateHasChanged();
}
else
{
this.EmptyField = false;
Tab.OnTabEnable(1, true);
Tab.OnTabEnable(0, false);
Tab.OnTabSelect(1);
}
}
} |
@page "/LoginSuccess"
@using Syncfusion.EJ2.Blazor.Popups
<EjsDialog ID="dialog" @ref="DialogObj" IsModal="true" Width="280px">
<DialogTemplates>
<Header> Success</Header>
<Content> Congratulations! Login Success</Content>
</DialogTemplates>
<DialogButtons>
<DialogButton ButtonModel="@DialogBtn" OnClick="@OnClick" />
</DialogButtons>
</EjsDialog>
@code {
EjsDialog DialogObj;
[CascadingParameter] Index Tab { get; set; }
private void OnClick(Object args)
{
this.DialogObj.Hide();
Tab.OnTabEnable(2, true);
Tab.OnTabEnable(1, false);
Tab.OnTabSelect(2);
}
public Syncfusion.EJ2.Blazor.Buttons.ButtonModel DialogBtn = new Syncfusion.EJ2.Blazor.Buttons.ButtonModel { Content = "Dismiss", IsPrimary = true };
} |
@using Syncfusion.EJ2.Blazor.Navigations
<EjsTab>
<TabItems>
<TabItem>
<ChildContent>
<TabHeader Text="@HeaderText"></TabHeader>
</ChildContent>
<ContentTemplate>
@TabItemContent
</ContentTemplate>
</TabItem>
</TabItems>
</EjsTab>
@code
{
[Parameter]
public string HeaderText { get; set; }
[Parameter]
public string TabItemContent { get; set; }
} |
<MyTab HeaderText="@Header1" TabItemContent="@Content1"></MyTab>
@code{
public string Header1 = "Tab1 Header";
public string Content1 = "Tab1 Content";
} |
<MyTab HeaderText="@Header" TabItemContent="@Content"></MyTab>
@code{
public string Header = "Tab2 Header";
public string Content = "Tab2 Content";
} |
@using Syncfusion.EJ2.Blazor.Navigations
<EjsTab>
<TabItems>
<CustomTabItem HeaderText="@Header1" TabItemContent="@Content1"></CustomTabItem>
<CustomTabItem HeaderText="@Header2" TabItemContent="@Content2"></CustomTabItem>
<CustomTabItem HeaderText="@Header3" TabItemContent="@Content3"></CustomTabItem>
@TabItemContent
</TabItems>
</EjsTab>
@code
{
public RenderFragment TabItemContent = builder =>
{
builder.AddContent(1,@<CustomTabItem HeaderText="Header4" TabItemContent="Content4"></CustomTabItem>);
};
public string Header1 = "Header1";
public string Content1 = "Content1";
public string Header2 = "Header2";
public string Content2 = "Content2";
public string Header3 = "Header3";
public string Content3 = "Content3";
} |
@using Syncfusion.EJ2.Blazor.Navigations
<TabItem>
<ChildContent>
<TabHeader Text="@HeaderText"></TabHeader>
</ChildContent>
<ContentTemplate>
@TabItemContent
</ContentTemplate>
</TabItem>
@code{
[Parameter]
public string HeaderText { get; set; }
[Parameter]
public string TabItemContent { get; set; }
} |
This post will be permanently deleted. Are you sure you want to continue?
Sorry, An error occured while processing your request. Please try again later.
This page will automatically be redirected to the sign-in page in 10 seconds.