CODEWITHSUNDEEP
variablesdynamicelementpug
user2030592
user2030592

Reputation: 417

Dynamic element in jade mixin

I'd like to create a button mixin in Jade. However I dont know on which html elements I'll apply those mixin, e.g. a, button or input.

My question: is it possible to choose the element from a mixin? e.g. calling it like this a+button or input+button

or using a element parameter to insert the element with the mixin

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

Greetings

Upvotes: 3

Views: 1300

Answers (2)

Ruben Marcus
Ruben Marcus

Reputation: 338

I'm doing an SVG mixin and was trying to do via includes like:

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

It didn't work it out.

Then tried this:

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

I know that I can actually add the icons directly by it mixins, but for a syntax purpose I prefer:

+svg('address')

I made one very similar to yours but more as a simple button and also with svg:

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

      span #{desc}

Input

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

Upvotes: 0

user2030592
user2030592

Reputation: 417

Found out by myself:

#{element} solves the problem

Upvotes: 7

Related Questions