<Columns>
    <Column>
        <Box style="position: relative">
            <p>消息内容</p>
            <p>消息内容</p>
            <p>消息内容</p>
            <p>消息内容</p>
            <Loading IsActive="@active"></Loading>
        </Box>
    </Column>
    <Column>
        <Box style="position: relative">
            <p>消息内容</p>
            <p>消息内容</p>
            <p>消息内容</p>
            <p>消息内容</p>
            <Loading IsActive="@active" IconClass="fa-refresh">加载中...</Loading>
        </Box>
    </Column>
    <Column>
        <Box style="position: relative">
            <p>消息内容</p>
            <p>消息内容</p>
            <p>消息内容</p>
            <p>消息内容</p>
            <Loading IsActive="@active" Text="Loading..." IconClass="fa-circle-o-notch"></Loading>
        </Box>
    </Column>

</Columns>
<Button @onclick="() => active=!active">切换</Button>

@code {
    private bool active = true;
}

<Columns IsMultiline>
    <Column Size="Size.Size4">
        <Box style="position: relative">
            <p>消息内容</p>
            <p>消息内容</p>
            <p>消息内容</p>
            <p>消息内容</p>
            <Loading Color="Color.Primary" IsActive="@active"></Loading>
        </Box>
    </Column>
    <Column Size="Size.Size4">
        <Box style="position: relative">
            <p>消息内容</p>
            <p>消息内容</p>
            <p>消息内容</p>
            <p>消息内容</p>
            <Loading Color="Color.Info" IsActive="@active"></Loading>
        </Box>
    </Column>
    <Column Size="Size.Size4">
        <Box style="position: relative">
            <p>消息内容</p>
            <p>消息内容</p>
            <p>消息内容</p>
            <p>消息内容</p>
            <Loading Color="Color.Link" IsActive="@active"></Loading>
        </Box>
    </Column>

    <Column Size="Size.Size4">
        <Box style="position: relative">
            <p>消息内容</p>
            <p>消息内容</p>
            <p>消息内容</p>
            <p>消息内容</p>
            <Loading Color="Color.Success" IsActive="@active"></Loading>
        </Box>
    </Column>
    <Column Size="Size.Size4">
        <Box style="position: relative">
            <p>消息内容</p>
            <p>消息内容</p>
            <p>消息内容</p>
            <p>消息内容</p>
            <Loading Color="Color.Warning" IsActive="@active"></Loading>
        </Box>
    </Column>
    <Column Size="Size.Size4">
        <Box style="position: relative">
            <p>消息内容</p>
            <p>消息内容</p>
            <p>消息内容</p>
            <p>消息内容</p>
            <Loading Color="Color.Danger" IsActive="@active"></Loading>
        </Box>
    </Column>

</Columns>
<Button @onclick="() => active = !active">切换</Button>

@code {
    private bool active = true;
}

<Columns>
    <Column>
        <Box style="position: relative">
            <p>消息内容</p>
            <p>消息内容</p>
            <p>消息内容</p>
            <p>消息内容</p>
            <Loading IsActive="@active" IsPulse>脉冲旋转...</Loading>
        </Box>
    </Column>
    <Column>
        <Box style="position: relative">
            <p>消息内容</p>
            <p>消息内容</p>
            <p>消息内容</p>
            <p>消息内容</p>
            <Loading IsActive="@active" Background="rgba(0, 0, 0, 0.5)" IconClass="fa-refresh">背景色...</Loading>
        </Box>
    </Column>
    <Column>
        <Box style="position: relative">
            <p>消息内容</p>
            <p>消息内容</p>
            <p>消息内容</p>
            <p>消息内容</p>
            <Loading IsActive="@active" Text="更大的图标" IconClass="fa-circle-o-notch fa-lg"></Loading>
        </Box>
    </Column>

</Columns>
<Button @onclick="() => active=!active">切换</Button>

@code {
    private bool active = true;
}

@using BulmaRazorServer.Pages.docs.components.datatable
<LoadingContainer IsActive="@loading">
    <Field HasAddons>
        <Control>
            <Input @bind-Value="kw" placeholder="请输入名称关键字"/>
        </Control>
        <Control>
            <Button Color="Color.Info" @onclick="search">
                <Icon IconClass="fa fa-search"></Icon><span>搜索</span>
            </Button>
        </Control>
    </Field>
    <DataTable Data="data" TItem="Person" IsHoverable
               IsBordered IsStriped IsFullwidth>
        <ColumnsSlot>
            <DataTableColumn Label="Id" Prop="Id"/>
            <DataTableColumn Label="名称" Prop="Name"/>
            <DataTableColumn Label="年龄" Prop="Age"/>
            <DataTableColumn Label="性别" Prop="Gender"/>
            <DataTableColumn Label="生日" Format="yyyy-MM-dd HH:mm" Prop="Birthday"/>
        </ColumnsSlot>
        <EmptySlot>
            <Content>--没有数据--</Content>
        </EmptySlot>
    </DataTable>
    <Pagination TotalCount="totalCount" PageIndex="pageIndex" PageSize="pageSize" OnPageChange="onPage"
                NextText="下一页" PrevText="上一页" IsCentered/>
</LoadingContainer>

@code{
    bool loading = false;
    int pageIndex = 1;
    int pageSize = 5;
    int totalCount = 0;
    string kw;
    IEnumerable<Person> data;
    //分页
    async Task onPage(int page)
    {
        
        pageIndex = page;
        await searchData();
        
    }

    async Task search()
    {
        pageIndex = 1;
        await searchData();
    }

    //查询后台数据
    async Task searchData()
    {
        loading = true;
        await Task.Delay(1000);
        data = Person.GetPageData(kw, pageIndex, pageSize, out int total);
        totalCount = total;
        loading = false;
    }

    protected override async Task OnInitializedAsync()
    {
        await base.OnInitializedAsync();
        await searchData();
    }

}