The Gallery is deprecated. No new Gallery components may be submitted, and modifying existing components is disabled. For more information please read the Gallery Deprecation blog post. This is a static snapshot of the Gallery for archive purposes.
See 42 more by this user. Created: 02/16/12
Last CDN Push: 03/23/12
Build Tag: gallery-2012.03.23-18-00
Project: YUI 3
License: YUI BSD
YUI Version: 3.5.1
Free for use.
When a widget is rendered, the class attributes applied to nodes are based on the widget's NAME property. Class names might look like this: yui3-name, yui3-name-content, yui3-name-hidden, etc. When extending a widget, if a subclass has a different NAME, any css rules applied to the original widget's classes do not get inherited.
The subclass could be given the same NAME (or CSS_PREFIX) as the superclass, then the class attributes rendered by subclass and superclass would be the same and the superclass css would get applied to the subclass. This works out well but the two widgets can't be styled independently. It would be nice if the css would actually be allowed cascade from the superclass and be overwritten by the subclass.
The bounding box node rendered by the subclass does receive a class from the subclass and a class from the superclass. Unfortunately the same is not true for any other nodes rendered by the widget. Y.WidgetInheritCss is a class extension that fixes this situation. Every time the subclass renders a class with its name it will also render a class with the superclass name. This allows the css to cascade from the superclass and more specific rules can be written to target only the subclass. This also works with special cases like -disabled and -hidden. It's a bit of a hack but it should work.
This extension is a potential solution for these tickets:
http://yuilibrary.com/projects/yui3/ticket/2529359
http://yuilibrary.com/projects/yui3/ticket/2531632
http://yuilibrary.com/projects/yui3/ticket/2531623
Just include Y.WidgetInheritCss as a class extension when you extend a widget.
<script src="http://yui.yahooapis.com/3.5.1/build/yui/yui-min.js"></script>
YUI({
//Last Gallery Build of this module
gallery: 'gallery-2012.03.23-18-00'
}).use('gallery-widget-inherit-css', 'panel', function(Y) {
var SubPanel = Y.Base.create('sub-panel', Y.Panel, [
Y.WidgetInheritCss
], { ... })
new SubPanel({
bodyContent: '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>',
headerContent: 'Sub Panel'
});
// In css
// .yui3-skin-sam .yui3-panel-content.yui3-sub-panel-content
// will select content box nodes rendered by SubPanel
});
All code on this site is licensed under the BSD License unless stated otherwise.