posthtml componentsダウンロードposthtml componentsソースコードのダウンロード

POSTHTMLコンポーネント

POSTHTMLのLaravel Blade-Inspiredコンポーネント

インストール

npm i -D posthtml-component

導入

このPOSTTMLプラグインは、HTMLテンプレートでコンポーネントを使用するためのHTMLに優しい構文を提供します。 Blade、React、Vueなどに精通している場合は、このプラグインがインスピレーションを受けているため、馴染みのある構文が見つかります。

このプラグインを使用して最初のposthtmlブートストラップUIも参照して、こちらのスターターテンプレートも確認してください。

オプション

名前	タイプ	デフォルト	説明
根	`String`	`'./'`	ルートパスコンポーネントを探す場所。
フォルダー	`String[]`	`['']`	`options.root`または定義された名前空間に関連するパスの配列。
fileextension	`String\|String[]`	`'html'`	探すコンポーネントファイル拡張子。
tagprefix	`String`	`'x-'`	タグプレフィックス。
タグ	`String\|Boolean`	`false`	コンポーネントタグ。 `options.attribute`で使用します。 booleanのみの`false` 。
属性	`String`	`'src'`	コンポーネントファイルへのパスを定義するために使用する属性。
名前空間	`String[]`	`[]`	名前空間ルートパス、フォールバックパス、およびカスタムオーバーライドパスの配列。
namespaceseparator	`String`	`'::'`	タグ名の名前空間セパレーター。
収率	`String`	`'yield'`	メインコンポーネントコンテンツを注入するためのタグ名。
スロット	`String`	`'slot'`	スロットのタグ名
埋める	`String`	`'fill'`	充填スロットのタグ名。
スロットパパレーター	`String`	`':'`	`<slot>`および`<fill>`タグの名前セパレーター。
スタック	`String`	`'stack'`	`<stack>`のタグ名。
押す	`String`	`'push'`	`<push>`のタグ名。
propsScriptAttribute	`String`	`'props'`	コンポーネントプロップを取得するための`<script props>`の属性。
propscontext	`String`	`'props'`	プロップを処理するためのスクリプト内のオブジェクトの名前。
propsattribute	`String`	`'props'`	プロップをコンポーネントタグでJSONとして定義する属性名。
propsslot	`String`	`'props'`	`$slots.slotName.props`を介してスロットに渡された小道具を取得するために使用されます。
パーセロプション	`Object`	`{recognizeSelfClosing: true}`	オプションを`posthtml-parser`に渡します。
式	`Object`	`{}`	オプションを`posthtml-expressions`に渡します。
プラグイン	`Array`	`[]`	すべての解析されたコンポーネントに適用するPOSTHTMLプラグイン。
マッチャー	`Object`	`[{tag: options.tagPrefix}]`	タグを一致させるために使用されるオブジェクトの配列。
attrsparserrules	`Object`	`{}`	属性の追加のルールパーサープラグイン。
厳しい	`Boolean`	`true`	例外スローを切り替えます。
メルグcustマイザー	`Function`	`function`	`options.expressions.locals`とPropsをマージするためのLodash `mergeWith`のコールバック。
ユーティリティ	`Object`	`{merge: _.mergeWith, template: _.template}`	`<script props>`に渡されたユーティリティメソッド。
ElementAttributes	`Object`	`{}`	`valid-attributes.js`のタグ名と関数修飾子を持つオブジェクト。
safelistattributes	`String[]`	`['data-*']`	デフォルトの有効な属性に追加する属性名の配列。
BlockListattributes	`String[]`	`[]`	デフォルトの有効な属性から削除する属性名の配列。

基本的な例

コンポーネントを作成します。

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

使用：

 <!-- 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' ) )

結果：

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

src/button.htmlコンポーネントにはtypeとclass属性が含まれていることに気付いたかもしれません。また、 src/index.htmlで使用したときにそれらの属性も渡しました。

その結果、 typeがオーバーライドされ、 classがマージされました。

デフォルトでは、 classとstyle属性がマージされ、他のすべての属性はオーバーライドされます。また、オーバーライドを準備することにより、 classとstyle属性をオーバーライドすることもできますoverride:クラス属性。

例えば：

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

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

コンポーネントに渡すすべての属性は、コンポーネントの最初のノードまたはattributesという属性を持つpropsを持つノードに追加されます。 <script props>または「既知の属性」ではない場合の場合のみ（有効-Attributes.jsを参照）。

プラグインのオプションを介して、どの属性が有効であると見なされるかを定義することもできます。

これの詳細については、属性セクション。

収率

<yield>タグは、コンポーネントに渡すコンテンツが挿入される場所です。

プラグインは、自己閉鎖タグを認識するようにPosthtmlパーサーを構成するため、 <yield />と書くこともできます。

簡潔にするために、例で自己閉鎖タグを使用します。

fileextension

