Download posthtml components - posthtml components download de código fonte

Componentes posthtml

Componentes inspirados na lâmina de Laravel para posthtml

Instalação

npm i -D posthtml-component

Introdução

Este plug-in posthtml fornece uma sintaxe amigável para HTML para o uso de componentes em seus modelos HTML. Se você estiver familiarizado com Blade, React, Vue ou similar, você achará a sintaxe familiarizada, pois esse plug -in é inspirado por eles.

Consulte também o primeiro UI de Bootstrap Posthtml Posthtml usando este plug -in e verifique também o modelo de partida aqui.

Opções

Nome	Tipo	Padrão	Descrição
raiz	`String`	`'./'`	Caminho raiz onde procurar componentes.
pastas	`String[]`	`['']`	Matriz de caminhos em relação a `options.root` ou namespaces definidos.
Filextension	`String\|String[]`	`'html'`	Extensões de arquivo de componentes a serem procuradas.
tagprefix	`String`	`'x-'`	Prefixo de tags.
marcação	`String\|Boolean`	`false`	Tag de componente. Use com `options.attribute` . Booleano apenas `false` .
atributo	`String`	`'src'`	Atributo a usar para definir o caminho para o arquivo de componente.
Namespaces	`String[]`	`[]`	Array de caminhos raiz de espaço para nome, caminhos de fallback e caminhos de substituição personalizada.
NamespaceSeParator	`String`	`'::'`	Separador de espaço para nome para nomes de tags.
colheita	`String`	`'yield'`	Nome da tag para injetar o conteúdo do componente principal.
slot	`String`	`'slot'`	Nome da tag para slots
preencher	`String`	`'fill'`	Nome da tag para slots de preenchimento.
Slotseparator	`String`	`':'`	Nome separador para tags `<slot>` e `<fill>` .
pilha	`String`	`'stack'`	Nome da tag para `<stack>` .
empurrar	`String`	`'push'`	Nome da etiqueta para `<push>` .
PropSScriptAttribute	`String`	`'props'`	Atributo em `<script props>` para recuperar adereços dos componentes.
ProPSCONTEXT	`String`	`'props'`	Nome do objeto dentro do script para processamento de adereços.
Propsattribute	`String`	`'props'`	Nome do atributo para definir adereços como JSON em uma tag de componente.
PropSslot	`String`	`'props'`	Usado para recuperar adereços passados para slot via `$slots.slotName.props` .
parseroptions	`Object`	`{recognizeSelfClosing: true}`	Passe as opções para `posthtml-parser` .
expressões	`Object`	`{}`	Passe as opções para `posthtml-expressions` .
plugins	`Array`	`[]`	Plugins posthtml para aplicar a cada componente analisado.
Matcher	`Object`	`[{tag: options.tagPrefix}]`	Matriz de objetos usados para combinar com tags.
attrsparSerrules	`Object`	`{}`	Regras adicionais para atributos plug -in de analisador.
estrito	`Boolean`	`true`	Alternar a exceção de arremesso.
Mergecustomizer	`Function`	`function`	Retorno de chamada para Lodash `mergeWith` para mesclar `options.expressions.locals` and adereços.
utilitários	`Object`	`{merge: _.mergeWith, template: _.template}`	Métodos de utilidade passados para `<script props>` .
Elementattributes	`Object`	`{}`	Objeto com nomes de tags e modificadores de função do `valid-attributes.js` .
SafeListattributes	`String[]`	`['data-*']`	Matriz de nomes de atributos a serem adicionados aos atributos válidos padrão.
Blocklistattributes	`String[]`	`[]`	Matriz de nomes de atributos para remover dos atributos válidos padrão.

Exemplo básico

Crie o componente:

 <!-- src/button.html -->
< button type =" button " class =" btn " >
  < yield > </ yield >
</ button >

Use -o:

 <!-- src/index.html -->
< html >
< body >
  < x-button type =" submit " class =" btn-primary " > Submit </ x-button >
</ body >
</ html >

Init posthtml:

 // index.js
const posthtml = require ( 'posthtml' )
const components = require ( 'posthtml-component' )
const { readFileSync , writeFileSync } = require ( 'node:fs' )

