{"id":15392,"date":"2020-04-14T09:05:05","date_gmt":"2020-04-14T16:05:05","guid":{"rendered":"http:\/\/clartechsolutions.com\/?p=15392"},"modified":"2023-03-01T18:21:58","modified_gmt":"2023-03-01T18:21:58","slug":"personalizar-botones-con-imagenes-almacenadas-en-nuestro-espacio-de-trabajo-usando-css","status":"publish","type":"post","link":"https:\/\/kiusi.com\/en\/personalizar-botones-con-imagenes-almacenadas-en-nuestro-espacio-de-trabajo-usando-css\/","title":{"rendered":"Personalizar Botones con Im\u00e1genes almacenadas en nuestro Espacio de Trabajo usando CSS"},"content":{"rendered":"

Muchas veces nos encontramos en la necesidad de personalizar nuestros botones en nuestras aplicaciones en Oracle APEX, es por ello que el d\u00eda de hoy te voy a ense\u00f1ar c\u00f3mo puedes colocar una imagen en el bot\u00f3n que se encuentra almacenada en nuestro espacio de trabajo para que los botones se vean c\u00f3mo te maestro en la siguiente imagen:<\/p>\n

\"\"<\/p>\n

Lo primero que debemos hacer es cargar en nuestro espacio de trabajo las im\u00e1genes que necesitamos, en el ejemplo que les traigo he subido tres im\u00e1genes de 65px de alto cada una con fondo transparente.<\/p>\n

Ingresamos a nuestra aplicaci\u00f3n, nos dirigimos a Componentes Compartidos –> Archivos –> Archivos de Aplicaci\u00f3n Est\u00e1ticos:<\/p>\n

\"\"<\/a><\/p>\n

Reservamos las referencias porque las vamos a usar m\u00e1s adelante:<\/p>\n

#APP_IMAGES#chart-bar-65px.png\n#APP_IMAGES#pie-chart-65.png\n#APP_IMAGES#reporte-65.png<\/pre>\n
Regresamos a la aplicaci\u00f3n y creamos una regi\u00f3n que contendr\u00e1 tres Botones el cual los denomin\u00e9: BOTON1, BOTON2 y BOTON3.<\/p>\n
Plantillas de Botones<\/strong><\/h3>\n
La aplicaci\u00f3n que he creado para este ejemplo usa el Tema Universal 42  el cual trae un conjunto de plantillas para botones, calendario, etiquetas, informes,  Listas, Listas de Valores Emergentes, P\u00e1ginas, Regiones y Ruta de Navegaci\u00f3n como todos los Temas que tenemos disponibles en APEX.<\/p>\n
En el caso de las plantillas de Botones, el tema Universal 42 dispone de tres tipos diferentes de plantillas, una es la de tipo Texto (Text), la otra es de tipo Icono (Icon) y una m\u00e1s de tipo combinado, que es la de Texto con Icono (Text with Icon).<\/p>\n
En el caso nuestro necesitamos crear una propia plantilla que sea de tipo Texto con Imagen, para ello lo que vamos a hacer es crear una plantilla basada en una copia de la plantilla de bot\u00f3n: \u201cText with Icon\u201d.<\/p>\n
Ingresamos a Componentes Compartidos de nuestra aplicaci\u00f3n y desde la secci\u00f3n de Interfaz de Usuario hacemos clic en el enlace de Plantillas.<\/p>\n
Las tres primeras plantillas son la de tipo bot\u00f3n, hacemos clic en el icono Copiar de la plantilla \u201cText with Icon\u201d y se abre una ventana modal el cual nos solicita el nombre de la nueva plantilla, lo colocaremos como: \u201cText with Image\u201d y hacemos clic en el bot\u00f3n Copiar.<\/p>\n
<\/a><\/p>\n

\n<\/a>\"\"<\/a><\/p>\n
Hacemos clic en el enlace del nombre de la plantilla para abrirla y editarla. Nos desplazamos hasta la ficha Definici\u00f3n y all\u00ed podemos ver dos recuadros, uno es para la plantilla normal cuando el bot\u00f3n est\u00e1 en gris y el otro recuadro es para la plantilla cuando el bot\u00f3n est\u00e1 pintado en azul, es decir, que est\u00e1 configurado como Directo.<\/p>\n
<\/a><\/p>\n

\n<\/a>\"\"<\/a><\/p>\n
Recuadro 1: Tenemos el siguiente C\u00f3digo HTML<\/p>\n
<button class="t-Button t-Button--icon #BUTTON_CSS_CLASSES#" #button_attributes# onclick="#JAVASCRIPT#" type="button" id="#BUTTON_ID#">\n<span class="t-Icon t-Icon--left #ICON_CSS_CLASSES#" aria-hidden="true"><\/span>\n<span class="t-Button-label">#LABEL#<\/span>\n<span class="t-Icon t-Icon--right #ICON_CSS_CLASSES#" aria-hidden="true"><\/span>\n<\/button><\/pre>\n
Reemplazamos por el siguiente c\u00f3digo HTML<\/p>\n
<button class="t-Button-img #BUTTON_CSS_CLASSES#" #button_attributes# onclick="#JAVASCRIPT#" type="button" id="#BUTTON_ID#">\n<img class="button-img" src="#ICON_CSS_CLASSES#">\n<span class="t-Button-label">#LABEL#<\/span>\n<\/button><\/pre>\n
El cual eliminamos las etiquetas que corresponden al Icono y en su lugar colocamos la etiqueta de tipo imagen <img src="”…”"> y utilizaremos la variable de sustitución #ICON_CSS_CLASSES# para indicar la ruta donde se encuentra nuestra imagen. Además vamos a crear nuestra propia clase para el botón que la he llamado t-Button-img.<\/p>\n
Recuadro 2: Tenemos el siguiente C\u00f3digo HTML<\/p>\n
<button class="t-Button t-Button--icon #BUTTON_CSS_CLASSES# t-Button--hot" #button_attributes# onclick="#JAVASCRIPT#" type="button" id="#BUTTON_ID#">\n<span class="t-Icon t-Icon--left #ICON_CSS_CLASSES#" aria-hidden="true"><\/span>\n<span class="t-Button-label">#LABEL#<\/span>\n<span class="t-Icon t-Icon--right #ICON_CSS_CLASSES#" aria-hidden="true"><\/span>\n<\/button><\/pre>\n
Reemplazamos por el siguiente c\u00f3digo HTML<\/p>\n
<button class="t-Button-img #BUTTON_CSS_CLASSES# t-Button--hot" #button_attributes# onclick="#JAVASCRIPT#" type="button" id="#BUTTON_ID#">\n<img class="button-img" src="#ICON_CSS_CLASSES#">\n<span class="t-Button-label">#LABEL#<\/span>\n<\/button><\/pre>\n
Lo \u00fanico diferente aqu\u00ed es que se tiene la clase t-Button–hot<\/strong> que indica que el bot\u00f3n es Directo y por lo tanto se pintar\u00e1 de azul.<\/p>\n
We apply the changes.<\/p>\n
Estilos CSS de Botones<\/strong><\/h3>\n
Regresamos a la aplicaci\u00f3n y hacemos clic en el t\u00edtulo de la p\u00e1gina en el Dise\u00f1ador de P\u00e1ginas y nos desplazamos a la secci\u00f3n de CSS En L\u00ednea y agregamos los siguientes estilos CSS:<\/p>\n
.t-Button-img {\nfont-size: 20px;\nline-height: 24px;\nfont-weight: 400;\ntext-align: center;\npadding-top: 20px;\npadding-right: 20px;\npadding-bottom: 20px;\npadding-left: 20px;\n}\n\n.button-img\n{\nmargin-left: 15px;\nmargin-right: 15px;\nalign: middle;\n}<\/pre>\n
Editar Botones<\/strong><\/p>\n
Hacemos clic en BOTON1 desde el panel de la izquierda de Presentaci\u00f3n y vemos las propiedades del bot\u00f3n desde el panel de la derecha de propiedades.<\/p>\n
BOTON1<\/strong><\/p>\n
Secci\u00f3n Identificaci\u00f3n<\/p>\n