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 Variants

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

New Button Variants

items: [
    { text: "Primary",   variant: "primary" },
    { text: "Secondary", variant: "secondary" },
    { text: "Success",   variant: "success" },
    { text: "Danger",    variant: "danger" },
    { text: "Warning",   variant: "warning" },
    { text: "Info",      variant: "info" },
    { text: "Light",     variant: "light" },
    { text: "Dark",      variant: "dark" }
]
Items = new [] {
    new Button { Text = "Primary", Variant = Variant.Primary },
    new Button { Text = "Secondary", Variant = Variant.Secondary },
    new Button { Text = "Success", Variant = Variant.Success },
    new Button { Text = "Danger", Variant = Variant.Danger },
    new Button { Text = "Warning", Variant = Variant.Warning },
    new Button { Text = "Info", Variant = Variant.Info },
    new Button { Text = "Light", Variant = Variant.Light },
    new Button { Text = "Dark", Variant = Variant.Dark }
}
<items>
    <ext-button text="Primary" variant="Primary" />
    <ext-button text="Secondary" variant="Secondary" />
    <ext-button text="Success" variant="Success" />
    <ext-button text="Danger" variant="Danger" />
    <ext-button text="Warning" variant="Warning" />
    <ext-button text="Info" variant="Info" />
    <ext-button text="Light" variant="Light" />
    <ext-button text="Dark" variant="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 Avatar Component

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>

Component Gallary

Avatar

Image avatars

Text avatars

Scale

Custom size

Border radius

Avatar with menu

Avatar group

Button

Scale

Toggle

Menu

Split

Segmented

Form

GridPanel

Layout

Border

MessageBox

Default and variants

Panel

TabPanel

Plain

Toast

Tool

Toolbar

TreePanel

Window

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