5
Tienes que poner el hover sobre el boton y luego "navegar" con los selectores al elemento que quieras animar a partir de ahi
.primary_color {
background-color: #dc1921;
}
.btn {
width: 150px;
height: 100px;
padding: 1rem;
font-size: 0.81rem;
margin: .5rem 0;
border: 0;
-webkit-border-radius: 0.5rem;
border-radius: 0.5rem;
...
5
Con esta funcion de JS podrías hacerlo, pero estoy viendo que no se puede clickar en el elemento <i> solo en el input. No se si esto será un problema en la estructura del html o de las clases utilizadas
Si pruebas a cambiar el iconMostrar del evento por inputPassword veras que funciona al clickar en el input
EDIT: He añadido un ID a el input y a el ...
4
Encontre la forma que funcionara
<head>
<link href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<div class="mdc-text-field mdc-text-field--...
4
Tienes que poner el boton como el selector principal para que cuando se haga hover sobre el button, se le apliquen los estilos a la imagen y al texto que son los hijos:
.primary_color {
background-color: #dc1921;
}
.btn {
width: 150px;
height: 100px;
padding: 1rem;
font-size: 0.81rem;
margin: .5rem 0;
border: 0;
-webkit-...
respondida el 28 feb. a las 14:55
Einer
17.6k22 medallas de oro1010 medallas de plata3434 medallas de bronce
3
.primary_color {
background-color: #dc1921;
}
.btn {
width: 150px;
height: 100px;
padding: 1rem;
font-size: 0.81rem;
margin: .5rem 0;
border: 0;
-webkit-border-radius: 0.5rem;
border-radius: 0.5rem;
cursor: pointer;
text-transform: uppercase;
white-space: normal;
word-wrap: break-word;
color: #fff;
}
.icono ...
respondida el 28 feb. a las 14:56
phpMyGuel
6,84011 medalla de oro66 medallas de plata3131 medallas de bronce
2
respondí uno de tus hilos y veo que estás tratando de usar la librería MDC. Yo la he estudiado por meses y la domino, te puedo resolver cualquier duda.
Para este hilo te aconsejo que no utilices la versión del CDN, es más una versión para testing que una de producción; no la puedes personalizar tanto, no funcionan muy bien los @mixins, es más complejo ...
2
es posible con css ya que hasta la fecha todos los frameworks de estilos se basan en Cascading Style Sheets.
No soy muy bueno en los estilos pero una forma de hacerlo sería la siguiente (Es necesario adaptar en caso de requerirlo):
Tomando en cuenta tu HTML:
<head>
<link href="https://unpkg.com/material-components-web@latest/dist/material-...
2
Saludos checa esto:
.primary_color {
background-color: #dc1921;
}
.btn {
width: 150px;
height: 100px;
padding: 1rem;
font-size: 0.81rem;
margin: .5rem 0;
border: 0;
-webkit-border-radius: 0.5rem;
border-radius: 0.5rem;
cursor: pointer;
text-transform: uppercase;
white-space: normal;
word-wrap: break-word;
...
respondida el 28 feb. a las 15:01
Diego Avila
4,89111 medalla de oro88 medallas de plata3333 medallas de bronce
1
El problema es que estas utilizando un property binding. Eso solo crea la relación en un solo sentido. Para tu código el contenido del input (y por decantamiento, tu formulario) esta vació.
Existen 2 formas para hacer lo que necesitas:
1) Usando ngModel:
<mat-form-field>
<input matInput placeholder="Nombre" maxlength="20"
[formControl]="...
1
Lo que yo haría sería sustituír el icon con role="button" que tienes en el textfield y reemplazarlo por un icon toggle, esto te permitirá cambiar automáticamente el icono visibility por visibility_off y además incluir un ripple effect.
En Diciembre de 2018 se abrió la petición para que puedan incluir estas funciones por defecto en el API del textfield. ...
1
También lo puedes hacer utilizando un button en lugar del i y le montas el icono con font awesome, de la siguiente manera.
<head>
<link href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"&...
1
Necesitas crear un nuevo color en la carpeta colors.xml y asignarlo al
custom_background_item.xml ( en lugar de android:color="@color/colorAccent"):
<color name="colorNaranja">#5EF44336</color>
Para hacer transparencia es cuestion de mover el 2do slider, de cuadro que aparece al hacer click en el cuadro de color que esta a la izq :
respondida el 29 mar. a las 1:27
armen
1,20511 medalla de oro55 medallas de plata1010 medallas de bronce
1
La clave para tu problema es usar la función módulo o resto (%) al momento de iterar tu lista de noticias.
Considera la siguiente solución:
class News extends Component {
renderArticle(singleArticle) {
return (
<CSSTransition key={singleArticle.url} classNames="fade" timeout={500}>
<SingleArticle singleArticle={singleArticle} /&...
respondida el 30 ene. a las 0:21
Alter Lagos
3,10122 medallas de oro99 medallas de plata2121 medallas de bronce
Solo están habilitadas las respuestas de wiki más votadas con una longitud mínima y que no pertenecen a la comunidad
Etiquetas relacionadas
material-design × 79android × 23
css × 14
javascript × 12
html × 11
html5 × 11
android-studio × 10
css3 × 9
java × 8
angular × 7
bootstrap × 6
materialize × 6
reactjs × 5
android-layout × 5
jquery × 4
angularjs × 3
xml × 3
vue.js × 3
wpf × 3
design × 3
bootstrap-4 × 2
botón × 2
datepicker × 2
toolbar × 2
php × 1