Edit on Github

Ratio

in namespace DotVVM.Bootstrap5.Controls

Renders a Bootstrap ratio helper control.

Usage & Scenarios

Renders the Bootstrap ratio control.

https://getbootstrap.com/docs/5.2/helpers/ratio

Sample 1: Basic or custom Ratio

Wrap the element with the Ratio control, which maintains your chosen aspect ratio. Some most common ratio classes are provided with the RatioTypes enum and could be set with the RatioType property.

With the CustomRatio property, a custom percentage ratio can be set.

<bs:Ratio RatioType="Ratio1x1">
    <iframe src="https://youtu.be/dQw4w9WgXcQ" />
</bs:Ratio>

<%-- Custom 50% ratio --%>
<bs:Ratio CustomRatio="50">
    <iframe src="https://youtu.be/dQw4w9WgXcQ" />
</bs:Ratio>

Properties

Name Type Description Notes Default Value
property icon Content List<DotvvmControl> Gets or sets the inner content for the Ratio control.
attribute
inner element
static value
bindable
default
 null
property icon CustomRatio Double Gets or sets a custom percentage ratio. This property cannot be combined with RatioType.
attribute
inner element
static value
bindable
default
 null
property icon RatioType RatioTypes Gets or sets the predefined ratio type. Possible values are `Ratio1x1`, `Ratio4x3`, `Ratio16x9` and `Ratio21x9`.
attribute
inner element
static value
bindable
default
 null
property icon Text String Gets or sets the text inside the control.
attribute
inner element
static value
bindable
default
 null
property icon Visible Boolean Gets or sets whether the control is visible. When set to false, `style="display: none"` will be added to this control.
attribute
inner element
static value
bindable
default
 True

HTML produced by the control