デフォルトでは、プラグインは.html拡張子を持つコンポーネントを探します。これを変更すると、拡張機能の配列をfileExtensionオプションに渡すことができます。

配列を使用する場合、同じ名前の2つのファイルが両方の拡張機能と一致する場合、配列の最初の拡張子と一致するファイルが使用されます。

 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

その他の例

より多くの例を見つけることができるdocs-srcフォルダーも参照してください。

このリポジトリをクローンして、 npm run buildを実行してコンパイルできます。

特徴

タグ名とXタグ

コンポーネントを複数の方法で使用するか、それらの組み合わせも使用できます。

コンポーネントを「含む」として使用する場合は、タグとsrc属性名を定義できます。

以前のボタンコンポーネントの例を使用して、タグと属性名を定義し、次のように使用できます。

 <!-- 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 ( /* ... */ )

タグマッチングをさらに制御する必要がある場合は、 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 ( /* ... */ )

posthtml-componentsを使用するとx-tag-name Syntaxを使用しているときにパス名を指定する必要はありません。

セットアップposthtml：

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

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

使用：

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

コンポーネントがサブフォルダーにある場合は、 dotを使用してアクセスできます。

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

コンポーネントが複数のファイルを備えたサブフォルダーにある場合、メインファイル名の書き込みを避けるために、指定せずにindex.html使用できます。

これが例です：

 <!-- 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 >

パーサーオプション

options.parserOptionsを介してオプションをposthtml-parserに渡すことができます。

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

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

重要

プラグインに渡すparserOptionsもコードのprocessメソッドに渡す必要があります。そうしないと、PostThtMLビルドはposthtml-parserデフォルトを使用し、 posthtml-componentに渡したものをオーバーライドします。

自己閉鎖タグ

プラグインはデフォルトで自己閉鎖タグをサポートしていますが、 recognizeSelfClosing: trueを渡すことにより、コードのprocessメソッドでもそれらを有効にする必要があります。

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

これをprocessに追加しないと、POSTHTMLはposthtml-parserデフォルトを使用し、自己閉鎖コンポーネントタグをサポートしません。これにより、自己閉鎖タグが出力されていない後、すべてになります。

複数のフォルダー

コンポーネントファイルがどこに存在するかを完全に制御できます。コンポーネントのベースルートパスを設定したら、複数のフォルダーを設定できます。

たとえば、ルートが./srcで、コンポーネントがあるフォルダーが複数あります。たとえば、 ./src/components componentsや./src/layoutsなど、以下のようなプラグインを設定できます。

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

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

名前空間

名前空間を使用すると、コンポーネントへのトップレベルのルートパスを定義できます。

カスタムテーマを処理するのに役立ちます。カスタムテーマは、コンポーネントが見つからない場合のフォールバックルートとオーバーライドのカスタムルートを使用して、特定のトップレベルのルートを定義します。

これにより、次のようなフォルダー構造を作成できます。

src （ルートフォルダー）
- components （モーダル、ボタンなどのコンポーネント用のフォルダー）
- layouts （ベースレイアウト、ヘッダー、フッターなどのレイアウトコンポーネント用のフォルダー）
- theme-dark （テーマダーク用の名前空間フォルダー）
  - components （テーマダーク用のコンポーネント用のフォルダー）
  - layouts （ダークテーマ用のレイアウトコンポーネント用フォルダー）
- theme-light （テーマライト用の名前空間フォルダー）
  - components （ライトテーマ用のコンポーネント用フォルダー）
  - layouts （ダークテーマ用のレイアウトコンポーネント用フォルダー）
- custom （名前空間のテーマをオーバーライドするためのカスタムフォルダー）
  - theme-dark （ダークテーマをオーバーライドするためのカスタムフォルダー）
    - components （テーマダークのオーバーライドコンポーネント用のフォルダー）
    - layouts （ダークテーマのオーバーライドレイアウトコンポーネント用のフォルダー）
  - theme-light （ライトテーマをオーバーライドするためのカスタムフォルダー）
    - components （テーマダークのオーバーライドコンポーネント用のフォルダー）
    - layouts （ダークテーマのオーバーライドレイアウトコンポーネント用のフォルダー）

そして、オプションは次のようになります：

 // 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'
  } , {
    /* ... */
  } ]
} ;

コンポーネントネームスペースを使用します。

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

スロット

コンポーネントは、使用時にコンテンツで満たすことができるスロットを定義できます。

例えば：

 <!-- 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 >

コンポーネントを使用します。

 <!-- 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 >

結果：

 <!-- 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 >

デフォルトでは、スロットコンテンツが交換されますが、コンテンツをプリデントまたは追加することも、スロットに入らないことでデフォルトのコンテンツを保持することもできます。

コンポーネントにデフォルトのコンテンツを追加します。

 <!-- 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 >

結果：

 <!-- 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 >

