¿Cómo se puede aplicar CSS a los componentes de Google Closure Library?

Me estoy mojando los pies con Google's Closure Library. Creé una página simple con un Select Widget, pero claramente necesita un poco de estilo (el elemento parece texto plano, y en el siguiente ejemplo, los elementos del menú aparecen debajo del botón).¿Cómo se puede aplicar CSS a los componentes de Google Closure Library?

Supongo que la biblioteca admite estilos: ¿cómo puedo engancharlos? Cada página de ejemplo en SVN parece usar su propio CSS.

ejemplo abreviado sigue:

<body> 

<div id="inputContainer"></div> 

<script src="closure-library-read-only/closure/goog/base.js"></script> 
<script> 
    goog.require('goog.dom'); 
    goog.require('goog.ui.Button'); 
    goog.require('goog.ui.MenuItem'); 
    goog.require('goog.ui.Select'); 
</script> 
<script> 
    var inputDiv = goog.dom.$("inputContainer"); 

    var testSelect = new goog.ui.Select("Test selector"); 
    testSelect.addItem(new goog.ui.MenuItem("1")); 
    testSelect.addItem(new goog.ui.MenuItem("2")); 
    testSelect.addItem(new goog.ui.MenuItem("3")); 
    var submitButton = new goog.ui.Button("Go"); 

testSelect.render(inputDiv); 
submitButton.render(inputDiv); 
</script> 

</body>

Fuente

2009-12-26 Jason

sólo tiene que utilizar como conjuros (por su caso):

<link rel="stylesheet" href="closure-library/closure/goog/demos/css/menubutton.css">

no parece que haya una mejor manera, aunque no he encontrado cualquier explicación detrás de tener los estilos en demos/dir ...

Fuente

2010-01-04 20:03:18 Nickolay

Esta es la única solución que he encontrado, también. –

Closure agrega una serie de clases CSS a los nodos HTML y la biblioteca proporciona varios CSS para darles un estilo a los componentes.

Le sugiero que vaya a través de la fuente de las demostraciones y descubra los IDs y las clases de CSS. O descubra las id/clases usando Firebug (para Firefox) o Herramientas de desarrollo de IE (para Internet Explorer 7/8) y luego ajústelas usando su propio CSS.

Fuente

2010-03-19 00:28:30 user297006

En la práctica, la búsqueda del CSS correcto debería comenzar con la página de demostración del widget que desea utilizar. Al examinar el HTML de la página, debería ser fácil identificar las hojas de estilo de las que depende la demostración al encontrar las etiquetas. En el caso de goog.ui.HoverCard, los elementos adecuados de hovercard.html son:

<link rel="stylesheet" href="css/demo.css"> 
<link rel="stylesheet" href="../css/hovercard.css">

Ignorar css/demo.css, que define las reglas CSS para asegurar que el aspecto de las páginas de demostración es consistente, por lo la mayor parte del código en css/demo.css es específico de las demos, no del widget, por lo que no debe incluirse en la aplicación. No se olvide de mirar css/common.css, que contiene una implementación de visualización de bloque en línea xbrowser, que utilizan muchos widgets.

Fuente

2011-02-08 08:18:27

¿Cómo se puede aplicar CSS a los componentes de Google Closure Library?

Respuesta

Cuestiones relacionadas