posthtml ( [
  components ( { root : './src' } )
] )
  . process ( readFileSync ( 'src/index.html' , 'utf8' ) )
  . then ( result => writeFileSync ( 'dist/index.html' , result . html , 'utf8' ) )

Resultado:

 <!-- dist/index.html -->
< html >
< body >
  < button type =" submit " class =" btn btn-primary " > Submit </ button >
</ body >
</ html >

Você deve ter notado que o componente src/button.html contém atributos type e class , e que também passamos esses atributos quando o usamos no src/index.html .

O resultado é que type foi substituído e class foi mesclada.

Por padrão, os atributos de class e style são mesclados, enquanto todos os outros atributos são substituídos. Você também pode substituir os atributos class e style , antecendendo override: para o atributo de classe.

Por exemplo:

 < x-button override:class =" btn-custom " > Submit </ x-button >

<!-- Output -->
< button type =" button " class =" btn-custom " > Submit </ button >

Todos os atributos que você passa para o componente serão adicionados ao primeiro nó do seu componente ou ao nó com um atributo chamado attributes , apenas se eles não forem definidos como props via <script props> ou se não são "atributos conhecidos" (consulte Valid-Attributes.js).

Você também pode definir quais atributos são considerados válidos, através das opções do plug -in.

Mais detalhes sobre isso na seção Atributos.

colheita

A tag <yield> é onde o conteúdo que você passa para um componente será injetado.

O plug-in configura o analisador posthtml para reconhecer tags de fechamento automático, para que você também possa apenas escrever como <yield /> .

Para a brevidade, usaremos tags de fechamento automático nos exemplos.

Filextension

Por padrão, o plug -in procura componentes com a extensão .html . Você pode alterar isso passando uma matriz de extensões para a opção fileExtension .

Ao usar uma matriz, se dois arquivos com o mesmo nome corresponderem a ambas as extensões, o arquivo que corresponde à primeira extensão na matriz será usado.

 const posthtml = require ( 'posthtml' )
const components = require ( 'posthtml-component' )

posthtml ( [
  components ( { 
    root : './src' , // contains layout.html and layout.md
    fileExtension : [ 'html' , 'md' ]
  } )
] )
  . process ( `<x-layout />` )
  . then ( result => console . log ( result . html ) ) // layout.html content

Mais exemplos

Veja também a pasta docs-src , onde você pode encontrar mais exemplos.

Você pode clonar este repo e executar npm run build para compilá -lo.

Características

Nomes de tags e x-tags

Você pode usar os componentes de várias maneiras, ou também uma combinação deles.

Se você deseja usar componentes como 'inclui', pode definir nomes de atributos de tag e src .

Usando nosso exemplo de componente de botão anterior, podemos definir os nomes da tag e atribuir e depois usá -lo assim:

 <!-- src/index.html -->
< html >
  < body >
    < component src = " button.html " >Submit</ component >
  </ body >
</ html >

Init posthtml:

 // index.js

require ( 'posthtml' ) (
  require ( 'posthtml-component' ) ( { 
    root : './src' , 
    tag : 'component' , 
    attribute : 'src' 
  } ) )
  . process ( /* ... */ )
  . then ( /* ... */ )

Se você precisar de mais controle sobre a correspondência de tags, poderá passar por uma variedade de fósforos ou objeto único via options.matcher :

 // index.js
const options = { 
  root : './src' , 
  matcher : [
    { tag : 'a-tag' } , 
    { tag : 'another-one' } , 
    { tag : new RegExp ( `^app-` , 'i' ) } ,
  ] 
} ;

require ( 'posthtml' ) ( require ( 'posthtml-component' ) ( options ) )
  . process ( /* ... */ )
  . then ( /* ... */ )

Com posthtml-components você não precisa especificar o nome do caminho quando estiver usando a sintaxe x-tag-name .

Configurar posthtml:

 // index.js
const options = { 
  root : './src' , 
  tagPrefix : 'x-'
} ;

require ( 'posthtml' ) ( require ( 'posthtml-component' ) ( options ) )
  . process ( /* ... */ )
  . then ( /* ... */ )

Usar:

 <!-- src/index.html -->
< html >
< body >
  < x-button > Submit </ x-button >
</ body >
</ html >

