# j-Page

> Este componente pode lidar com diferentes conteúdos de forma asíncrona. o componente tem a mesma funcionalidade que j-Part. Se o elemento não contém nenhum conteúdo, então o componento descarrega o acor

Framework: jcomponent20
Product: jComponent 20 (jcomponent@20)
Language: pt
Content-SHA256: 6f8c13df966500a0bf36fa887f5a079d35804371409e65c12b5d3e1d6812ae14
Snapshot: c0700e321579725c5cf4f5ace1ad7d2866d1b4f93c24a63c0b41b6b7998e976c
Sources: components@910ed1a86f6e72b4f031d3ad0dc7844f9fc5cb8e
Review: not-recorded

Este componente pode lidar com diferentes conteúdos de forma asíncrona. o componente tem a mesma funcionalidade que `j-Part`. __Se o elemento não contém nenhum conteúdo__ então o componento descarrega o conteúdo de acordo com o `url` definido na configuração.

- __NEW__ `path` pode conter `{String Array}`

__Configuração__:

- `url {String}` requerido, um endereço URL relativo
- `if {String}` exigido, condição, é comparado com o valor dentro de `path` (__NEW__: suporta vários caminhos divididos pelo `comma`)
- `reload {String}` opcional, um link para a função `function(init) {}`, é executado quando a página é visível (todas as vezes)
- `hidden {String}` opcional, um link para a função, é executado quando a página está escondida (todas as vezes)
- `init {String}` opcional, um link para a função, é executado quando a página é visível e on-time
- `default {String}` opcional, um alias curto para `DEFAULT(default)`
- `hide {Boolean}` opcional, elemento auto-escondido se a condição `if` não for válida (default: `true`)
- `cleaner {Number}` opcional, tempo idle (em minutos) para o funcionamento da limpeza (default: `0`)
- `clean {String}` opcional, um link para a função, é executado antes da página é limpa
- `loading {Boolean}` opcional, permite o carregamento através de `SETTER('loading')` (default: `true`)
- `path {String}` opcional, o componente substitui todas as frases `~PATH~` e `CLASS` para o valor do `path` no modelo baixado
- `replace {String}` opcional, um link para o método `function(content) { return content }` que pode modificar o modelo baixado
- `absolute {Boolean}` opcional, permite posição absoluta (default `false`)
- `check {String}` opcional, um link para a função `function(next) { next(); }`, é executado quando a página quer mostrar
- `invisible {Boolean}` permite a adição de classe `invisible` quando a página está indo para esconder (default: `false`)
- `delay {Number}` um atraso (em ms) para a remoção da classe `invisible` e ocultar `loading` (default: `500`)
- `autofocus {Boolean/String}` concentra a primeira entrada, textarea (default: `false`)
- `delayloading {Number}` um atraso (em ms) para esconder `loading` (default: `800`)
- `id {String}` um identificador personalizado para substituir frases `~ID~` no HTML importado (default: vazio)

__É bom saber 1__:

- Todas as frases `CLASS` e `~PATH~` serão substituídas por `config.path` ou `config.if` automaticamente
- Todas as frases `~ID~` serão substituídas por `config.id` automaticamente

__É bom saber 2__:

O componente da página emite um `event` no formulário: `pages.` + `config.if` para a extensão de páginas.

__É bom saber 3__:

Se o componente da página não estiver dentro do âmbito, então o valor do `config.if` substituirá os caracteres `?` em todas as chaves de configuração.

```js
ON('pages.YOURIFCONDITION', function(element, pagecomponent) {
	// It's executed only when the page is initialized
});
```

Use-o com `<ui-component name="page">`Quando o componente ainda não está carregado, jComponent Descarrega-o no primeiro uso do endereço `DEF.fallback` (a partir do Componentator CDN por padrão). autor: Peter Širka. fonte: o Componentator Reserva de componentes, licença MIT.

```html example.html
<ui-component name="page" path="currentpage" config="if:home;url:/bla/bla/home.html"></ui-component>
<ui-component name="page" path="currentpage" config="if:services;url:/bla/bla/services.html;reload:services_reload"></ui-component>
<ui-component name="page" path="currentpage" config="if:contact;url:/bla/bla/contact.html;reload:contact_reload"></ui-component>

<pre><code>SET(&#39;currentpage&#39;, &#39;home&#39;);</code></pre>

<script>
	var currentpage = '';
</script>
```