0

Tengo una línea y 'x' circulos que serán creados dinámicamente.

La cuestión es que si tengo 2 circulos, uno deberá estar al principio, y el otro al final, si tengo por ejemplo 4circulos, cada uno con separación del 25%... vamos, que estén equitativos, x/100.

Además he hecho una 'chapuza' que ha sido poner a los círculos un margin-top:-30px porque se ponían en la línea de abajo, ¿ cómo soluciono eso también ?

html

<div class='line'></div>
<clr-icon *ngFor="let circulito of steps; let i = index" 
shape="circle" 
 class='circle' 
 attr.ng-class="circle{{ i + 1 }}" <!--Aquí tengo el índice del array-->
  size="36">
</clr-icon>
<clr-icon *ngIf="steps.length == 1" shape="circle" class='circle' size="36"></clr-icon>

SASS

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.mycontainer {
  position: relative;
  width: 100%;
  display: block;
}

.step {
  position: absolute;
  left: 0%;
  width: 100%;

  .circle {
    color: black;
    margin-top: -30px;
    background-color: white;
  }
}

.line {
  height: 5px;
  width: 100%;
  background-color: green;
}

Img

dibujo

Se trata de una línea y que si hay 2 circulos, 1 se ponga al principio, y el 2º al final, y si hay x que vayan separados equitativamente.

2
  • cual sería el resultado final gráficamente? una línea horizontal con círculos por arriba espaciados equitativamente? el 23 abr. 2018 a las 8:32
  • Actualicé la pregunta
    – EduBw
    el 23 abr. 2018 a las 8:50

2 respuestas 2

2

Edit para poner el primer elemento al 0% y el último elemento al 100% en la solución que encontré es necesario saber cuantos elementos hay. Tal vez se pueda refinar

HTML

<body>
  <div class="mycontainer">
    <div class="line">
      <div class="step step-5">
        <clr-icon class="circle circle-1">1</clr-icon>
        <clr-icon class="circle circle-2">2</clr-icon>
        <clr-icon class="circle circle-3">3</clr-icon>
        <clr-icon class="circle circle-4">4</clr-icon>
        <clr-icon class="circle circle-5">5</clr-icon>
      </div>
    </div>
  </div>
  <div class="mycontainer">
    <div class="line">
      <div class="step step-3">
        <clr-icon class="circle circle-1">1</clr-icon>
        <clr-icon class="circle circle-2">2</clr-icon>
        <clr-icon class="circle circle-3">3</clr-icon>
      </div>
    </div>
  </div>
</body>

LESS

*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  body {
    background: #f4f4f4;
  }
  .mycontainer {
    position: relative;
    width: 100%;
    display: block;
    margin:50px 0;
  }
  .step {
    position: absolute;
    left: 0;
    right: 0;
    top: -18px;
    height: 36px;
  }
  .step .circle {
    position: absolute;
    color: black;
    line-height: 36px;
    text-align: center;
    z-index: 1;
    display: block;
    width: 36px;
  }
  .step .circle::before {
    left: calc(50% - 18px);
    top: calc(50% - 18px);
    position: absolute;
    background-color: white;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    content: " ";
    z-index:-1;
}
  .line {
    height: 5px;
    width: 100%;
    background-color: green;
  }

.step-3 {
    .generate-steps(3);
}

.step-5 {
  .generate-steps(5);
}

.generate-steps(@s){
  .generate-circles(@s - 1);
  .circle-@{s} {left: ~"calc(100% - 36px)";}
}

.generate-circles(@n, @i:0) when (@i =< @n ) {
  @b: @i+1;
  .circle-@{b} {
    left: (@i * 100% / @n);
  }
  .generate-circles(@n, (@i + 1));
}
  • En el html el div step dice cuantos elementos hay
  • cada circle tiene un numero segun su posicion
  • Less arma la combinación de steps y circles con 2 funciones

completo:

*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  background: #f4f4f4;
}
.mycontainer {
  position: relative;
  width: 100%;
  display: block;
  margin: 50px 0;
}
.step {
  position: absolute;
  left: 0;
  right: 0;
  top: -18px;
  height: 36px;
}
.step .circle {
  position: absolute;
  color: black;
  line-height: 36px;
  text-align: center;
  z-index: 1;
  display: block;
  width: 36px;
}
.step .circle::before {
  left: calc(50% - 18px);
  top: calc(50% - 18px);
  position: absolute;
  background-color: white;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  content: " ";
  z-index: -1;
}
.line {
  height: 5px;
  width: 100%;
  background-color: green;
}
.step-3 .circle-1 {
  left: 0%;
}
.step-3 .circle-2 {
  left: 50%;
}
.step-3 .circle-3 {
  left: 100%;
}
.step-3 .circle-3 {
  left: calc(100% - 36px);
}
.step-5 .circle-1 {
  left: 0%;
}
.step-5 .circle-2 {
  left: 25%;
}
.step-5 .circle-3 {
  left: 50%;
}
.step-5 .circle-4 {
  left: 75%;
}
.step-5 .circle-5 {
  left: 100%;
}
.step-5 .circle-5 {
  left: calc(100% - 36px);
}
  <body>
    <div class="mycontainer">
      <div class="line">
        <div class="step step-5">
          <clr-icon class="circle circle-1">1</clr-icon>
          <clr-icon class="circle circle-2">2</clr-icon>
          <clr-icon class="circle circle-3">3</clr-icon>
          <clr-icon class="circle circle-4">4</clr-icon>
          <clr-icon class="circle circle-5">5</clr-icon>
        </div>
      </div>
    </div>
    <div class="mycontainer">
      <div class="line">
        <div class="step step-3">
          <clr-icon class="circle circle-1">1</clr-icon>
          <clr-icon class="circle circle-2">2</clr-icon>
          <clr-icon class="circle circle-3">3</clr-icon>
        </div>
      </div>
    </div>
  </body>

aqui debajo la respuesta original que distribuye diferente

usando Flex y englobando los circles en step

.step

position: absolute;
left: 0;
right: 0;

esto es igual a left 0% width 100%

display: flex;
flex-direction: row;

poner los children en una fila

top:-18px;
height: 36px;

le damos un alto y lo movemos para arriba así queda justo sobre la linea


.step .circle

flex: auto;
line-height: 36px;
text-align: center;
z-index: 1;

le damos un alto al texto de ejemplo ponemos el z-index a 1


.step .circle::before

left: calc(50% - 18px);
top: calc(50% - 18px);
position: absolute;

posicionado al centro del circle

background-color: white;
border-radius: 50%;

lo hacemos circle

width: 36px;
height: 36px;
z-index:-1;

definimos el tamaño y le decimos que se vaya un nivel para atras (asi queda detras de los números de ejemplo)


completo:

*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  body {
    background: #f4f4f4;
  }
  .mycontainer {
    position: relative;
    width: 100%;
    display: block;
    margin:50px 0;
  }
  .step {
    position: absolute;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: row;
    top: -18px;
    height: 36px;
  }
  .step .circle {
    position: relative;
    color: black;
    flex: auto;
    line-height: 36px;
    text-align: center;
    z-index: 1;
  }
  .step .circle::before {
    left: calc(50% - 18px);
    top: calc(50% - 18px);
    position: absolute;
    background-color: white;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    content: " ";
    z-index:-1;
}
  .line {
    height: 5px;
    width: 100%;
    background-color: green;
  }
<!DOCTYPE html>
<html>

<head>
</head>

<body>
<div class="mycontainer">
  <div class="line">
    <div class="step">
      <clr-icon class="circle">1</clr-icon>
      <clr-icon class="circle">2</clr-icon>
      <clr-icon class="circle">3</clr-icon>
      <clr-icon class="circle">4</clr-icon>
      <clr-icon class="circle">5</clr-icon>
    </div>
  </div>
</div>
<div class="mycontainer">
  <div class="line">
    <div class="step">
      <clr-icon class="circle">1</clr-icon>
      <clr-icon class="circle">2</clr-icon>
      <clr-icon class="circle">3</clr-icon>
    </div>
  </div>
</div>
</body>

</html>

Nota:

Al pasar al less estas líneas:

left: calc(50% - 18px);
top: calc(50% - 18px);

los cálculos deben ir entre comillas y escapeados así no los calcula de antemano

left: ~"calc(50% - 18px)";
top: ~"calc(50% - 18px)";
4
  • si la clase .step se usa para otra cosa reemplazar el nombre, por el contexto me pareció que iba ahí el 23 abr. 2018 a las 9:40
  • muchísimas, muchísimas gracias !
    – EduBw
    el 23 abr. 2018 a las 10:10
  • Pero como quitas las líneas de inicio y fin ?Es decir, que empiece por circulo y acabe en circulo.
    – EduBw
    el 23 abr. 2018 a las 10:20
  • ahi va un edit con el caso de 0% y 100% el 23 abr. 2018 a las 11:06
0

Mi propuesta es que dividas la linea entre el (numero de círculos menos uno) así obtendrás la longitud de los tramos entre los círculos,no obstante creo que deberías restarle a la linea el diámetro de los círculos

2
  • Ya lo estoy haciendo, tengo una línea con el width 100% y por cada circulo ( For ) añado un circulo, pero no sé como decir que cada circulo se posicione.
    – EduBw
    el 23 abr. 2018 a las 9:21
  • 1
    intenta ponerle como margen izquierdo (el numero resultante de la división de círculos entre la linea) * el numero del circulo (la i del bucle) por ejemplo: si tienes 3 circulos pones el margen del circulo 1 a 50%*0 el del 2 a 50%*1 el del 3 a 50% *2 el 23 abr. 2018 a las 9:24

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.