0

我有一个要求，允许用户添加一种类型，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 控件一起正确浮动在页面上。

目前发生的情况是用户体验不是很直观，因为 apos-ui 控件只是相互重叠。

4

1 回答 1

1

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

于 2016-11-21T01:19:52.020 回答