변수 수 아우렐 리아의 슬롯 수

Question

다른 요소에 대한 아코디언 컨테이너처럼 작동 할 사용자 정의 요소를 만들고 싶습니다. 부트 스트랩 4 Collapse을 사용할 계획입니다. 슬롯을 사용하는 것만으로는 충분하지 않으므로 다양한 사용자 정의 요소를 배치 할 수 있기를 원합니다.

<accordion> 
    <first-custom-element slot="first-element"></first-custom-element> 
    <second-custom-element slot="second-element"></second-custom-element> 
    <third-custom-element slot="third-element"></third-custom-element> 
</accordion> 

건이며, 그렇게하지 :

예를 들어 내가 accordion.html에 3 개 개의 슬롯을 넣어 다음과 같이 사용할 것이다 아코디언에 배치 3 개 요소가있을 것이라는 점을 알고 있다면 응용 프로그램의 여러 페이지에서 사용할 수 있도록 좀 더 일반적이고 재사용 가능하게 만들고 싶기 때문에 몇 개의 요소가 아코디언 내부에 배치되어야하는지 알 수 있습니다. 내가 원하는 것은 <accordion> 태그 내부에있는 모든 것을 읽고이 요소들 각각에 대한 슬롯을 만드는 방법입니다. Aurelia에 그러한 기능이 있습니까? 아니면 사용자 정의 구현을 위해 가야합니까?

Answer 1

분할 아웃과 같이 전체 아코디언 요소에서 항목 :

accordion.html

<template> 
    <div id="accordion" role="tablist" aria-multiselectable="true"> 
     <slot></slot> 
    </div> 
</template> 

아코디언 item.html

<template bindable="panelTitle, headingId, itemId"> 
    <div class="panel panel-default"> 
    <div class="panel-heading" role="tab" id="${headingId}"> 
     <h4 class="panel-title"> 
      <a data-toggle="collapse" data-parent="#accordion" href="#${itemId}" aria-expanded="true" aria-controls="${itemId}"> 
      ${panelTitle} 
      </a> 
     </h4> 
    </div> 
    <div id="${itemId}" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="${headingId}"> 
     <slot></slot> 
    </div> 
    </div> 
</template> 

사용법

<template> 
    <require from="accordian.html"></require> 
    <require from="accordian-item.html"></require> 

    <accordian> 
     <accordian-item panel-title="Panel 1 Title" heading-id="headingOne" item-id="collapseOne"> 
      <accordian item 1 content> 
     </accordian-item> 
     <accordian-item panel-title="Panel 2 Title" heading-id="headingTwo" item-id="collapseTwo"> 
      <accordian item 2 content> 
     </accordian-item> 
    </accordian> 
</template> 

Answer 2

하나만 아코디언 필요한 경우, juste 당신의 template 한 slot 사용

<template> 
    <slot></slot> 
</template> 

이 당신의 내부 요소에 slot 속성을 넣지 마십시오 전체 내용이 <slot> 위치에 삽입됩니다.

<accordion> 
    <first-custom-element></first-custom-element> 
    <second-custom-element></second-custom-element> 
    <third-custom-element></third-custom-element> 
    ... 
</accordion>