style - Varias líneas para el valor de atributo largo en Jade/Pug

pug preprocesador html

Question

¿Cómo escribimos un valor de atributo largo sobre múltiples líneas en Jade / Pug?

Las rutas SVG tienden a ser muy largas. Queremos escribir un valor de atributo sobre múltiples líneas para ayudar con la legibilidad. Por ejemplo, el tutorial de Mozilla escrito en HTML es fácil de leer.

Cualquier forma de cambiar esto:

h3 Arcs
svg(width="320px", height="320px")
path(d="M10 315 L 110 215 A 30 50 0 0 1 162.55 162.45 L 172.55 152.45 A 30 50 -45 0 1 215.1 109.9 L 315 10",
stroke="black", fill="green",
stroke-width="2", fill-opacity="0.5")

en algo como esto:

h3 Arcs
svg(width="320px", height="320px")
path(d="M10 315 " +
"L 110 215 " +
"A 30 50 0 0 1 162.55 162.45 " +
"L 172.55 152.45 " +
"A 30 50 -45 0 1 215.1 109.9 " +
"L 315 10",
stroke="black", fill="green",
stroke-width="2", fill-opacity="0.5")

sin activar un error de "Token inesperado".

Answer 1

Esta es una vieja pregunta, pero aquí hay una respuesta más nueva.

En mi caso, estoy usando PUG in vue templates en componentes de un solo archivo. Entonces el siguiente funciona para mí.

<template lang=''pug''>
.day(:class=`{
''disabled'': isDisabled,
''selected'': isSameDay,
''in-range'': isInRange,
''today'': isToday,
''weekend'': isWeekend,
''outside-month'': isOutsideMonth }`,
@click=''selectDay''
) {{label}}
</template>

es decir, utilizando la interpolación de cadenas ''en lugar de '' o ''

Answer 2

He estado buscando una respuesta a esto y creo que puedes dividir los atributos de jade en varias líneas salteando las comas finales.

Ex.

aside
a.my-link(
href="https://foo.com"
data-widget-id="1234567abc")
| Tweets by @foobar

Encontré este mensaje de confirmación al respecto: https://github.com/visionmedia/jade/issues/65

Answer 3

Puede hacerlo cerrando la cadena en el salto de línea, agregando un ''+'', y luego abriendo una nueva cadena en la línea de continuación.

Aquí hay un ejemplo:

path(d="M10 315 L 110 215 A 30 50 0 0 1 162.55 162.45 L 172.55" +
" 152.45 A 30 50 -45 0 1 215.1 109.9 L 315 10",
foo="etc",
...

Answer 4

También tenía una cadena como valor de atributo. Estoy usando reaccionar

 input(
...props
label="Contrary to popular belief, Lorem Ipsum is simply random text. /
It has roots in a piece of classical Latin literature from 45 BC, /
making it over 2000 years old."
)

en tu caso...

path(d="M10 315 L 110 215 A 30 50 0 0 1 162.55 162.45 /
L 172.55 152.45 A 30 50 -45 0 1 215.1 109.9 L 315 /
10",

Tenga en cuenta que hay un espacio antes de la barra invertida

Answer 5

Tengo este mismo problema pero en un contexto de knockoutjs. Usé la barra invertida como tal. Previamente:

div(data-bind="template: {name: ''ingredient-template'', data: $data}")

Ahora:

div(data-bind="template: {/
name: ''ingredient-template'',/
data: $data}")

Nota: La barra invertida debe ir seguida de una nueva línea. No estoy seguro de si esta es la forma "oficial", simplemente lo hice y parece funcionar. Una desventaja de este método es que las cuerdas se renderizan con el espacio en blanco intacto. Entonces, el ejemplo anterior se representa como:

<div data-bind="template: { name: ''ingredient-template'', data: $data}">

Esto podría hacerlo inutilizable para su ejemplo.

Editar Gracias Jon. La idea de var de tu comentario es probablemente mejor, aunque aún no es ideal. Algo como:

-var arg = "M10 315 "
-arg += "L 110 215 "
-arg += "A 30 50 0 0 1 162.55 162.45 "
-arg += "L 172.55 152.45 "
-arg += "A 30 50 -45 0 1 215.1 109.9 "
-arg += "L 315 10"
h3 Arcs
svg(width="320px", height="320px")
path(d=arg,
stroke="black", fill="green",
stroke-width="2", fill-opacity="0.5")

No estoy seguro de que los caracteres adicionales valen la reducción en la longitud de la línea.