BulmaRazor

Tag标签

小标签可插入到任何地方

标签是一个很小但用途广泛的元素。这是将信息附加到块或其他组件的一种非常有用的方法。它的大小也使得它很容易以数字显示，使其适合一长串项目。

默认情况下，标签是1.5rem高的标签。 Tag label

Colors颜色

与按钮一样，有10种不同的颜色可用。

视图
代码

Black Dark Light White Primary Link Info Success Warning Danger

<Tag Color="Color.Black">Black</Tag>
<Tag Color="Color.Dark">Dark</Tag>
<Tag Color="Color.Light">Light</Tag>
<Tag Color="Color.White">White</Tag>
<Tag Color="Color.Primary">Primary</Tag>
<Tag Color="Color.Link">Link</Tag>
<Tag Color="Color.Info">Info</Tag>
<Tag Color="Color.Success">Success</Tag>
<Tag Color="Color.Warning">Warning</Tag>
<Tag Color="Color.Danger">Danger</Tag>

现在，您可以选择颜色的浅色版本。

视图
代码

Primary Link Info Success Warning Danger

<Tag IsLight Color="Color.Primary">Primary</Tag>
<Tag IsLight Color="Color.Link">Link</Tag>
<Tag IsLight Color="Color.Info">Info</Tag>
<Tag IsLight Color="Color.Success">Success</Tag>
<Tag IsLight Color="Color.Warning">Warning</Tag>
<Tag IsLight Color="Color.Danger">Danger</Tag>

Size尺寸

视图
代码

Normal Medium Large

All Medium Size

Large small Large

<Tag Color="Color.Link" IsNormal>Normal</Tag>
<Tag Color="Color.Primary" IsMedium>Medium</Tag>
<Tag Color="Color.Info" IsLarge>Large</Tag>
<br>
<Tags AreMedium>
    <Tag>All</Tag>
    <Tag>Medium</Tag>
    <Tag>Size</Tag>
</Tags>
<br>
<Tags AreLarge>
    <Tag>Large</Tag>
    <Tag IsSmall>small</Tag>
    <Tag>Large</Tag>
</Tags>

Rounded

word

<Tag IsRounded>Rounded</Tag>
<br><br>

<Tag IsDelete></Tag>
<br><br>
<Tag IsLarge Color="Color.Danger">
    word
    <Delete/>
</Tag>

Tags标签列表，插件

您现在可以使用Tags容器创建标签列表。如果列表很长，它将自动换行，同时保持所有标签均匀间隔。

使用HasAddons可以使两个Tag吸附到一起

视图
代码

One Two Three Four Five Six Seven Eight Nine Ten Eleven Twelve Thirteen Fourteen Fifteen Sixteen Seventeen Eighteen Nineteen Twenty

<Tags>
    <Tag>One</Tag>
    <Tag>Two</Tag>
    <Tag>Three</Tag>
    <Tag>Four</Tag>
    <Tag>Five</Tag>
    <Tag>Six</Tag>
    <Tag>Seven</Tag>
    <Tag>Eight</Tag>
    <Tag>Nine</Tag>
    <Tag>Ten</Tag>
    <Tag>Eleven</Tag>
    <Tag>Twelve</Tag>
    <Tag>Thirteen</Tag>
    <Tag>Fourteen</Tag>
    <Tag>Fifteen</Tag>
    <Tag>Sixteen</Tag>
    <Tag>Seventeen</Tag>
    <Tag>Eighteen</Tag>
    <Tag>Nineteen</Tag>
    <Tag>Twenty</Tag>
</Tags>

视图
代码

Package Bulma

Bulma Razor

<Tags HasAddons>
    <Tag>Package</Tag>
    <Tag Color="Color.Primary">Bulma</Tag>
</Tags>

<Tags HasAddons>
    <Tag Color="Color.Danger">Bulma Razor</Tag>
    <Tag IsDelete></Tag>
</Tags>

如果要将Tags附加在一起，只需用Field组件的IsGrouped和IsGroupedMultiline。

视图
代码

npm 0.9.1

build passing

chat on gitter



<Field IsGrouped IsGroupedMultiline>
    <Control>
        <Tags HasAddons>
            <Tag Color="Color.Dark">npm</Tag>
            <Tag Color="Color.Info">0.9.1</Tag>
        </Tags>
    </Control>
    <Control>
        <Tags HasAddons>
            <Tag Color="Color.Dark">build</Tag>
            <Tag Color="Color.Success">passing</Tag>
        </Tags>
    </Control>
    <Control>
            <Tags HasAddons>
                <Tag Color="Color.Dark">chat</Tag>
                <Tag Color="Color.Primary">on gitter</Tag>
            </Tags>
        </Control>
</Field>

文档