BulmaRazor

BlockList

以块状样式显示ul和li

BlockList内部是ul,BlockListItem内部是li

可以设置位置，大小，颜色等等样式

位置

视图
代码

IsLeft(默认)

Item One
Item Two
Item Three

IsCentered

Item One
Item Two
Item Three

IsRight

Item One
Item Two
Item Three

<Columns>
    <Column>
        <p>IsLeft(默认)</p>
        <BlockList>
            <BlockListItem>Item One</BlockListItem>
            <BlockListItem>Item Two</BlockListItem>
            <BlockListItem>Item Three</BlockListItem>
        </BlockList>
    </Column>
    <Column>
        <p>IsCentered</p>
        <BlockList IsCentered>
            <BlockListItem>Item One</BlockListItem>
            <BlockListItem>Item Two</BlockListItem>
            <BlockListItem>Item Three</BlockListItem>
        </BlockList>
    </Column>
     <Column>
            <p>IsRight</p>
            <BlockList IsRight>
                <BlockListItem>Item One</BlockListItem>
                <BlockListItem>Item Two</BlockListItem>
                <BlockListItem>Item Three</BlockListItem>
            </BlockList>
        </Column>
</Columns>

大小

视图
代码

IsSmall

Item One
Item Two
Item Three

IsNormal(默认)

Item One
Item Two
Item Three

IsLarge

Item One
Item Two
Item Three

<Columns>
    <Column>
        <p>IsSmall</p>
        <BlockList IsSmall>
            <BlockListItem>Item One</BlockListItem>
            <BlockListItem>Item Two</BlockListItem>
            <BlockListItem>Item Three</BlockListItem>
        </BlockList>
    </Column>
    <Column>
        <p>IsNormal(默认)</p>
        <BlockList IsNormal>
            <BlockListItem>Item One</BlockListItem>
            <BlockListItem>Item Two</BlockListItem>
            <BlockListItem>Item Three</BlockListItem>
        </BlockList>
    </Column>
     <Column>
            <p>IsLarge</p>
            <BlockList IsLarge>
                <BlockListItem>Item One</BlockListItem>
                <BlockListItem>Item Two</BlockListItem>
                <BlockListItem>Item Three</BlockListItem>
            </BlockList>
        </Column>
</Columns>

Primary

Item One
Item Two
Item Three

Info

Item One
Item Two
Item Three

Dark

Item One
Item Two
Item Three

<Columns>
    <Column>
        <p>Primary</p>
        <BlockList Color="Color.Primary">
            <BlockListItem>Item One</BlockListItem>
            <BlockListItem>Item Two</BlockListItem>
            <BlockListItem>Item Three</BlockListItem>
        </BlockList>
    </Column>
    <Column>
        <p>Info</p>
        <BlockList Color="Color.Info">
            <BlockListItem>Item One</BlockListItem>
            <BlockListItem>Item Two</BlockListItem>
            <BlockListItem>Item Three</BlockListItem>
        </BlockList>
    </Column>
     <Column>
            <p>Dark</p>
            <BlockList Color="Color.Dark">
                <BlockListItem>Item One</BlockListItem>
                <BlockListItem>Item Two</BlockListItem>
                <BlockListItem>Item Three</BlockListItem>
            </BlockList>
        </Column>
</Columns>

其他样式

视图
代码

IsOutlined

Item One
Item Two
Item Three

HasRadius

Item One
Item Two
Item Three

IsHighlighted

Item One
Item Two
Item Three

<Columns>
    <Column>
        <p>IsOutlined</p>
        <BlockList Color="Color.Primary" IsOutlined>
            <BlockListItem>Item One</BlockListItem>
            <BlockListItem>Item Two</BlockListItem>
            <BlockListItem>Item Three</BlockListItem>
        </BlockList>
    </Column>
    <Column>
        <p>HasRadius</p>
        <BlockList Color="Color.Info" HasRadius>
            <BlockListItem>Item One</BlockListItem>
            <BlockListItem>Item Two</BlockListItem>
            <BlockListItem>Item Three</BlockListItem>
        </BlockList>
    </Column>
     <Column>
            <p>IsHighlighted</p>
            <BlockList Color="Color.Dark" IsHighlighted>
                <BlockListItem>Item One</BlockListItem>
                <BlockListItem>Item Two</BlockListItem>
                <BlockListItem>Item Three</BlockListItem>
            </BlockList>
        </Column>
</Columns>

所有样式都可以在BlockListItem中应用，已覆盖BlockList中的样式

视图
代码

Item One
Item Two
Item Three

<BlockList IsCentered IsSmall Color="Color.Primary">
    <BlockListItem HasRadius Color="Color.Warning">Item One</BlockListItem>
    <BlockListItem IsHighlighted IsLarge>Item Two</BlockListItem>
    <BlockListItem IsOutlined IsSmall IsRight Color="Color.Danger">Item Three</BlockListItem>
</BlockList>

文档