controles:wbadge
Diferencias
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 [03/10/2020 16:53] pedro |
controles:wbadge [26/03/2022 12:14] (actual) pedro [Ejemplo de uso] |
||
|---|---|---|---|
| Línea 2: | Línea 2: | ||
| 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.. | 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| | ||
| ===== Métodos ===== | ===== Métodos ===== | ||
| ^Nombre ^Descripción ^Versión ^ | ^Nombre ^Descripción ^Versión ^ | ||
| - | |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.2.1| | + | |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| |
| - | |Set()| Nos asigna las propiedades del control en base a los parametros cText, cClass, lBold, lNew, lPulse, cClrPane, cClrText | 0.2.1| | + | |Set()| Nos asigna las propiedades del control en base a los parametros cText, cClass, lBold, lNew, lPulse, cClrPane, cClrText | 0.3| |
| - | + | ||
| - | ===== Hereda de... ===== | + | |
| - | ====== wComponent ====== | + | |
| - | {{page>controles:wcomponent#propiedades}} | + | |
| - | {{page>controles:wcomponent#metodos}} | ||
| ~~DISCUSSION|Comentario wBadge~~ | ~~DISCUSSION|Comentario wBadge~~ | ||
| /*{{tag>[nefele primeros-pasos]}}*/ | /*{{tag>[nefele primeros-pasos]}}*/ | ||
controles/wbadge.1601744000.txt.gz · Última modificación: 03/10/2020 16:53 por pedro