Se seus componentes estiverem em uma subpasta, você poderá usar dot para acessá -lo:

 <!-- src/components/forms/button.html -->
< x-forms .button > Submit </ x-forms .button >

Se seus componentes estiverem em um subpasto com vários arquivos, para evitar a gravação do nome principal do arquivo, você poderá usar index.html sem especificá-lo.

Aqui está um exemplo:

 <!-- src/components/modals/index.html -->
< x-modal .index > Submit </ x-modal .index >

<!-- You may omit "index" part since the file is named "index.html" -->
< x-modal > Submit </ x-modal >

Opções de analisador

Você pode passar opções para posthtml-parser via options.parserOptions .

 // index.js
const options = { 
  root : './src' , 
  parserOptions : { decodeEntities : true } 
} ;

require ( 'posthtml' ) ( require ( 'posthtml-component' ) ( options ) )
  . process ( 'some HTML' , options . parserOptions )
  . then ( /* ... */ )

Importante

As parserOptions que você passa para o plug-in também devem ser passadas no método process em seu código, caso contrário, sua compilação posthtml usará os padrões posthtml-parser e substituirão tudo o que você passou para posthtml-component .

Tags de fechamento automático

O plug-in suporta tags de fechamento automático por padrão, mas você precisa permitir que elas também no método process em seu código, passando recognizeSelfClosing: true no objeto Opções:

 // index.js
require ( 'posthtml' ) ( require ( 'posthtml-component' ) ( { root : './src' } ) )
  . process ( 'your HTML...' , { recognizeSelfClosing : true } )
  . then ( /* ... */ )

Se você não adicionar isso ao process , o Posthtml usará os padrões posthtml-parser e não suportará tags de componentes de fechamento automático. Isso resultará em tudo depois de uma tag de fechamento automático não ser produzido.

Várias pastas

Você tem controle total sobre onde existem seus arquivos de componentes. Depois de definir o caminho da raiz base dos seus componentes, você pode definir várias pastas.

Por exemplo, se sua raiz for ./src e você terá várias pastas onde tem seus componentes, por exemplo ./src/components e ./src/layouts , você pode configurar o plug -in abaixo:

 // index.js
const options = { 
  root : './src' , 
  folders : [ 'components' , 'layouts' ] 
} ;

require ( 'posthtml' ) ( require ( 'posthtml-component' ) ( options ) )
  . process ( /* ... */ )
  . then ( /* ... */ )

Namespaces

Com os namespaces, você pode definir um caminho raiz de nível superior para seus componentes.

Pode ser útil para lidar com temas personalizados, onde você define uma raiz de nível superior específica com uma raiz de fallback para quando um componente não é encontrado e uma raiz personalizada para substituir.

Isso torna possível criar estruturas de pastas como esta:

src (pasta raiz)
- components (pasta para componentes como modal, botão, etc.)
- layouts (pasta para componentes de layout, como layout de base, cabeçalho, rodapé, etc.)
- theme-dark (pasta namespace para tema-escuro)
  - components (pasta para componentes para o tema escuro)
  - layouts (pasta para componentes de layout para tema escuro)
- theme-light (pasta de espaço para nome para luz temática)
  - components (pasta para componentes para tema de luz)
  - layouts (pasta para componentes de layout para tema escuro)
- custom (pasta personalizada para substituir os temas do seu espaço para nome)
  - theme-dark (pasta personalizada para substituir o tema escuro)
    - components (pasta para componentes de substituição do tema escuro)
    - layouts (pasta para substituir componentes de layout do tema escuro)
  - theme-light (pasta personalizada para substituir o tema da luz)
    - components (pasta para componentes de substituição do tema escuro)
    - layouts (pasta para substituir componentes de layout do tema escuro)

E as opções seriam como:

 // index.js
const options = {
  // Root for component without namespace
  root : './src' ,
  // Folders is always appended in 'root' or any defined namespace's folders (base, fallback or custom)
  folders : [ 'components' , 'layouts' ] ,
  namespaces : [ {
    // Namespace name will be prepended to tag name (example <x-theme-dark::button>)
    name : 'theme-dark' ,
    // Root of the namespace
    root : './src/theme-dark' ,
    // Fallback root when a component is not found in namespace
    fallback : './src' ,
    // Custom root for overriding, the lookup happens here first
    custom : './src/custom/theme-dark'
  } , {
    // Light theme
    name : 'theme-light' ,
    root : './src/theme-light' ,
    fallback : './src' ,
    custom : './src/custom/theme-light'
  } , {
    /* ... */
  } ]
} ;

