Blocos Filhos - Conteúdo das respostas.md

Blocos Filhos - Conteúdo das respostas

Importante

Para utilizar esse bloco, é necessário verificar se o bloco pai a ser usado pode receber esse bloco como filho e quais são seus blocos filhos aceitos!

Blocos pais aceitos:

• yv-qa-content (documentação)
• yv-flex (documentação)

Blocos filhos aceitos:

• yv-comment (documentação)
• yv-user-image (documentação)
• yv-user-name (documentação)
• yv-date (documentação)
• yv-like-dislike-button (documentação)

Usabilidade

Nome do bloco

O bloco yv-qa-content-answer, tem como papel, retornar dados importantes sobre as respostas para seus filhos.

Propriedades (props)

Nenhum

Exemplo de uso:

// yourviews-custom.jsonc
"yv-qa-content": {
  "children": [
    "yv-qa-content-question", 
+   "yv-qa-content-answer"
  ]
},
"yv-qa-content-answer": {
  "children": ["yv-flex#question-row"]
},
"yv-flex#question-row": {
  "props": {
    "width": "100%",
    "direciton": "column",
    "className": "qa-flex-row"
  },
  "children": [
    "yv-flex#question-col-left", 
    "yv-flex#question-col-right"
  ]
},
"yv-flex#question-col-left": {
  "props": {
    "width": "5%",
    "className": "qa-flex-col-left"
  },
  "children": ["yv-user-image"]
},
"yv-flex#question-col-right": {
  "props": {
    "width": "95%",
    "direction": "column",
    "className": "qa-flex-col-right",
    "justifyContent": "center"
  },
  "children": [
    "yv-flex#question-row-1",
    "yv-comment",
    "yv-like-dislike-buttons"
  ]
},
"yv-flex#question-row-1": {
  "props": {
    "width": "30%",
    "className": "qa-flex-row-1"
  },
  "children": ["yv-user-name", "yv-date#diff"]
},
"yv-date#diff": {
  "props": {
    "showDifference": true
  }
},

.questionsAndAnswersAnswer {
  margin-left: 60px;
}

Visual do Componente

Pronto!