Búsqueda de sitios web

javascript - ¿cómo usar el código fuente de ng-circle-progress en un proyecto de Angular?


Estoy usando Angular 6 y quiero usar ng-circle-progress. Implementé los círculos, pero quiero cambiar algo que creo que debería hacerlo desde el código fuente. Hay opciones units y title en los círculos y quiero que se acerquen entre sí. ¿Cómo puedo hacerlo?

app.module.ts

import {
  NgCircleProgressModule
} from 'ng-circle-progress';

imports: [
  CommonModule,
  RouterModule.forChild(HomeRoutingModule),
  NgCircleProgressModule.forRoot({
    "units": "Liter",
    "outerStrokeLinecap": "butt"
  })
]

home.component.html

<circle-progress
    [percent]="65"
    [radius]="100"
    [outerStrokeWidth]="8"
    [innerStrokeWidth]="2"
    [outerStrokeColor]=tank.outerColor
    [innerStrokeColor]="'#e2e2e2'"
    [animation]="true"
    [animationDuration]="300"
    [space]="5"
    [showSubtitle]= "false"
    [showUnits]= "true"
    [unitsFontSize]= "15"
    [titleFontSize]= "45"
    [clockwise]= "false">
</circle-progress>

y esta es la imagen del resultado. ¿cómo puedo controlar el espacio entre 65 y liter?

Respuesta #1

Para controlar el espacio entre los círculos externo e interno, ajusta la opción 'space'. Si deseas reducir el espacio entre los círculos, utiliza valores negativos.

Algo así:

<circle-progress
    ..... //other options
    [space]="-5"
    ..... //other options
</circle-progress>

Si quieres establecer un valor predeterminado para todas las barras de progreso en la aplicación, puedes agregar esta opción en las importaciones de esta manera:

imports: [
    NgCircleProgressModule.forRoot({
        space = -5
      })
]

Respuesta #2

Creo que es un error.

Abre el panel de herramientas de desarrollo en tu navegador, ¿puedes ver un espacio en blanco a la derecha del título?

Sería mejor que publiques un problema.

https://github.com/bootsoon/ng-circle-progress/issues