Use o espaço para nome do componente:

 <!-- src/index.html -->
< html >
< body >
  < x-theme-dark : :button >Submit</ theme-dark : :button >
  < x-theme-light : :button >Submit</ theme-light : :button >
</ body >
</ html >

Slots

Os componentes podem definir slots que podem ser preenchidos com conteúdo quando usados.

Por exemplo:

 <!-- src/modal.html -->
< div class = " modal " >
  < div class = " modal-header " >
    < slot : header />
  </ div >
  < div class = " modal-body " >
    < slot : body />
  </ div >
  < div class = " modal-footer " >
    < slot : footer />
  </ div >
</ div >

Use o componente:

 <!-- src/index.html -->
< x-modal >
  < fill : header >Header content</ fill : header >
  < fill : body >Body content</ fill : body >
  < fill : footer >Footer content</ fill : footer >
</ x-modal >

Resultado:

 <!-- dist/index.html -->
< div class =" modal " >
  < div class =" modal-header " >
    Header content
  </ div >
  < div class =" modal-body " >
    Body content
  </ div >
  < div class =" modal-footer " >
    Footer content
  </ div >
</ div >

Por padrão, o conteúdo do slot é substituído, mas você também pode prender ou anexar o conteúdo ou manter o conteúdo padrão por não preencher o slot.

Adicione algum conteúdo padrão no componente:

 <!-- src/modal.html -->
< div class = " modal " >
  < div class = " modal-header " >
    < slot : header >Default header</ slot : header >
  </ div >
  < div class = " modal-body " >
    < slot : body >content</ slot : body >
  </ div >
  < div class = " modal-footer " >
    < slot : footer >Footer</ slot : footer >
  </ div >
</ div >

 <!-- src/index.html -->
< x-modal >
  < fill : body prepend>Prepend body</ fill : body >
  < fill : footer append>content</ fill : footer >
</ x-modal >

Resultado:

 <!-- dist/index.html -->
< div class =" modal " >
  < div class =" modal-header " >
    Default header
  </ div >
  < div class =" modal-body " >
    Prepend body content
  </ div >
  < div class =" modal-footer " >
    Footer content
  </ div >
</ div >

Pilhas

Você pode empurrar o conteúdo para as pilhas nomeadas que podem ser renderizadas em outro lugar, como em outro componente. Isso pode ser particularmente útil para especificar qualquer JavaScript ou CSS exigido pelos seus componentes.

Primeiro, adicione uma tag <stack> ao seu HTML:

<!-- src/index.html -->
<html>
  <head>
+    <stack name="styles" />
  </head>
<body>
  <x-modal>
    <fill:header>Header content</fill:header>
    <fill:body>Body content</fill:body>
    <fill:footer>Footer content</fill:footer>
  </x-modal>
  
+  <stack name="scripts" />
</body>
</html>

Então, em componentes modais ou em qualquer outro componente infantil, você pode empurrar o conteúdo para esta pilha:

 <!-- src/modal.html -->
< div class = " modal " >
  < div class = " modal-header " >
    < slot : header />
  </ div >
  < div class = " modal-body " >
    < slot : body />
  </ div >
  < div class = " modal-footer " >
    < slot : footer />
  </ div >
</ div >

< push name = " styles " >
  < link href = " https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css " rel = " stylesheet " >
</ push >

< push name = " scripts " >
  < script src = " https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js " ></ script >
</ push >

A saída será:

 <!-- dist/index.html -->
< html >
< head >
  < link href =" https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css " rel =" stylesheet " >
</ head >
< body >
< div class =" modal " >
  < div class =" modal-header " >
    Header content
  </ div >
  < div class =" modal-body " >
    Body content
  </ div >
  < div class =" modal-footer " >
    Footer content
  </ div >
</ div >
< script src =" https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js " > </ script >
</ body >
</ html >

