如何创建 pugjs 组件?
How to create pugjs components?
是否可以创建 pugjs 组件,我可以在其中调用组件 x-button Sign In
组件将如下所示
button(class="py-3 px-8 rounded-lg inline-flex justify-center items-center font-semibold text-base leading-6 tracking-wide") #{text}
类似这个概念Laravel component
组件的 Pug 等价物是 template inheritance and includes。包含适用于您的用例:
//- includes/button.pug
button(class="py-3 px-8 rounded-lg inline-flex justify-center items-center font-semibold text-base leading-6 tracking-wide") #{text}
//- some-page.pug
//- index.pug
doctype html
html
head
body
- var text = 'some-button-text'
include includes/button.pug
这就是 Pug mixins 的用途:
// declare the mixin
mixin x-button
button.py-3.px-8.rounded-lg.inline-flex.justify-center.items-center.font-semibold.text-base.leading-6.tracking-wide
if block
block
// use the mixin
+x-button Sign In
是否可以创建 pugjs 组件,我可以在其中调用组件 x-button Sign In
组件将如下所示
button(class="py-3 px-8 rounded-lg inline-flex justify-center items-center font-semibold text-base leading-6 tracking-wide") #{text}
类似这个概念Laravel component
组件的 Pug 等价物是 template inheritance and includes。包含适用于您的用例:
//- includes/button.pug
button(class="py-3 px-8 rounded-lg inline-flex justify-center items-center font-semibold text-base leading-6 tracking-wide") #{text}
//- some-page.pug
//- index.pug
doctype html
html
head
body
- var text = 'some-button-text'
include includes/button.pug
这就是 Pug mixins 的用途:
// declare the mixin
mixin x-button
button.py-3.px-8.rounded-lg.inline-flex.justify-center.items-center.font-semibold.text-base.leading-6.tracking-wide
if block
block
// use the mixin
+x-button Sign In