2014-12-20 2 views
1

Jade에서 버튼 믹스를 만들고 싶습니다. 그러나 나는 html 요소를 내가 믹스 인을 적용 할 것인가에 대해 모른다. 버튼, 또는 입력.jade mixin의 동적 요소

제 질문은 믹스 인에서 요소를 선택할 수 있습니까? 예 : 이 A + 버튼 또는 입력 + 버튼

처럼 전화 나 믹스 인으로

mixin button(element, style, size, expand, fill, round, simple) 
    - var style = (typeof href === 'undefined') ? '' : style 
    - var fill = (typeof fill === 'undefined') ? '' : 'btn-fill' 
    - var expand = (typeof expand === 'undefined') ? '' : 'btn-block' 
    - var round = (typeof round === 'undefined') ? '' : 'btn-round' 
    - var simple = (typeof simple === 'undefined') ? '' : 'btn-simple' 
    case size 
     when "large" 
      - size = "btn-lg" 
     when "small" 
      - size = "btn-sm" 
     when "mini" 
      - size = "btn-xs" 
    element(href=href, role='button',class=["btn", "btn-" + style, size, fill, expand, round, simple])&attributes(attributes) 
     block 

인사

답변

5

자신에 의해 발견 요소를 삽입하는 요소 파라미터를 이용 :

#{element} solves the problem 
+0

여전히 Pug에서 작동합니다. :) – Tycho

0

SVG mixin을하고 있는데 via를 통해 다음과 같이하려고했습니다 :

mixin svg(icon) 
case icon 
    when "address" 
     include ../../assets/final/svg/addaddress.svg 
    when "billing" 
     include ../../assets/final/svg/billing.svg 

문제가 해결되지 않았습니다.

그런 다음이 시도 :

mixin svgaddress 
include ../../assets/final/svg/date.svg 

mixin svgbilling 
include ../../assets/final/svg/delete.svg 

mixin svg(icon) 
case icon 
    when "address" 
     +svgaddress 
    when "billing" 
     +svgbilling 

나는 실제로 그것을 유지 mixin 직접 아이콘을 추가 할 수 있다는 것을 알고 있지만, 구문 목적을 위해 내가 선호 :

+svg('address') 

내가 매우 유사 하나를 만들어 당신하지만, 간단한 버튼과 더 또한 SVG와 :

mixin abutton(desc,href,icon,classe) 
    a(href="#{href}",class="#{classe}") 
    case icon 
     when "address" 
     +svgaddress 

     span #{desc} 

입력

+abutton('myaccount','account.html','address','button outline grey')