fluentcms / FluentCMS

ASP.NET Core Blazor Content Management System (CMS)
https://fluentcms.com
MIT License
200 stars 39 forks source link

Review `Tab` component #1574

Closed pournasserian closed 5 months ago

TheHadiAhmadi commented 5 months ago

To test tabs you can write this code in a plugin file:

@inherits BasePlugin
@rendermode InteractiveServer

<PluginForm Model="@Model" Name="@FORM_NAME" Title="Create New User" OnSubmit="OnSubmit">
    <GridItem Small="GridItemColumn.Twelve">
        <Tabs Active="General">
            <TabList>
                <TabItem Name="General">General</TabItem>
                <TabItem Name="Personal">Personal</TabItem>
                <TabItem Name="Account">Account</TabItem>
            </TabList>
            <TabContent>
                <TabPanel Name="General">
                    <Grid Gutter="GridGutter.Medium">
                        <FormInput @bind-Value="Model!.Username" Cols="6" Label="Username" Placeholder="Enter Username" Required />
                        <FormInput @bind-Value="Model!.Password" Cols="6" Label="Password" Placeholder="Enter Password" Required type="password" />
                        <FormInput @bind-Value="Model!.Email" Cols="6" Label="Email" Placeholder="Enter Email" Required />
                    </Grid>
                </TabPanel>
                <TabPanel Name="Personal">
                    <Grid Gutter="GridGutter.Medium">
                        <FormInput @bind-Value="Model!.PhoneNumber" Cols="6" Label="Phone Number" Placeholder="Enter Phone Number" />
                        <FormInput @bind-Value="Model!.FirstName" Cols="6" Label="First Name" Placeholder="Enter First Name" />
                        <FormInput @bind-Value="Model!.LastName" Cols="6" Label="Last Name" Placeholder="Enter Last Name" />
                    </Grid>
                </TabPanel>
                <TabPanel Name="Account">
                    <Grid Gutter="GridGutter.Medium">
                        <FormCheckbox @bind-Value="Model!.Enabled" Cols="6" Label="Enabled" Text="Enable/disable user account" />
                        <FormCheckboxGroup @bind-Value="Model!.RoleIds" Cols="6" Data="Roles" Label="Roles" TextField="Name" ValueField="Id" />
                    </Grid>
                </TabPanel>
            </TabContent>
        </Tabs>
    </GridItem>
    <FormActions Cancel Submit />
</PluginForm>