Skip to content

Instantly share code, notes, and snippets.

@q42jaap

q42jaap/slots-index.html

Last active January 14, 2021 21:06
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save q42jaap/364ac40c8de3b1dabff2b0464aa2a739 to your computer and use it in GitHub Desktop.
Save q42jaap/364ac40c8de3b1dabff2b0464aa2a739 to your computer and use it in GitHub Desktop.
Download ZIP
TIL vue v3
Raw
slots-index.html
<html>
<body>
<div id="app">
<expander v-slot="{isExpanded, toggle}" :initial-expanded="false">
<dl>
<dt class="toggler" :class="{expanded: isExpanded}" v-on:click="toggle">Name</dt>
<dd v-if="isExpanded">
Description
</dd>
</dl>
</expander>
</div>
</body>
</html>
Raw
slots-inline-component.vue
<template>
<slot v-bind="{isExpanded, toggle}"></slot>
</template>
<script lang="ts">
export default defineComponent({
props: ['initialExpanded'],
data() {
return {
isExpanded: this.initialExpanded,
};
},
methods: {
toggle() {
this.isExpanded = !this.isExpanded;
},
},
});
</script>
<style scoped lang="scss">
// This can be scoped even though the class is set in the slot.
.toggler.expanded {
}
</style>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment