الصفحة الرئيسية>المتعلقة بالبرمجة>مكونات الطرف الثالث
تنزيل

مكونات posttml

مكونات مستوحاة من شفرة لارافيل ل

تثبيت 

npm i -D posthtml-component

مقدمة

يوفر هذا المكون الإضافي POSTHTML بناء جملة صديق HTML لاستخدام المكونات في قوالب HTML الخاصة بك. إذا كنت معتادًا على Blade أو React أو Vue أو ما شابه ذلك ، فستجد أن بناء الجملة مألوفًا ، حيث أن هذا البرنامج المساعد مستوحى منه.

انظر أيضًا أول واجهة مستخدم PostTml Bootstrap باستخدام هذا البرنامج المساعد وتحقق أيضًا من قالب بداية هنا.

خيارات

اسم يكتب تقصير وصف
جذر String './' مسار الجذر حيث يبحث عن المكونات.
المجلدات String[] [''] مجموعة من المسارات بالنسبة options.root تجوم أو مساحات الأسماء المحددة.
filextension String|String[] 'html' ملحقات ملف المكون للبحث عن.
tagprefix String 'x-' بادئة علامة.
علامة String|Boolean false علامة مكون. استخدم مع options.attribute . منطقية false فقط.
يصف String 'src' سمة للاستخدام لتحديد المسار إلى ملف المكون.
مساحات الأسماء String[] [] مجموعة من مسارات جذر مساحة الاسم ، ومسارات العودة ، ومسارات التجاوز المخصص.
أسماء saceparator String '::' فاصل مساحة الاسم لأسماء العلامات.
أَثْمَر String 'yield' اسم العلامة لحقن محتوى المكون الرئيسي.
فتحة String 'slot' اسم العلامة للفتحات
يملأ String 'fill' اسم العلامة لملء فتحات.
Slotseparator 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 .
parseroptions Object {recognizeSelfClosing: true} تمرير خيارات إلى posthtml-parser .
تعبيرات Object {} تمرير خيارات إلى posthtml-expressions .
الإضافات Array [] POSTHTML Plugins لتطبيق على كل مكون محسّن.
مطابقة Object [{tag: options.tagPrefix}] مجموعة من الكائنات المستخدمة لمطابقة العلامات.
attrsparserrules Object {} قواعد إضافية للسمات المحلل المساعد.
حازم Boolean true تبديل استثناء رمي.
MergeCustomizer Function function رد اتصال ل lodash mergeWith لدمج options.expressions.locals المعالجة.
المرافق Object {merge: _.mergeWith, template: _.template} تم تمرير طرق الأداة المساعدة إلى <script props> .
elementattributes Object {} كائن مع أسماء العلامات ومعدلات الوظائف من valid-attributes.js .
Safelistattributes String[] ['data-*'] مجموعة من أسماء السمات لإضافتها إلى سمات صالحة افتراضية.
blocklistributes 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 posttml: 

 // 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> هي المكان الذي سيتم فيه حقن المحتوى الذي تنقله إلى مكون.

يقوم المكون الإضافي بتكوين محلل PostTML للتعرف على العلامات التي تضعف ذاتيًا ، بحيث يمكنك أيضًا الكتابة فقط على أنها <yield /> .

للإيجاز ، سوف نستخدم العلامات ذاتية الإرسال في الأمثلة.

filextension

بشكل افتراضي ، يبحث المكون الإضافي عن مكونات مع امتداد .html . يمكنك تغيير هذا عن طريق تمرير مجموعة من الامتدادات إلى خيار fileExtension .

عند استخدام صفيف ، إذا كان هناك ملفان بنفس الاسم يتطابقان مع كلا الامتدادات ، فسيتم استخدام الملف الذي يطابق الامتداد الأول في الصفيف. 

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

يمكنك استخدام المكونات بطرق متعددة ، أو أيضًا مزيج منها.

إذا كنت ترغب في استخدام المكونات كـ "تتضمن" ، فيمكنك تحديد أسماء سمات العلامات و src .

باستخدام مثال مكون الزر السابق لدينا ، يمكننا تحديد أسماء العلامة والسمات ثم استخدامها مثل هذا: 

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

