<miso-related-questions>
The questions related to the page. Each question is a link to your answers page:
<miso-explore>
<miso-related-questions></miso-related-questions>
</miso-explore>
Containers
The element works in <miso-explore>.
To change the list, call useLayouts on the workflow of the unit, under the
role related_questions. client.ui.explore is the default unit, and
client.ui.explores reaches every unit on the page. Call it before start().
The page that a question opens comes from useLink, not from the layout. See
Related Questions.
Options
Your options are merged over the defaults, so set only what you change.
| Option | What it does |
|---|---|
className | The class of the list, in place of miso-list. |
templates.question | The markup of one question. |
Write the markup of a question
Give your own function as the question template. It returns the HTML of one
question. This one adds an arrow after the question:
function renderQuestion(layout, state, data) {
const { tagPair, escapeHtml } = layout.templates.helpers;
const [openTag, closeTag] = tagPair(layout, data);
return openTag +
`<span class="my-question-text">${escapeHtml(data.text)}</span>` +
'<span class="my-question-arrow" aria-hidden="true">→</span>' +
closeTag;
}
client.ui.explores.useLayouts({
related_questions: { templates: { question: renderQuestion } },
});
| Argument | What it holds |
|---|---|
layout | The layout. layout.templates.helpers has tagPair and escapeHtml. |
state | The state of the whole list. |
data | The question. data.text is its text. |
- Start with
tagPair. It returns the opening and closing tag of the item, which open your answers page and record clicks on it. Without them, a question does nothing when the reader selects it. - Escape the text with
escapeHtml. - Style your own classes in your CSS.
Next
- Explore — Related Questions: where a
question takes the reader, and a complete
questiontemplate. - Explore — Trending Questions: the same list, filled with the questions readers ask most.
- Explore — Events: run your own code when the reader picks a question.