O atributo once permite pressionar o conteúdo apenas uma vez por ciclo de renderização.

Por exemplo, se você estiver renderizando um determinado componente dentro de um loop, poderá pressionar apenas o JavaScript e o CSS na primeira vez que o componente é renderizado.

Exemplo.

 <!-- src/modal.html -->
< div class =" modal " >
  <!-- ... -->
</ div >

<!-- The push content will be pushed only once in the stack -->

< push name =" styles " once >
  < link href =" https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css " rel =" stylesheet " >
</ push >

< push name =" scripts " once >
  < script src =" https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js " > </ script >
</ push >

Por padrão, o conteúdo é empurrado na pilha na ordem fornecida. Se você deseja prender o conteúdo para o início de uma pilha, pode usar o atributo prepend :

 < push name =" scripts " >
  <!-- This will be second -->
  < script src =" /example.js " > </ script >
</ push >

<!-- Later... -->
< push name =" scripts " prepend >
  <!-- This will be first -->
  < script src =" /example-2.js " > </ script >
</ push >

Adereços

props podem ser passados para componentes nos atributos HTML. Para usá -los em um componente, eles devem ser definidos na tag <script props> do componente.

Por exemplo:

 <!-- src/alert.html -->
< script props >
  module . exports = {
    title : props . title || 'Default title'
  }
</ script >
< div >
  {{ title }}
</ div >

Usar:

 < x-alert title =" Hello world! " />

A saída será:

 < div >
  Hello world!
</ div >

Se nenhum atributo title for passado para o componente, o valor padrão será usado.

 < x-my-alert />

A saída será:

 < div >
  Default title
</ div >

Inside <script props> Você tem acesso a adereços passados por meio de um objeto chamado props .

Aqui está um exemplo do que você pode fazer com ele:

 <!-- src/modal.html -->
< script props >
  module . exports = {
    title : props . title || 'Default title' , 
    size : props . size ? `modal- ${ props . size } ` : '' , 
    items : Array . isArray ( props . items ) ? props . items . concat ( [ 'first' , 'second' ] ) : [ 'first' , 'second' ]
  }
</ script >
< div class =" modal {{ size }} " >
  < div class =" modal-header " >
    {{ title }}
  </ div >
  < div class =" modal-body " >
    < each loop =" item in items " > < span > {{ item }} </ span > </ each >
  </ div >
</ div >

Usar:

 < x-modal 
  size =" xl " 
  title =" My modal title " 
  items =' ["third", "fourth"] ' 
  class =" modal-custom " 
/>

A saída será:

 < div class =" modal modal-custom modal-xl " >
  < div class =" modal-header " >
    My modal title
  </ div >
  < div class =" modal-body " >
    < span > first </ span >
    < span > second </ span >
    < span > third </ span >
    < span > fourth </ span >
  </ div >
</ div >

Observe como o atributo class que passamos para o componente é mesclado com o valor do atributo de class do primeiro nó dentro dele.

Você pode alterar como os atributos são mesclados com adereços globais definidos por meio de opções, passando uma função de retorno de chamada.

Por padrão, todos os adereços são escopo para o componente e não estão disponíveis para os componentes aninhados. No entanto, você pode mudar isso de acordo com sua necessidade.

Crie um componente:

 <!-- src/child.html -->
< script props >
  module . exports = {
    title : props . title || 'Default title'
  }
</ script >
< div >
  Prop in child: {{ title }}
</ div >

Crie um componente <x-parent> que use <x-child> :

 <!-- src/parent.html -->
< script props >
  module . exports = {
    title : props . title || 'Default title'
  }
</ script >
< div >
  Prop in parent: {{ title }}
  < x-child />
</ div >

Use -o:

 < x-parent title =" My title " />

A saída será:

 < div >
  Prop in parent: My title
  < div >
    Prop in child: Default title
  </ div >
</ div >

Como você pode ver, title no componente <x-child> renderiza o valor padrão e não o conjunto via <x-parent> .

Para mudar isso, devemos prender aware: ao nome do atributo para passar os adereços para os componentes aninhados.

 < x-parent aware:title =" My title " />

A saída agora será:

 < div >
  Prop in parent: My title
  < div >
    Prop in child: My title
  </ div >