init posttml: 

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

الإعداد posttml: 

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

خيارات المحلل

يمكنك تمرير خيارات إلى posthtml-parser عبر options.parserOptions . 

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

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

مهم

يجب أن يتم أيضًا تمرير parserOptions التي تنقلها إلى المكون الإضافي في طريقة process في الكود الخاص بك ، وإلا فإن بناء posthtml الخاص بك سوف يستخدم الافتراضيات posthtml-parser وسوف تتجاوز أي شيء تم نقله إلى posthtml-component .

علامات الانتقال الذاتي

يدعم المكون الإضافي علامات الإذاعة ذاتية بشكل افتراضي ، ولكن تحتاج إلى التأكد من تمكينها في طريقة process في الكود أيضًا ، من خلال تمرير recognizeSelfClosing: true في كائن الخيارات: 

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

إذا لم تقم بإضافة هذا إلى process ، فسيستخدم PostHTML الافتراضيات posthtml-parser ولن تدعم علامات المكونات ذاتية الإذاعة. سيؤدي هذا إلى كل شيء بعد عدم إخراج علامة الانتقال الذاتي.

مجلدات متعددة

لديك تحكم كامل في مكان وجود ملفات المكون الخاصة بك. بمجرد تعيين مسار الجذر الأساسي للمكونات الخاصة بك ، يمكنك بعد ذلك تعيين مجلدات متعددة.

على سبيل المثال ، إذا كان جذرك هو ./src ثم لديك العديد من المجلدات التي يكون لديك فيها مكوناتك ، على سبيل المثال ./src/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 المطلوبة من خلال مكوناتك.

أولاً ، أضف علامة <stack> إلى 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>

ثم ، في المكونات الوسيطة أو أي مكونات طفل أخرى ، يمكنك دفع المحتوى إلى هذا المكدس: 

 <!-- 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 دفع المحتوى مرة واحدة فقط لكل دورة عرض.

على سبيل المثال ، إذا كنت تقوم بتقديم مكون معين داخل حلقة ، فقد ترغب فقط في دفع 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 >

Inside <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-parent> الذي يستخدم <x-child> : 

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

لتغيير هذا ، يجب أن 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 ، هو مكون-attributes.

بشكل افتراضي ، يتم دمج 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> أو يمكنك إنشاء مكون لكل كتلة من المكون الخاص بك ، ويمكنك أيضًا دعم كلاهما.

يمكنك العثور على مثال على هذا داخل 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 >

هناك ما يقرب من ثلاثة كتلة من الكود: الرأس والجسم وتذييل.

لذلك يمكننا إنشاء مكون مع ثلاث فتحات: 

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

مكون تقسيم في مكون صغير

هناك طريقة أخرى تتمثل في تقسيم المكون في المكونات الأصغر ، حيث تمرير سمات لكل منها.

لذلك نقوم بإنشاء مكون رئيسي ثم ثلاثة مكونات أصغر مختلفة: 

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

يمكنك الآن استخدام المكون الخاص بك مع فتحات أو بمكونات صغيرة.

كما قد تلاحظ ، باستخدام فتحات ، يمكنك بالفعل استخدام مكوناتك الصغيرة ، وبالتالي يمكنك أيضًا تمرير الدعائم عبر $slots التي تم تمرير جميع props عبر فتحة ، وكذلك التحقق مما إذا كانت الفتحة تم ملؤها.

الهجرة

إذا كنت تهاجر من مواد posthtml-extend و/أو posthtml-modules فيرجى اتباع التحديثات هنا: posthtml-components/acments/16.

المساهمة

راجع إرشادات PoSTHTML ودليل المساهمة.

الاعتمادات

بفضل جميع المساهمين posttml وخاصةً للمساهمين في الموسيقات posthtml-extend و posthtml-modules ، كجزء من الكود سرقت مستوحاة من هذه الإضافات. شكر كبير أيضًا لمحرك قالب Blade Laravel.

يوسع
معلومات إضافية
تطبيقات ذات صلة
نوصي لك
أخبار ذات صلة الكل