atomic-smart-snippet
atomic-smart-snippet
This is for:
DeveloperThe atomic-smart-snippet
component displays the excerpt of a document that would be most likely to answer a particular query.
You can style the snippet by inserting a template element as follows:
<atomic-smart-snippet>
<template>
<style>
b {
color: blue;
}
</style>
</template>
</atomic-smart-snippet>
Properties
Property | Attribute | Description | Type | Default |
---|---|---|---|---|
|
|
When the answer is partly hidden, how much of its height (in pixels) should be visible. |
|
|
|
|
The heading level to use for the question at the top of the snippet, from 1 to 5. |
|
|
|
|
The maximum height (in pixels) a snippet can have before the component truncates it and displays a "show more" button. |
|
|
|
|
Sets the style of the snippet. Example:
|
|
Shadow Parts
Part | Description |
---|---|
|
The container displaying the full document excerpt. |
|
The body of the smart snippet, containing the truncated answer and the show more or show less button. |
|
The feedback banner underneath the source. |
|
The wrapper around the buttons after the inquiry. |
|
The button allowing the end user to signal that the excerpt wasn’t useful. |
|
The button a user can press to provide detailed feedback. |
|
The message asking the end user to provide feedback on whether the excerpt was useful. |
|
A wrapper around the feedback inquiry and the feedback buttons. |
|
The button allowing the end user to signal that the excerpt was useful. |
|
The message thanking the end user for providing feedback. |
|
The wrapper around the 'thank you' message and feedback button. |
|
The footer underneath the answer. |
|
The header displaying the question that is answered by the found document excerpt. |
|
The show less button. |
|
The show more button. |
|
The wrapper of the entire smart snippet. |
|
The title of the document the excerpt is from. |
|
The URL to the document the excerpt is from. |
|
The container displaying only part of the answer. |