如何使小工具包裝包括引導程序類

我有一個要求，允許用戶在area中添加單個類型的widget，這應該以網格的形式進行佈局。小部件本身包含一個值，它使用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>

的問題是，有很多標記的含有者的UI元素的區域項目的一部分。我希望將這些列作爲區域包裝標記的一部分，以便元素可以與apos-ui控件一起正確地浮在頁面上。

此刻發生的事情是，用戶體驗不是很直觀，因爲使用者控件只是彼此重疊。

來源

2016-11-20 Fotis Paraskevopoulos

我建議看看在項目級別上擴展apostrophe-areas/views/widget.html。在這個模板中，您應該可以訪問data.widget.grid，然後您就可以使用它修改Widget包裝類。

來源

2016-11-21 01:19:52

你好亞歷克斯，這是我第一次嘗試，但它沒有做我想做的。 '撇號 - 地區/ area.html'和'撇號 - 地區/ widget.html'級聯。這意味着如果我重寫這兩個文件以包含'container'和'row'引導類，這些將在所有包含的小部件中找到。 // widget my-widget/views/widget.html {{apos.ingleton（data.widget，'images'，'撇號圖片'，{編輯：false}）}} 將導致以下hiearchy撇號小部件包裝（.container）撇號小部件（.row）撇號小部件包裝（.container） –

啊，偉大的一點。我可以看到如果您將其他小部件嵌套到網格小部件內部，這會變得複雜。目前還沒有其他選項可以讓人想起，但我相信有一些方法可能會覆蓋特定的核心模板以實現您要查找的行爲。 –

如何使小工具包裝包括引導程序類

回答

相關問題