interactive-rating-component

Community feedback

• 

  Danilo Blas•6,300

  @Sdann26Posted over 2 years ago

  Hola Saul he modificado tú codigo desde el navegador para generar que los botones se vean redondos y te recomiendo hacer estos cambios:

  A la clase rate agregale:

  width: 4em;
  aspect-ratio: 1;
  

  Y quitale los atributos:

  position: relative;
  left: 3rem;
  top: 1rem;
  margin: 1.5rem 1rem;
  

  Con esto serán circulitos tus bonotes y ya a rates ponle las siguiente atributos:

    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin: 0 1rem;
  

  Además a la clase submit agregale:

  width: calc(100% - 2rem);
  margin: 0 1rem;
  letter-spacing: 0.20rem;
  

  Y quitale los atributos:

  position: relative;
  top: 2.8rem;
  left: 4rem;
  

  Con esto tu submit quedará ocupando todo el ancho pero dando espacio a los costado y además con las letras un poco separas.

  Te recomendaría que hagas que al darle click a un botón quede seleccionado ya que solo cuando lo dejas pulsado se ve seleccionado pero luego se desaparece y no sabes si seleccionaste la opción a no ser que des click submit. Eso manejalo con JS tengo una solución para dejar los botones coloreados en la resolución que hice seleccionado los botones y agregando clases que re comiendo ver si no se te da una idea.

  Masomenos es lo que te puedo recomendar.

  Marked as helpful

  0

  ---

  

  Saul•1,260

  @xsaulPosted over 2 years ago

  @Sdann26 Hola Danilo, muchas gracias por tus consejos los aplicaré! Tengo una duda: ¿Aspect-ratio es parecido al Border-radius, o qué es lo que hace? Nunca había visto esa propiedad.

  Y sobre la selección de los botones, creí que usando la propiedad :active funcionaría bien, pero la verdad no supe como hacerlo jaja. 😅

  Pero buscaré tu solución a eso. Gracias!

  1

  

  Danilo Blas•6,300

  @Sdann26Posted over 2 years ago

  @xsaul aspec-ratio es una propiedad que sirve para generar una proporción en el ancho y alto (guardar proporción de relación aspecto) del elemento que le estas dando, si le pones 1 significa que el ancho y el alto van a ser del mismo tamaño. Por ejemplo si quieres que el ancho sea el doble que el alto le pondras aspect-ratio: 2 / 1 y ya con eso solo debes darle valor al ancho o al alto de la imagen ya no es necesario a ambos y va conservar esa proporción. Es interesante yo lo uso cuando quiero que se conserve las proporciones de alguna imagen o alguna tarjeta (card) pero bueno es una herramienta más :D.

  Eso si te recomiendo no usar mucho el posicionamiento relative y absoluto a no ser que quieras agregar algún efecto como aviso emergente, tooltip, modal, etc. Osea tiene varios usos pero muchas veces se usan para diseños, efectos o interactividad en la página pero no tanto para elementos en un mismo flujo porque puede que se pongan encima de otro elemento y no se vea bonito mejor usar margin para separar elementos y padding para el espaciado interno.

  Solo eso éxitos!

  0