</ div >

Atributos

Você pode passar quaisquer atributos para seus componentes e eles serão adicionados ao primeiro nó do seu componente ou ao nó com um atributo chamado attributes .

Se você está familiarizado com o vue.js, esse é o mesmo que o chamado atributo de queda. Ou, com o Laravel Blade, são atributos de componentes.

Por padrão, class e style são mesclados com o atributo class e style existente. Todos os outros atributos são substituídos por padrão.

Se você passar por um atributo definido como um prop , ele não será adicionado ao nó do componente.

Aqui está um exemplo:

 <!-- src/button.html -->
< script props >
  module . exports = {
    label : props . label || 'A button'
  }
</ script >
< button type =" button " class =" btn " >
  {{ label }}
</ button >

Use o componente:

 <!-- src/index.html -->
< x-button type =" submit " class =" btn-primary " label =" My button " />

Resultado:

 <!-- dist/index.html -->
< button type =" submit " class =" btn btn-primary " > My button </ button >

Se você precisar substituir os valores de atributo class e style (em vez de mesclá -los), basta prender override: para o nome do atributo:

 <!-- src/index.html -->
< x-button type =" submit " override:class =" btn-custom " label =" My button " />

Resultado:

 <!-- dist/index.html -->
< button type =" submit " class =" btn-custom " > My button </ button >

Se você deseja que os atributos sejam passados para um determinado nó, use o atributo attributes :

 <!-- src/my-component.html -->
< div class =" first-node " >
  < div class =" second-node " attributes >
    Hello world!
  </ div >
</ div >

Use o componente:

 <!-- src/index.html -->
< x-my-component class =" my-class " />

Resultado:

 <!-- dist/index.html -->
< div class =" first-node " >
  < div class =" second-node my-class " >
    Hello world!
  </ div >
</ div >

Você pode adicionar regras personalizadas para definir como os atributos são analisados-usamos Posthtml-ATTRS-Parser para lidar com eles.

Configurações de atributos avançados

Se as configurações padrão para atributos válidas não forem ideais para você, você poderá configurá -las conforme explicado abaixo.

 // index.js
const { readFileSync , writeFileSync } = require ( 'fs' )

const posthtml = require ( 'posthtml' )
const components = require ( 'posthtml-component' )

const options = {
  root : './src' ,  
  // Add attributes to specific tag or override defaults
  elementAttributes : {
    DIV : ( defaultAttributes ) => {
      /* Add new one */
      defaultAttributes . push ( 'custom-attribute-name' ) ;

      return defaultAttributes ;
    } ,
    DIV : ( defaultAttributes ) => {
      /* Override all */
      defaultAttributes = [ 'custom-attribute-name' , 'another-one' ] ;

      return defaultAttributes ;
    } ,
  } ,
  
  // Add attributes to all tags, use '*' as wildcard for attribute name that starts with
  safelistAttributes : [
    'custom-attribute-name' ,
    'attribute-name-start-with-*'
  ] ,

  // Remove attributes from all tags that support it
  blocklistAttributes : [
    'role'
  ]
}

posthtml ( components ( options ) )
  . process ( readFileSync ( 'src/index.html' , 'utf8' ) )
  . then ( result => writeFileSync ( 'dist/index.html' , result . html , 'utf8' ) )

Exemplos

Você pode trabalhar com <slot> e <fill> ou criar componente para cada bloco do seu componente e também pode suportar os dois.

Você pode encontrar um exemplo disso dentro docs-src/components/modal . A seguir, uma breve explicação de ambas as abordagens.

Usando slots

Suponhamos que queremos criar um componente para o Bootstrap Modal.

O código necessário é:

 <!-- Modal HTML -->
< div class =" modal fade " id =" exampleModal " tabindex =" -1 " aria-labelledby =" exampleModalLabel " aria-hidden =" true " >
  < div class =" modal-dialog " >
    < div class =" modal-content " >
      < div class =" modal-header " >
        < h1 class =" modal-title fs-5 " id =" exampleModalLabel " > Modal title </ h1 >
        < button type =" button " class =" btn-close " data-bs-dismiss =" modal " aria-label =" Close " > </ button >
      </ div >
      < div class =" modal-body " >
        ...
      </ div >
      < div class =" modal-footer " >
        < button type =" button " class =" btn btn-secondary " data-bs-dismiss =" modal " > Close </ button >
        < button type =" button " class =" btn btn-primary " > Save changes </ button >
      </ div >
    </ div >
  </ div >
