javascript - 如何创建pugjs组件?

标签 javascript pug tailwind-css

是否有可能创建 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 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

关于javascript - 如何创建pugjs组件?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/65848314/

相关文章:

css - 多行文本元素上的左边框倾斜

nuxt.js - PurgeCSS 忽略 whitelistPatterns 中的正则表达式并删除 TailwindCSS 类(在 NuxtJS 上)

javascript - 将 jQuery 元素附加到包含 html 的字符串

mysql - 如何将mysql数据渲染到jade文件?

javascript - 带有 Jade 和 Express 的 Angular.js - 数据绑定(bind)不起作用

javascript - TailwindCss 固定导航栏

javascript - 数据表显示 :DataTables warning: table id=userdetails - Requested unknown parameter '1' for row 0, 第 1 列

Javascript: "else if"语句有限制吗?

javascript - 有没有办法为这 3 个事件设置一个事件处理程序?

intellij-idea - Intellij IDEA 中对 Pug 模板引擎的支持