为了在Blazor中方便使用,BulmaRazor中提供了一个名称叫B
的类,包括了Bulma中hepers类
比如:@B.TextPrimary为has-text-primary,@B.MX2为mx-2
详细helpers请参考bulma官网 Go
为了在Blazor中方便使用,BulmaRazor中提供了一个名称叫B
的类,包括了Bulma中hepers类
比如:@B.TextPrimary为has-text-primary,@B.MX2为mx-2
详细helpers请参考bulma官网 Go
很多组件可以使用Color属性控制主体色
<Buttons>
<Button>Default</Button>
<Button Color="Color.Black">Black</Button>
<Button Color="Color.Light">Light</Button>
<Button Color="Color.Dark">Dark</Button>
<Button Color="Color.Primary">Primary</Button>
<Button Color="Color.Link">Link</Button>
<Button Color="Color.Info">Info</Button>
<Button Color="Color.Success">Success</Button>
<Button Color="Color.Warning">Warning</Button>
<Button Color="Color.Danger">Danger</Button>
</Buttons>
<Tags>
<Tag>Default</Tag>
<Tag Color="Color.Black">Black</Tag>
<Tag Color="Color.Light">Light</Tag>
<Tag Color="Color.Dark">Dark</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>
</Tags>
很多组件可以使用Is{Size},特殊尺寸使用Size属性控制尺寸,根据组件的不同,可以使用的值也不同,大概分为以下几个系列:
<Buttons>
<Button Color="Color.Primary" IsSmall>Small</Button>
<Button Color="Color.Primary">Normal</Button>
<Button Color="Color.Primary" IsMedium>Medium</Button>
<Button Color="Color.Primary" IsLarge>Large</Button>
</Buttons>
<Tags>
<Tag Color="Color.Info" IsSmall>Small</Tag>
<Tag Color="Color.Info">Normal</Tag>
<Tag Color="Color.Info" IsMedium>Medium</Tag>
<Tag Color="Color.Info" IsLarge>Large</Tag>
</Tags>
<Columns IsVcentered>
<Column>
<Image Src="/images/image-placeholder.jpg" Size="Size.Square32"></Image>
</Column>
<Column>
<Image Src="/images/image-placeholder.jpg" Size="Size.Square48"></Image>
</Column>
<Column>
<Image Src="/images/image-placeholder.jpg" Size="Size.Square64"></Image>
</Column>
<Column>
<Image Src="/images/image-placeholder.jpg" Size="Size.Square96"></Image>
</Column>
<Column>
<Image Src="/images/image-placeholder.jpg" Size="Size.Square128"></Image>
</Column>
</Columns>
文档