</ div >

Há quase três blocos de código: o cabeçalho, o corpo e o rodapé.

Para que possamos criar um componente com três slots:

<!-- Modal component -->
<div class="modal fade" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
-        <h1 class="modal-title fs-5" id="exampleModalLabel">Modal title</h1>
+        <slot:header />
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
+        <slot:body />
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+        <slot:footer />
-        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

Podemos então usá -lo assim:

 < x-modal
  id =" exampleModal "
  aria-labelledby =" exampleModalLabel "
>
  < slot:header >
    < h5 class =" modal-title " id =" exampleModalLabel " > My modal </ h5 >
  </ slot:header >

  < slot:body >
    Modal body content goes here...
  </ slot:body >

  < slot:footer close =" false " >
    < button type =" button " class =" btn btn-primary " > Confirm </ button >
  </ slot:footer >
</ x-modal >

Componente de divisão em pequeno componente

Outra abordagem é dividir o componente em componentes menores, passando atributos para cada um deles.

Então, criamos um componente principal e, em seguida, três componentes menores diferentes:

 <!-- Main modal component -->
< div class =" modal fade " tabindex =" -1 " aria-hidden =" true " >
  < div class =" modal-dialog " >
    < div class =" modal-content " >
      < yield />
    </ div >
  </ div >
</ div >

 <!-- Header modal component -->
< div class =" modal-header " >
  < yield />
</ div >

 <!-- Body modal component -->
< div class =" modal-body " >
  < yield />
</ div >

 <!-- Footer modal component -->
< div class =" modal-footer " >
  < yield />
</ div >

E então você pode usá -lo assim:

 < x-modal
  id =" exampleModal "
  aria-labelledby =" exampleModalLabel "
>
  < x-modal .header >
    < h5 class =" modal-title " id =" exampleModalLabel " > My modal </ h5 >
  </ x-modal .header >

  < x-modal .body >
    Modal body content goes here...
  </ x-modal .body >

  < x-modal .footer >
    < button type =" button " class =" btn btn-primary " > Confirm </ button >
  </ x-modal .footer >
</ x-modal >

Como dito dessa maneira, você pode passar atributos para cada um deles, sem definir adereços.

Combine slots e pequeno componente

Você também pode combinar as duas abordagens e depois usá -las com slots ou com pequenos componentes:

 <!-- Modal -->
< div
  class =" modal fade "
  tabindex =" -1 "
  aria-hidden =" true "
  aria-modal =" true "
  role =" dialog "
>
  < div class =" modal-dialog " >
    < div class =" modal-content " >
      < if condition =" $slots.header?.filled " >
          < x-modal .header >
            < slot:header />
          </ x-modal .header >
      </ if >
      < if condition =" $slots.body?.filled " >
          < x-modal .body >
              < slot:body />
          </ x-modal .body >
      </ if >
      < if condition =" $slots.footer?.filled " >
          < x-modal .footer close =" {{ $slots.footer?.props.close }} " >
              < slot:footer />
          </ x-modal .footer >
      </ if >
      < yield />
    </ div >
  </ div > <!-- /.modal-dialog -->
</ div > <!-- /.modal -->

Agora você pode usar seu componente com slots ou com pequenos componentes.

Como você pode notar, usando slots, você já pode usar também seus pequenos componentes e, portanto, também pode passar adereços via $slots , com todos os props passados por slot e também verifique se o slot está preenchido.

Migração

Se você estiver migrando de posthtml-modules posthtml-extend e/ou posthtml, por favor siga as atualizações aqui: posthtml-componentes/edições/16.

Contribuindo

Consulte Diretrizes Posthtml e Guia de Contribuição.

Créditos

Graças a todos os colaboradores posthtml e especialmente aos colaboradores posthtml-extend e posthtml-modules , como parte do código é ~~roubado~~ inspirado nesses plugins. Agradecimentos enormes também ao motor do modelo Laravel Blade.

Expandir