New Modern Styling

items: [{                                         // New default Panel styling
    title: "Icon",
    iconCls: "x-md md-icon-check-circle-outline"  // 1317 new Material Design icons
}, {
    title: "Tools",
    tools: [{
        type: "help"                              // New Tools hover style
    }, {
        iconCls: "x-md md-icon-search"
    }]
}, {
    title: "Loading...",
    fill: true,                                   // New Fill style
    listeners: {
        render: {
            delay: 50,
            fn: function () {
                this.body.mask('Loading...');     // New Loading Mask style
            }
        }
    }
}, {
    title: "Fill & Frame",
    fill: true,
    frame: true                                   // New Frame style
}]
Items = new [] {
    new Panel {
        Title = "Icon",
        IconCls = "x-md md-icon-check-circle-outline"
    },
    new Panel {
        Title = "Tools",
        Tools = new ItemCollection {
            new Tool { Type = "help" },
            new Tool { IconCls = "x-md md-icon-search" }
        }
    },
    new Panel {
        Title = "Loading...",
        Fill = true,
        Listeners = new PanelListenerCollection {
            Render = new RenderListener {
                Delay = 50,
                Handler = "this.body.mask('Loading...')"
            }
        }
    },
    new Panel {
        Title = "Fill & Frame",
        Fill = true,
        Frame = true
    }
}
<items>
    <ext-panel title="Icon" iconCls="x-md md-icon-check-circle-outline" />
    <ext-panel title="Tools">
        <tools>
            <ext-tool type="help" />
            <ext-tool iconCls="x-md md-icon-search" />
        </tools>
    </ext-panel>
    <ext-panel title="Loading..." fill="true">
        <listeners>
            <render delay="50" handler="this.body.mask('Loading...')" />
        </listeners>
    </ext-panel>
    <ext-panel title="Fill & Frame" fill="true" frame="true" />
</items>

New Panel Configs

items: [
    { title: "Rounded" },                                    // Rounded corners by default
    { title: "Not Rounded", rounded: false },                // Remove rounded corners
    { title: "Border Radius", borderRadius: "12 36 12 36" }, // Custom radius for corners
    { title: "Fill", fill: true }                            // Fill body color
]
Items = new [] {
    new Panel { Title = "Rounded" },
    new Panel { Title = "Not Rounded", Rounded = false },
    new Panel { Title = "Border Radius", BorderRadius = "12 36 12 36" },
    new Panel { Title = "Fill", Fill = true }
}
<items>
    <ext-panel title="Rounded" />
    <ext-panel title="Not Rounded" rounded="false" />
    <ext-panel title="Border Radius" borderRadiusAsString="12 36 12 36" />
    <ext-panel title="Fill" fill="true" />
</items>

New Panel UI

items: [
    { title: "Primary",   ui: "primary" },
    { title: "Secondary", ui: "secondary" },
    { title: "Success",   ui: "success" },
    { title: "Danger",    ui: "danger" },
    { title: "Warning",   ui: "warning" },
    { title: "Info",      ui: "info" },
    { title: "Light",     ui: "light" },
    { title: "Dark",      ui: "dark" }
]
Items = new [] {
    new Panel { Title = "Primary", UI = UI.Primary },
    new Panel { Title = "Secondary", UI = UI.Secondary },
    new Panel { Title = "Success", UI = UI.Success },
    new Panel { Title = "Danger", UI = UI.Danger }
    new Panel { Title = "Warning", UI = UI.Warning },
    new Panel { Title = "Info", UI = UI.Info },
    new Panel { Title = "Light", UI = UI.Light },
    new Panel { Title = "Dark", UI = UI.Dark }
}
<items>
    <ext-panel title="Primary" ui="Primary" />
    <ext-panel title="Secondary" ui="Secondary" />
    <ext-panel title="Success" ui="Success" />
    <ext-panel title="Danger" ui="Danger" />
    <ext-panel title="Warning" ui="Warning" />
    <ext-panel title="Info" ui="Info" />
    <ext-panel title="Light" ui="Light" />
    <ext-panel title="Dark" ui="Dark" />
</items>

New Button UI

