paginar 0.4.0 → 0.5.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +27 -1
- package/dist/index.es.js +12 -11230
- package/dist/index.es.js.map +1 -1
- package/dist/index.vue-external.es.js +9 -0
- package/dist/index.vue-external.es.js.map +1 -0
- package/dist/style.css +1 -1178
- package/package.json +39 -40
package/README.md
CHANGED
|
@@ -31,7 +31,7 @@ Esse link acima sempre puxa a última versão disponível para o software, e tam
|
|
|
31
31
|
Para apontar para uma versão estável, e assim evitar possíveis bugs ou desconfigurações vindas das melhorias, pode ser da seguinte maneira:
|
|
32
32
|
|
|
33
33
|
```html
|
|
34
|
-
<script type="module" src="https://unpkg.com/paginar@0.
|
|
34
|
+
<script type="module" src="https://unpkg.com/paginar@0.5.0/dist/index.es.js"></script>
|
|
35
35
|
```
|
|
36
36
|
|
|
37
37
|
No corpo do html, no local onde deseja que seja renderizado o leitor, utilizar o Web Component conforme abaixo, e inclua o conteúdo que deseja paginar dentro de um div com propriedade slot="content":
|
|
@@ -44,6 +44,32 @@ No corpo do html, no local onde deseja que seja renderizado o leitor, utilizar o
|
|
|
44
44
|
</paginate-content>
|
|
45
45
|
```
|
|
46
46
|
|
|
47
|
+
### Carregamento mais rápido
|
|
48
|
+
|
|
49
|
+
O leitor só começa a buscar o primeiro arquivo do `book-content` e as fontes de
|
|
50
|
+
`fontsOptions` depois que o script é executado. A página hospedeira pode antecipar
|
|
51
|
+
esses downloads no `<head>`; o `crossorigin` é necessário para que o `fetch` do
|
|
52
|
+
leitor reaproveite o arquivo pré-carregado:
|
|
53
|
+
|
|
54
|
+
```html
|
|
55
|
+
<link rel="preload" href="/capitulos/capitulo-1.html" as="fetch" crossorigin>
|
|
56
|
+
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
57
|
+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
58
|
+
```
|
|
59
|
+
|
|
60
|
+
Imagens no conteúdo devem declarar `width` e `height` (ou `aspect-ratio` no CSS)
|
|
61
|
+
para reservar espaço antes de carregar. O leitor repagina sozinho quando fontes
|
|
62
|
+
ou imagens mudam o tamanho do texto, mas reservar o espaço evita que o total de
|
|
63
|
+
páginas mude durante a leitura. Capítulos muito longos custam mais para paginar;
|
|
64
|
+
dividi-los em arquivos menores reduz o tempo até a primeira página.
|
|
65
|
+
|
|
66
|
+
Aplicações que já usam Vue 3.5 ou superior com um bundler podem importar
|
|
67
|
+
`paginar/dist/index.vue-external.es.js`. Esse arquivo registra o mesmo
|
|
68
|
+
`<paginate-content>`, mas importa `vue` da aplicação em vez de embutir o runtime,
|
|
69
|
+
reduzindo o download para cerca da metade. Use-o apenas quando `vue` estiver
|
|
70
|
+
disponível como módulo (bundler ou import map); o arquivo padrão continua sendo
|
|
71
|
+
`dist/index.es.js`.
|
|
72
|
+
|
|
47
73
|
## Customização
|
|
48
74
|
|
|
49
75
|
### Parametros de customização disponíveis
|