ウィジェットラッパーの作成方法ブートストラップクラスを含む

Question

の1つのタイプをグリッドの形でレイアウトする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 
     } 
    } 
    ] 
}; 

であり、これは

//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要素が含まれているマークアップがたくさんあるということであるhtmlです。そして、これらの列をエリアラッパーマークアップの一部にしたいので、要素がapos-uiコントロールとともに適切にページ上に浮かびます。

現時点では、apos-uiコントロールが互いにオーバーラップするため、ユーザーエクスペリエンスはあまり直感的ではありません。

Answer 1

プロジェクトレベルでapostrophe-areas/views/widget.htmlを延長することをお勧めします。このテンプレートでは、data.widget.gridにアクセスする必要があります。そうすれば、ウィジェットラッパークラスを変更することができます。