Selecting Smart.Tab by index

A Smat.Tab when using it alongside with its 'DataSource' property can be easily selected by using the 'SelectedIndex' property.

The following code example showcases how set this property:

<style> 
smart-tabs { 
    width: 60%; 
} 
@@media only screen and (max-width: 600px) {
        smart-tabs { 
            width: 100%; 
        } 
    } 
</style> 
<Tabs @ref="tabs" SelectedIndex="3" class="demoTabs" DataSource="@dataSource"></Tabs>
    
@code { 
    Tabs tabs; 
    List<Dictionary<string, object>> dataSource = new List<Dictionary<string, object>>() {
        new Dictionary<string, object>() { 
            { "label", "Item A" }, 
            { "content", "Content A" }, 
            { "index", 3 } }, 
        new Dictionary<string, object>() {
            { "label", "Item B" },
            { "content", "Content B" }, 
            { "index", 2 } }, 
        new Dictionary<string, object>() { 
            { "label", "Item C" }, 
            { "content", "Content C" }, 
            { "index", 1 } }, 
        new Dictionary<string, object>() {
            { "label", "Item D" }, 
            { "labelSize", 80 }, 
            { "content", "Content D" }, 
            { "index", 0 } 
        } 
    }; 

}
    

Setting it to a coresponding index from the 'DataSource' when the Tab is rendered it will select the Smart.Tab with index #3.