CardBody
in namespace DotVVM.Framework.Controls.Bootstrap4
Usage & Scenarios
Renders a text content inside the Card control.
Sample 1: Basic CardBody
Use the TitleText
, SubtitleText
and Text
properties to provide two levels of title and a text content for the card.
<bs:Card>
<bs:CardBody
TitleText="Main title"
SubtitleText="Secondary title"
Text="Body of the card" />
</bs:Card>
Sample 2: Templated CardBody
If you need to provide a custom content in the card body, place the content inside the control.
Bootstrap recommends the following CSS classes to be used in the card body templates:
h1
, ...,h6
elements should havecard-title
orcard-subtitle
CSS classes.p
and other text elements should bavecard-text
CSS class.a
elements should havecard-link
CSS class.
You can set AddAppropriateCardClassesToContent
property to true
which makes the control to add the CSS classes automatically based on the rules mentioned above.
<bs:Card FooterText="Card Footer">
<bs:CardImage ImageUrl="~/Content/Images/img11.jpg" ToolTip="Card Image">
<bs:CardBody>
<h1>Overlayed body</h1>
<p>
Another text
</p>
</bs:CardBody>
</bs:CardImage>
<bs:CardListGroup DataSource="{value: Texts}" TextBinding="{value: _this}" />
<bs:CardBody>
<p>Some buttons</p>
<bs:RouteLink RouteName="Card_Advanced" Text="RouteLink" Type="Info" />
<bs:Button Click="{command: DoSomething()}" Text="Button" Type="Danger" />
</bs:CardBody>
</bs:Card>
public class ViewModel : DotvvmViewModelBase
{
public string[] Texts { get; } = new[] { "red", "green", "blue" };
public void DoSomething()
{
}
}
Properties
Name | Type | Description | Notes | Default Value | |
---|---|---|---|---|---|
AddAppropriateCardClassesToContent | Boolean | Gets or sets whether appropriate classes (card-text, card-link, ...) should be added to inner elements. Can be used only when Content template is used. |
attribute
static value
bindable
|
False | |
Attributes | Dictionary<String,Object> |
attribute
static value
|
null | ||
ClientIDMode | ClientIDMode | Gets or sets the client ID generation algorithm. |
attribute
static value
|
Static | |
ContentTemplate | ITemplate | Gets or sets the contents of the main section of the panel. |
inner element
static value
default
|
null | |
DataContext | Object | Gets or sets a data context for the control and its children. All value and command bindings are evaluated in context of this value. |
attribute
bindable
|
null | |
ID | String | Gets or sets the unique control ID. |
attribute
static value
bindable
|
null | |
IncludeInPage | Boolean | Gets or sets whether the control is included in the DOM of the page. |
attribute
bindable
|
True | |
InnerText | String | Gets or sets the inner text of the HTML element. |
attribute
static value
bindable
|
null | |
SubtitleText | String | Gets or sets subtitle of the card. |
attribute
static value
bindable
|
null | |
Text | String | Gets or sets inner text of the card. |
attribute
static value
bindable
|
null | |
TitleText | String | Gets or sets title of the card. |
attribute
static value
bindable
|
null | |
Visible | Boolean | Gets or sets whether the control is visible. |
attribute
bindable
|
True |