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

Appearance

  • Demo Configurator
Size
Rounded
Icon

The WebForms SmartPasteButton offers various options that allow you to control its appearance, such as size, border radius and icon.

Use the styling options showcased in this demo to modify the overall appearance of the component. You can review and copy the widget's configuration with all styling options from the source code of the demo.

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • scripts.js
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs"  Inherits="SmartPasteButton_Appearance_DefaultCS" %>

<!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="../SmartPasteStyles.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 flex-center" runat="server">
        <telerik:RadCard runat="server">
            <telerik:CardBodyComponent runat="server">
                <telerik:RadSmartPasteButton ID="RadSmartPasteButton1" runat="server" />
            </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" AllowCustomText="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" />
                                </Items>
                            </qsf:ComboBox>
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn3" runat="server" Title="Rounded" Size="Medium">
                    <ul class="fb-group">
                        <li>
                            <qsf:ComboBox ID="cbRounded" runat="server" AutoPostBack="false" AllowCustomText="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" />
                                </Items>
                            </qsf:ComboBox>
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn4" runat="server" Title="Icon" Size="Medium">
                    <ul class="fb-group">
                        <li>
                            <qsf:ComboBox ID="cbIcon" runat="server" AutoPostBack="false" AllowCustomText="false" Size="Medium" OnClientSelectedIndexChanged="changeIcon">
                                <Items>
                                    <telerik:RadComboBoxItem Text="Clipboard " Value="clipboard" Selected="true" />
                                    <telerik:RadComboBoxItem Text="Clipboard Code" Value="clipboard-code" />
                                    <telerik:RadComboBoxItem Text="Clipboard HTML" Value="clipboard-html" />
                                    <telerik:RadComboBoxItem Text="Clipboard Text" Value="clipboard-text" />
                                </Items>
                            </qsf:ComboBox>
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
            </qsf:View>
        </Views>
    </qsf:ConfiguratorPanel>

    </form>
</body>
</html>

Support & Learning Resources

Find Assistance