スタック

別のコンポーネントのように、他の場所でレンダリングできる名前のスタックにコンテンツをプッシュすることができます。これは、コンポーネントに必要なJavaScriptまたはCSSを指定するのに特に役立ちます。

まず、HTMLに<stack>タグを追加します。

<!-- 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>

次に、モーダルコンポーネントまたは他の子コンポーネントで、このスタックにコンテンツをプッシュできます。

 <!-- 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 >

出力は次のとおりです。

 <!-- 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 >

once属性を使用すると、レンダリングサイクルごとに1回だけコンテンツをプッシュできます。

たとえば、ループ内で特定のコンポーネントをレンダリングする場合、コンポーネントが初めてレンダリングされるときにJavaScriptとCSSをプッシュすることをお勧めします。

例。

 <!-- 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 >

デフォルトでは、コンテンツは指定された順序でスタックでプッシュされます。スタックの先頭にコンテンツを準備する場合は、 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 >

小道具

props 、HTML属性のコンポーネントに渡すことができます。コンポーネントでそれらを使用するには、コンポーネントの<script props>タグで定義する必要があります。

例えば：

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

使用：

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

出力は次のとおりです。

 < div >
  Hello world!
</ div >

title属性がコンポーネントに渡されない場合、デフォルト値が使用されます。

 < x-my-alert />

出力は次のとおりです。

 < div >
  Default title
</ div >

内部<script props>は、 propsという名前のオブジェクトを介して渡された小道具にアクセスできます。

これがあなたがそれでできることの例です：

 <!-- 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 >

使用：

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

出力は次のとおりです。

 < 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 >

コンポーネントに渡されたclass属性が、内部の最初のノードのclass属性値とマージされる方法に注意してください。

コールバック関数を渡すことにより、オプションを介して定義されたグローバルなプロップとの属性をどのように統合するかを変更できます。

デフォルトでは、すべての小道具はコンポーネントにスコープされており、ネストされたコンポーネントは使用できません。ただし、これに応じて必要に応じて変更できます。

コンポーネントを作成します。

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

<x-child>を使用する<x-parent>コンポーネントを作成します。

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

使用：

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

出力は次のとおりです。

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

ご覧のとおり、 title <x-child>コンポーネントは、 <x-parent>を介した1つのセットではなく、デフォルト値をレンダリングします。

これを変更するには、小道具をネストされたコンポーネントに渡すために、属性名にaware:必要があります。

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

現在の出力は次のとおりです。

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

属性

コンポーネントに任意の属性を渡すことができ、コンポーネントの最初のノード、またはattributesという属性を持つノードに追加されます。

Vue.jsに精通している場合、これはいわゆるフォールスルー属性と同じです。または、Laravel Bladeを使用すると、コンポーネントアトリビュートです。

デフォルトでは、 classとstyle既存のclassとstyle属性と統合されます。他のすべての属性はデフォルトでオーバーライドされます。

propとして定義されている属性を渡すと、コンポーネントのノードに追加されません。

これが例です：

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

コンポーネントを使用します。

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

結果：

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

classとstyle属性値を（それらをマージする代わりに）オーバーライドする必要がある場合は、 override:属性名：

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

結果：

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

属性を特定のノードに渡す必要がある場合は、 attributes属性を使用します。

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

コンポーネントを使用します。

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

結果：

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

カスタムルールを追加して、属性の解析方法を定義することができます。POSTHTML-ATTRS-PARSERを使用してそれらを処理します。

高度な属性構成

有効な属性のデフォルト構成があなたに合っていない場合、以下で説明するようにそれらを構成することができます。

 // 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' ) )

例

<slot>および<fill>を使用するか、コンポーネントの各ブロックのコンポーネントを作成することもできます。また、両方をサポートすることもできます。

このInside docs-src/components/modalの例を見つけることができます。以下は、両方のアプローチの簡単な説明です。

スロットを使用します

Bootstrap Modalのコンポーネントを作成したいとします。

必要なコードは次のとおりです。

 <!-- 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 >

コードにはほぼ3つのブロックがあります：ヘッダー、ボディ、フッター。

そのため、3つのスロットでコンポーネントを作成できます。

<!-- 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>

その後、次のように使用できます。

 < 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 >

小さなコンポーネントでコンポーネントを分割します

別のアプローチは、コンポーネントをより小さなコンポーネントに分割し、それぞれに属性を渡すことです。

したがって、メインコンポーネントを作成し、次に3つの異なる小さなコンポーネントを作成します。

 <!-- 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 >

そして、あなたはこのようにそれを使用することができます：

 < 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 >

このように述べたように、小道具を定義することなく、属性をそれぞれに渡すことができます。

スロットと小さなコンポーネントを組み合わせます

両方のアプローチを組み合わせて、スロットまたは小さなコンポーネントで使用することもできます。

 <!-- 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 -->