Question

我要求允许用户在widget中添加单一类型的area，这应该以网格的形式进行布局。窗口小部件本身包含一个值，该值通过使用bootstrap类来确定其宽度。这是小部件定义

// lib/modules/grid-item-widget/index.js

module.exports={
  extend: 'apostrophe-widgets',
  label: 'Grid Item',

  addFields: [
    {
      name: 'grid',
      type: 'select',
      choices:[
        {label:'10%',value:'col-md-2'}
        ,{label:'30%',value:'col-md-3'}
        ,{label:'50%',value:'col-md-6'}
        ,{label:'70%',value:'col-md-8'}
        ,{label:'100%',value:'col-md-12'}
      ]
    },
    {
      name: 'image',
      type: 'singleton',
      label: 'Presentation Image',
      widgetType: 'apostrophe-images',
      options: {
        limit: 1
      }
    }
  ]
};

这是html

//lib/modules/grid-item-widget/views/widget.html

<div class="col-xs-12 col-md-{{ data.widget.grid }}">
  {{
      apos.singleton(data.widget,'image','apostrophe-images',{edit:false})
  }}
</div>

问题是有很多标记包含作为区域项的一部分的apos-ui元素。我想让这些列成为区域包装器标记的一部分，这样元素就可以与apos-ui控件一起正确地浮动在页面上。

目前发生的情况是用户体验不是非常直观，因为用户控制只是相互重叠。

Answer 1

我建议您在项目级别考虑扩展apostrophe-areas/views/widget.html。在此模板中，您应该可以访问data.widget.grid，然后您可以使用它修改窗口小部件包装类。

如何使小部件包装器包括引导类

1 个答案: