#conditionals

:kitten: One of the nice things with the new conditional syntax in Kitten¹ is that you can have conditional styles in your components :)

¹ https://codeberg.org/kitten/app

#Kitten #SmallWeb #web #dev #js #css #styles #conditionals

Screenshot of code:

export default ({ SLOT, activeSection = '', autoHeading = true}) => html`
<${Application} layout='settings'>
<${Navigation} activeSection=${activeSection} />
<main id='content'>
<if ${autoHeading}>
<h2>${activeSection}</h2>
</if>
${SLOT}
</main>
</>

Screenshot of code:

// Application layout.
import Footer from './Footer.component.js'

export default ({ layout, SLOT }) => html`
<div id='application'>
${SLOT}
</div>

<${Footer} />

<style>
…

#application {
max-width: 920px;
margin-left: auto;
margin-right: auto;
}

<if ${layout==='settings'}>
#application {
display: grid;
grid-template-areas:
'navigation main '
'footer footer';
grid-template-rows: 1fr fit-content(100%);
grid-template-columns: fit-content(100%) 1fr;
}

/* On narrower screens, use one-column layout. */
@media screen and (max-width: 660px) {
#application {
grid-template-areas:
'navigation'
'main'
'footer';
}
}
</if>
</style>
`

Aral Balkan

3 months ago

Right, I just made the end tags for <then> and <else> optional so now you can also write your conditionals like this! :)

https://codeberg.org/kitten/app

#Kitten #SmallWeb #conditionals #markup

Screenshot of code:

<ul id='messages' @htmx:load='${js`
showPlaceholder = false
$el.scrollTop = $el.scrollHeight
`}'>
<if ${db.messages.length === 0}>
<then>
<li id='placeholder' x-show='showPlaceholder'>
No messages yet, why not send one?
</li>
<else>
${db.messages.map(message => html`<${Message} message=${message} />`)}
</if>
</ul>

Neverfadingwood

7 months ago

Fascinated by #Conditionals in English. I was an EFL teacher for 14 years, and was never happy with the way they were presented and taught. I hope to be able to suggest improvements in relation to this.