Muestra las diferencias entre dos versiones de la página.
Ambos lados, revisión anterior Revisión previa Próxima revisión | Revisión previa | ||
controles:wbadge [20/09/2020 12:00] pedro |
controles:wbadge [26/03/2022 12:14] (actual) pedro [Ejemplo de uso] |
||
---|---|---|---|
Línea 1: | Línea 1: | ||
====== wBadge ====== | ====== wBadge ====== | ||
- | wBadge es un control nativo de [[https://materializecss.com/badges.html|Materialize]] que podríamos definir como complementario de otros controles, ya que se suele utilizar dentro de [[controles:wListView]], [[controles:wSplitButton]], [[controles:wSideNav]], etc.. | + | wBadge es un componente nativo de [[https://materializecss.com/badges.html|Materialize]] que podríamos definir como complementario de otros controles, ya que se suele utilizar dentro de [[controles:wListView]], [[controles:wSplitButton]], [[controles:wSideNav]], etc.. |
+ | |||
+ | Siempre se alinea a la derecha y arriba del contenedor. | ||
Estos controles tendrán una Propiedad [[propiedades:oBadge]] que es un objeto wBadge por lo que podemos indicarle directamente sus propiedades **::oBadge:cText := "SIN SALDO"** | Estos controles tendrán una Propiedad [[propiedades:oBadge]] que es un objeto wBadge por lo que podemos indicarle directamente sus propiedades **::oBadge:cText := "SIN SALDO"** | ||
Línea 12: | Línea 14: | ||
===== Ejemplo de uso ===== | ===== Ejemplo de uso ===== | ||
- | {{url>https://samples.nefele.dev/wBadge 100%,120px}} | + | {{url>https://samples.nefele.dev/wiki/wBadge 100%,120px}} |
<Code:xailer linenums:1> | <Code:xailer linenums:1> | ||
- | WITH OBJECT WBadge():New( ) | + | WITH OBJECT WPanel():New(:WO) |
- | :lNew := .T. | + | :aWidth[ _tablet ] := 10 |
- | :lPulse := .T. | + | :aOffset[ _tablet ] := 1 |
- | :cText := "SIN STOCK" | + | WBadge():New(:WO):Set("Normal"):Create() |
- | cHtml := :Create() | + | WBadge():New(:WO):Set("New",,,.T.):Create() |
- | END WITH | + | WITH OBJECT WBadge():New(:WO) |
- | :AAddHtml(cHtml) | + | :cText := "Pulse" |
+ | :lPulse := .T. | ||
+ | :cClrPane := "blue" | ||
+ | :lShadow := .T. | ||
+ | :Create() | ||
+ | END WITH | ||
+ | WITH OBJECT WBadge():New(:WO) | ||
+ | :cText := "Chip" | ||
+ | :lChips := .T. | ||
+ | :cClrPane := "green" | ||
+ | :cClrText := "white" | ||
+ | :cClrIcon := "black" | ||
+ | :cIcon := "business_center" | ||
+ | :lPulse := .T. | ||
+ | :Create() | ||
+ | END WITH | ||
+ | :Create() | ||
+ | END WITH | ||
</Code> | </Code> | ||
Línea 30: | Línea 49: | ||
^Nombre ^Init ^Descripción ^Versión ^ | ^Nombre ^Init ^Descripción ^Versión ^ | ||
- | |cText| | Texto a presentar | 0.2.1| | + | |[[propiedades:cClassId]]| bdg | Identificador del control para generar el Id | 0.3| |
- | |cClrPane| | Color del fondo | 0.2.1| | + | |[[propiedades:cId]] | Nil | Identificador único para cada Control | 0.3| |
- | |cClrText| | Color del Texto | 0.2.1| | + | |[[propiedades:oParent]]| | Control contenedor | 0.3| |
- | |lBold| .f. | Se presentara el texto en negrita | 0.2.1| | + | |[[propiedades:oHtml]]| | Objeto de la clase [[componentes:wHtml]] con el código para su renderizado | 0.3| |
- | |lNew| .f. | Pone el Texto en Blanco y el Fondo en "teal lighten-1" (si no se ha definido otro) | 0.2.1| | + | |[[propiedades:oStyle]]| | Objeto de la clase [[componentes:wStyle]] con las variantes de estilo | 0.3| |
- | |lPulse| .f. | Activa el efecto [[https://materializecss.com/pulse.html|Pulse]] de Materialize | 0.2.1| | + | |cClass| | Nos permite definir propiedades para la propiedad class de HTML | 0.3| |
- | |cClass| | Nos permite definir propiedades para la propiedad class de HTML | 0.2.1| | + | |cText| | Texto a presentar | 0.3| |
+ | |[[propiedades:cClrPane]]| | Color del fondo | 0.3| | ||
+ | |[[propiedades:cClrText]]| | Color del Texto | 0.3| | ||
+ | |lBold| .f. | Se presentara el texto en negrita | 0.3| | ||
+ | |lNew| .f. | Pone el Texto en Blanco y el Fondo en "teal lighten-1" (si no se ha definido otro) | 0.3| | ||
+ | |lPulse| .f. | Activa el efecto [[https://materializecss.com/pulse.html|Pulse]] de Materialize | 0.3| | ||
+ | |lShadow| .f. | Activa el efecto [[https://materializecss.com/shadow.html|Sombra]] de Materialize | 0.3| | ||
+ | |lChip| .f. | Presenta el Badge como un [[https://materializecss.com/chips.html|Chips]] de Materialize, pero sin icono de cerrar | 0.3| | ||
+ | |[[propiedades:cIcon]]| | Icono para el modo Chip | 0.3| | ||
+ | |[[propiedades:cClrIcon]]| | Color del Icono en modo Chip, si no se indica utiliza cClrText | 0.3| | ||
+ | |[[propiedades:cImage]]| | Imagen para el modo Chip | 0.3| | ||
+ | |cAltImage| | alternativa a la Imagen para el modo [[https://materializecss.com/chips.html|Chip]]| 0.3| | ||
- | ===== Metodos ===== | ||
- | ^Nombre ^Descripción ^Versión ^ | + | ===== Métodos ===== |
- | |SetArray(aProperties)| Nos asigna las propiedades del control en base al array aProperties {cText, cClass, lBold, lNew, lPulse, cClrPane, cClrText}, aProperties también puede ser una cadena y se asignara a cText | 0.2.1| | + | |
- | |Set()| Nos asigna las propiedades del control en base a los parametros cText, cClass, lBold, lNew, lPulse, cClrPane, cClrText | 0.2.1| | + | |
- | ===== Hereda de... ===== | + | ^Nombre ^Descripción ^Versión ^ |
- | ====== wComponent ====== | + | |SetArray()| Nos asigna las propiedades del control en base a un array {cText, cClass, lBold, lNew, lPulse, cClrPane, cClrText}, si pasamos una cadena se asignara a cText | 0.3| |
- | {{page>controles:wcomponent#propiedades}} | + | |Set()| Nos asigna las propiedades del control en base a los parametros cText, cClass, lBold, lNew, lPulse, cClrPane, cClrText | 0.3| |
- | {{page>controles:wcomponent#metodos}} | ||
~~DISCUSSION|Comentario wBadge~~ | ~~DISCUSSION|Comentario wBadge~~ | ||
/*{{tag>[nefele primeros-pasos]}}*/ | /*{{tag>[nefele primeros-pasos]}}*/ |