2021-02-03 21:41:50 +01:00
< template >
< div >
< active -element
: topic - title = "activeTopic && activeTopic.title"
: text = "activeTopic && activeTopic.fullText"
> < / a c t i v e - e l e m e n t >
2021-02-03 21:56:09 +01:00
< knowledge -base @select-topic ="activateTopic" > < / k n o w l e d g e - b a s e >
2021-02-03 21:41:50 +01:00
< / div >
< / template >
< script >
export default {
data ( ) {
return {
2021-02-03 21:56:09 +01:00
activeTopic : null
2021-02-03 21:41:50 +01:00
} ;
} ,
2021-02-03 21:56:09 +01:00
provide : {
topics : [
{
id : 'basics' ,
title : 'The Basics' ,
description : 'Core Vue basics you have to know' ,
fullText :
'Vue is a great framework and it has a couple of key concepts: Data binding, events, components and reactivity - that should tell you something!'
} ,
{
id : 'components' ,
title : 'Components' ,
description :
'Components are a core concept for building Vue UIs and apps' ,
fullText :
'With components, you can split logic (and markup) into separate building blocks and then combine those building blocks (and re-use them) to build powerful user interfaces.'
}
]
} ,
2021-02-03 21:41:50 +01:00
methods : {
activateTopic ( topicId ) {
2021-02-03 21:56:09 +01:00
this . activeTopic = this . topics . find ( topic => topic . id === topicId ) ;
}
}
2021-02-03 21:41:50 +01:00
} ;
< / script >
< style >
* {
box - sizing : border - box ;
}
html {
font - family : sans - serif ;
}
body {
margin : 0 ;
}
section {
box - shadow : 0 2 px 8 px rgba ( 0 , 0 , 0 , 0.26 ) ;
margin : 2 rem auto ;
max - width : 40 rem ;
padding : 1 rem ;
border - radius : 12 px ;
}
ul {
list - style : none ;
margin : 0 ;
padding : 0 ;
display : flex ;
justify - content : center ;
}
li {
border - radius : 12 px ;
border : 1 px solid # ccc ;
padding : 1 rem ;
width : 15 rem ;
margin : 0 1 rem ;
display : flex ;
flex - direction : column ;
justify - content : space - between ;
}
h2 {
margin : 0.75 rem 0 ;
text - align : center ;
}
button {
font : inherit ;
border : 1 px solid # c70053 ;
background - color : # c70053 ;
color : white ;
padding : 0.75 rem 2 rem ;
border - radius : 30 px ;
cursor : pointer ;
}
button : hover ,
button : active {
background - color : # e24d8b ;
border - color : # e24d8b ;
}
2021-02-03 21:56:09 +01:00
< / style >