New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

Appearance

  • Demo Configurator
Size
Theme Color
FillMode
Rounded

The Telerik WebForms Chip offers various options which allow you to control its appearance, such as size, border radius, itheme color, and fill mode, as demonstrated in this demo.

You can also easily switch between the built-in Skins at the top right corner of the page.

  • DefaultCS.aspx
  • scripts.js
  • styles.css
<%@ Page Language="c#" AutoEventWireup="true"  %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>

<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
   <script src="scripts.js"></script>
    <link href="styles.css" rel="stylesheet" />
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <div class="demo-container no-bg chip-demo" runat="server">

        <telerik:RadCard ID="RadCard1" runat="server">
            <telerik:CardBodyComponent runat="server">
                <div class="flex">
                    <telerik:RadChip runat="server" ID="RadChip1" Label="Chip Label" Icon="save"></telerik:RadChip>
                </div>
            </telerik:CardBodyComponent>
        </telerik:RadCard>

    </div>

    <qsf:ConfiguratorPanel ID="ConfiguratorPanel1" runat="server">
        <Views>
            <qsf:View>
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn1" runat="server" Title="Size" Size="Medium">
                    <ul class="fb-group">
                        <li>
                            <qsf:ComboBox ID="cbSize" runat="server" AutoPostBack="false" Size="Medium" OnClientSelectedIndexChanged="changeSize">
                                <Items>
                                    <telerik:RadComboBoxItem Text="Small" Value="Small" />
                                    <telerik:RadComboBoxItem Text="Medium" Value="Medium" Selected="true" />
                                    <telerik:RadComboBoxItem Text="Large" Value="Large"  />
                                    <telerik:RadComboBoxItem Text="None" Value="None" />
                                </Items>
                            </qsf:ComboBox>
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn2" runat="server" Title="Theme Color" Size="Medium">
                    <ul class="fb-group">
                        <li>
                            <qsf:ComboBox ID="cbThemeColor" runat="server" AutoPostBack="false" Size="Medium" OnClientSelectedIndexChanged="changeThemeColor">
                                <Items>
                                    <telerik:RadComboBoxItem Text="Base" Value="Base" Selected="true" />
                                    <telerik:RadComboBoxItem Text="Info" Value="Info" />
                                    <telerik:RadComboBoxItem Text="Success" Value="Success" />
                                    <telerik:RadComboBoxItem Text="Warning" Value="Warning" />
                                    <telerik:RadComboBoxItem Text="Error" Value="Error" />
                                </Items>
                            </qsf:ComboBox>
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn3" runat="server" Title="FillMode" Size="Medium">
                    <ul class="fb-group">
                        <li>
                            <qsf:ComboBox ID="optionFillMode" runat="server" AutoPostBack="false" Size="Medium" OnClientSelectedIndexChanged="changeFillMode">
                                <Items>
                                    <telerik:RadComboBoxItem Text="Solid" Value="Solid" Selected="true" />
                                    <telerik:RadComboBoxItem Text="Outline" Value="Outline" />
                                </Items>
                            </qsf:ComboBox>
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn4" runat="server" Title="Rounded" Size="Medium">
                    <ul class="fb-group">
                        <li>
                            <qsf:ComboBox ID="optionRounded" runat="server" AutoPostBack="false" Size="Medium" OnClientSelectedIndexChanged="changeRounded">
                                <Items>
                                    <telerik:RadComboBoxItem Text="Small" Value="Small" />
                                    <telerik:RadComboBoxItem Text="Medium" Value="Medium" Selected="true" />
                                    <telerik:RadComboBoxItem Text="Large" Value="Large" />
                                    <telerik:RadComboBoxItem Text="Full" Value="Full"  />
                                    <telerik:RadComboBoxItem Text="None" Value="None" />
                                </Items>
                            </qsf:ComboBox>
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
            </qsf:View>
        </Views>
    </qsf:ConfiguratorPanel>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance