AYUDA EN LÍNEA
 WINDEVWEBDEV Y WINDEV MOBILE

Este contenido se ha traducido automáticamente.  Haga clic aquí  para ver la versión en inglés.
Ayuda / Desarrollar una aplicación o un sitio web / Controles, ventanas y páginas / Controles: tipos disponibles / Control Interruptor
  • Presentación
  • Usando una Image de 5 estados para el cursor
  • Ajustes de estilo avanzados
  • Añadiendo un Image a través de gImage
WINDEV
WindowsLinuxUniversal Windows 10 AppJavaReportes y ConsultasCódigo de Usuario (UMC)
WEBDEV
WindowsLinuxPHPWEBDEV - Código Navegador
WINDEV Mobile
AndroidWidget Android iPhone/iPadIOS WidgetApple WatchMac CatalystUniversal Windows 10 App
Otros
Procedimientos almacenados
Personalizar los controles Interruptor
Presentación
El control Interruptor es un control Casilla de verificación de 2 estados (on/off, true/false, yes/no). WINDEV, WEBDEV y WINDEV Mobile ofrecen muchas opciones de personalización.
Usando una Image de 5 estados para el cursor
Por defecto, el cursor está definido por un borde ("Cursor border" en la pestaña "Style" del control description). Esta frontera puede ser personalizada para cada estado (Normal, hover, etc.): fondo Color, tipo de frontera y Color, etc.
También es posible usar un Image para definir el cursor:
  1. Abrir la ventana control Interruptor description.
  2. En la pestaña "Estilo", seleccione "Cursor Border".
  3. En el área de "Uso", seleccione "Image de 5 estados". Se muestra una ventana para seleccionar la imagen deseada para el cursor Border.
    El Image debe ser un Image de 5 estados (o un Image set) y no un Image"único".
    Observación: Si sólo tienes un "solo" Image, puedes convertirlo automáticamente en modo de 5 estados gracias al editor Image en WINDEV, WEBDEV y WINDEV Mobile.
  4. Validar.
Ajustes de estilo avanzados
Para obtener un estilo muy específico, puede ajustar las diferentes opciones disponibles en la pestaña "Estilo" de la ventana control Interruptor description.
Puede modificar la fuente, los colores y las imágenes para cada valor (On/Off), para cada estado (Normal, hover, etc.) y para cada elemento (marco de diapositivas, marco del cursor, etiqueta del cursor, etc.), ... Hay muchas combinaciones!
Por ejemplo, puedes personalizar el cursor Border cambiando su redondez. Si la redondez es la mitad de las dimensiones del cursor, éste será "redondo"..
Por ejemplo, puedes usar la opción "Pie de foto de los modos internos" para modificar el color de los pies de foto de Inactive (pie de foto #B para el valor "OFF" y pie de foto #A para el valor "ON").
WEBDEV - Código Servidor En WEBDEV, las opciones de los pies de foto permiten personalizar aún más la control.
Por ejemplo, puede utilizar un tamaño de fuente diferente para el valor actual. El tamaño del valor "activo" puede ser de 20 px (mientras que el tamaño del segundo título es de 12 px).
Puedes usar emojis (caracteres específicos de Unicode) para obtener un interruptor "visual" y adaptar su Color.
Atención: el carácter mostrado varía según el sistema (el mismo carácter puede no mostrarse de la misma manera en Windows, iOS o Android).
Añadiendo un Image a través de gImage
Puedes añadir una Image al título con gImage para personalizar rápidamente el texto de las opciones y mantener el mismo cursor. Con este método, sin embargo, debe seleccionar cuidadosamente la Color de las imágenes, teniendo en cuenta la Color del cursor.
Para que las imágenes sean visibles en todos los estados, basta con intercambiar las imágenes a través de la programación cuando el usuario haga clic en el control ("Siempre que se modifique" Event). Por ejemplo:
// Adapt the image displayed in the captions
IF MySelf THEN
    MySelf[1].Caption = gImage(IMG_Name_Gray) + " Sort by name"
ELSE
    MySelf[1].Caption = gImage(IMG_Name_White) + " Sort by name"
END
Observación: todas las funciones del tipo gXXX pueden utilizarse en las etiquetas de valores (gFontBold, gFontUnderlined, etc.).
WEBDEV - Código Servidor En WEBDEV, la leyenda se puede personalizar con la CaptionHTML Property. La CaptionHTML Property define un código HTML como leyenda de las opciones. Por ejemplo:
MySelf[1].CaptionHTML = "<img src=" + IMG_DATE_GRAY + ">" + " Sort by date"
Ver también
Versión mínima requerida
  • Versión 24
Esta página también está disponible para…
Comentarios
Haga clic en [Agregar] para publicar un comentario

Última modificación: 27/05/2022

Señalar un error o enviar una sugerencia | Ayuda local