🤝Attributes

Writing attributes is very straight-forward. Simply put them in parentheses directly behind the element's name. You can assign an attribute any printable expression you want.

Corgi

a(href="https://github.com/mavolin/corgi") Corgi's GitHub

HTML

<a href="https://github.com/mavolin/corgi">Corgi's GitHub</a>

To write boolean attributes omit the value or set it to a boolean:

Corgi

button(disabled) Click me!
button(disabled=true) Click me!
- b := false
button(disabled=b) Click me!

HTML

<button disabled>Click me!</button>
<button disabled>Click me!</button>

Attributes can even span multiple lines.

Corgi

input(
  type="checkbox",
  name="agreement",
  checked,
)

HTML

<input
  type="checkbox"
  name="agreement"
  checked
>

Classes and IDs

Classes and IDs, being incredibly common, even get their own short form.

Corgis are smart doggos! Corgi will combine multiple class attributes and short forms into a single class attribute. This does not work for other attributes.

Corgi

a.foo#bar(class="foobar", class="fooz baz") Incredible!

HTML

<a class="foo foobar fooz baz" id="bar">Incredible!</a>

The &-Operator

One of the features that sets corgi apart from other template engines is its &-operator.

You can use it to add an attribute to the element from its body. This is super useful, if your attribute is conditional:

Corgi

func Button(disabled bool)

button.bar
  if disabled
    &.foo(disabled)
  > Click me

HTML—true

<!-- Button(true) -->

<button class="bar foo" disabled>


    Click me!
</button>

HTML—false

<!-- Button(false) -->

<button class="bar">


    Click me!
</button>

You can only place the &-operator before you write text or another element to the element's body. If you don't, the compiler will complain:

func Example()

button
  > Click me!
  &(disabled)

The above won't compile:

error: use of & after writing to element's body
  > example.corgi:5:3
  |
3 | button
  | ~~~~~~ in this element
4 |   > Click me!
  |   ~~~~~~~~~~~ you wrote an arrow block here
5 |   &(disabled)
  |   ^ so you cannot place an & here
suggestion: you can only use the & operator before you write to the body of an element.

The div Shorthand

divs are incredibly common. Therefore, as long as your div has at least one class or an id, you can write .foo or #bar to produce a div.

Corgi

div.foo#bar All
.foo#bar the
#bar.foo same

HTML

<div class="foo" id="bar">All</div>
<div class="foo" id="bar">the</div>
<div class="foo" id="bar">same</div>