items: [
    { text: "Primary",   ui: "primary" },
    { text: "Secondary", ui: "secondary" },
    { text: "Success",   ui: "success" },
    { text: "Danger",    ui: "danger" },
    { text: "Warning",   ui: "warning" },
    { text: "Info",      ui: "info" },
    { text: "Light",     ui: "light" },
    { text: "Dark",      ui: "dark" }
]
Items = new [] {
    new Button { Text = "Primary", UI = UI.Primary },
    new Button { Text = "Secondary", UI = UI.Secondary },
    new Button { Text = "Success", UI = UI.Success },
    new Button { Text = "Danger", UI = UI.Danger },
    new Button { Text = "Warning", UI = UI.Warning },
    new Button { Text = "Info", UI = UI.Info },
    new Button { Text = "Light", UI = UI.Light },
    new Button { Text = "Dark", UI = UI.Dark }
}
<items>
    <ext-button text="Primary" ui="Primary" />
    <ext-button text="Secondary" ui="Secondary" />
    <ext-button text="Success" ui="Success" />
    <ext-button text="Danger" ui="Danger" />
    <ext-button text="Warning" ui="Warning" />
    <ext-button text="Info" ui="Info" />
    <ext-button text="Light" ui="Light" />
    <ext-button text="Dark" ui="Dark" />
</items>

New BorderRadius

items: [
    { text: "End",    borderRadius: "50% 0 0 50%" },
    { text: "Left",   borderRadius: "6 0 0 6" },
    { text: "Square", borderRadius: 0 },
    { text: "Pill",   borderRadius: "50%" },
    { text: "Offset", borderRadius: "4 12",        iconAlign: "right" },
    { text: "Square", borderRadius: false,         iconAlign: "right" },
    { text: "Right",  borderRadius: "0 6 6 0",     iconAlign: "right" },
    { text: "End",    borderRadius: "0 50% 50% 0", iconAlign: "right" },
]
Items = new [] {
    new Button { Text = "End"     BorderRadius = "50% 0 0 50%" },
    new Button { Text = "Left",   BorderRadius = "6 0 0 6" },
    new Button { Text = "Square", BorderRadius = 0 },
    new Button { Text = "Pill",   BorderRadius = "50%" },
    new Button { Text = "Offset", BorderRadius = "4 12", IconAlign = "Right" },
    new Button { Text = "Square", BorderRadius = false, IconAlign = "Right" },
    new Button { Text = "Right",  BorderRadius = "0 6 6 0", IconAlign = "Right" },
    new Button { Text = "End",    BorderRadius = "0 50% 50% 0", IconAlign = "Right" },
}
<items>
    <ext-button text="End"    borderRadiusAsString="50% 0 0 50%" />
    <ext-button text="Left"   borderRadiusAsString="6 0 0 6" />
    <ext-button text="Square" borderRadius="0" />
    <ext-button text="Pill"   borderRadiusAsString="50%" />
    <ext-button text="Offset" borderRadiusAsString="4 12", iconAlign="Right" />
    <ext-button text="Square" borderRadius="false", iconAlign="Right" />
    <ext-button text="Right"  borderRadiusAsString="0 6 6 0", iconAlign="Right" />
    <ext-button text="End"    borderRadiusAsString="0 50% 50% 0", iconAlign="Right" />
</items>

New Switch Component

items: [
    { xtype: "switch", boxLabel: "Small (default)", checked: true, }, 
    { xtype: "switch", boxLabel: "Medium", scale: "medium", checked: true, }, 
    { xtype: "switch", boxLabel: "Large", scale: "large",}
]
Items = new [] {
    new Switch { BoxLabel = "Small (default)" Checked = true },
    new Switch { BoxLabel = "Medium", Checked = true, Scale = "Medium" },
    new Switch { BoxLabel = "Large", Scale = "Large" },
}
<items>
    <ext-switch boxLabel="Small (default)" checked="true" />
    <ext-switch boxLabel="Medium" checked="true" scale="Medium" />
    <ext-switch boxLabel="Large" scale="Large" />
</items>

New Avatar Component

Component Gallery

Panel

Tool

TabPanel

Plain

Button

Scale

Toggle

Menu

Split

Segmented

Avatar

Image avatars

Text avatars

Scale

Avatar with menu

Form

Toolbar

Window

Fill

MessageBox

Default and UI options

Toast

GridPanel

TreePanel

Layout

Border

The Spotless theme is commercial software and subject to the Ext.NET Pro Theme Software License Agreement.