WhisperComponents
are the individual elements, whether visible or not, that build up the UI of a Whisper in Olive Helps. While each type of component produces something different, they all have some attributes in common with each other, as described below:undefined
by defaultButton
, CheckBox
, Markdown
and etc.undefined
by defaultundefined
by default. layout
attribute is used to modify the spacing and size of a specific component. It's value is an object of the type LayoutOptions
defined below:flex
. flex
CSS shorthand property sets how a flex item will grow or shrink to fit the space available in its flex container. This property is a shorthand for the following CSS properties:'auto'
instead of px
or rem
. initial
width
and height
properties. It shrinks to its minimum size to fit the container, but does not grow to absorb any extra free space in the flex container. This is equivalent to setting "flex: 0 1 auto
".auto
width
and height
properties, but grows to absorb any extra free space in the flex container, and shrinks to its minimum size to fit the container. This is equivalent to setting "flex: 1 1 auto
".none
width
and height
properties. It is fully inflexible: it neither shrinks nor grows in relation to the flex container. This is equivalent to setting "flex: 0 0 auto
".<'flex-grow'>
flex-grow
of the flex item. Negative values are considered invalid. Defaults to 1
when omitted. (initial is 0
)<'flex-shrink'>
flex-shrink
of the flex item. Negative values are considered invalid. Defaults to 1
when omitted. (initial is 1
)<'flex-basis'>
flex-basis
of the flex item. A preferred size of 0
must have a unit to avoid being interpreted as a flexibility. Defaults to 0
when omitted. (initial is auto
)The default flex
value is same as CSS's initial value, which is:flex
Select
Component. WhisperComponentType
can look like, as well as a brief description. You can see more features and use cases in specific Whisper component pages.Autocomplete
- A text or dropdown that is configured with a list of options, which are suggested as autocompleted options to the end user.Box
- A container component for formatting other components.Breadcrumbs
- A list of Links that display a hierarchal relationship.Button
- A interactive element that allows users to take actions and can be configured to have different weights.Checkbox
- A boolean input that has a configurable label.CollapseBox
- A container component to allow content to be opened and closed with a click on interactive text. Can be configured to open up or down.DateTimeInput
- Input field that allows the user to provide date and time information. The field can be pre-populated by the Loop.Divider
- This component shows a horizontal divider to separate different kinds of content in a Whisper. This component has no options.DropZone
- Input that give a Loop a way to receive an uploaded file from the end user. Can be configured to reject certain files.Email
- Input field that allows the end user to provide an email address.Icon
- Renders requested icon, chosen from Material Icons. Icons can be placed inside of Box components.Link
- A configurable link that either can trigger a process in a Loop, or link to an external website.ListPair
- A component for presenting information where there is a bolded label on the left of a non-bolded value. Either is configurable to be copyable to the end user's clipboard.Markdown
- A basic component where Markdown text can be added, granting greater flexibility with information presentation.Message
- This component shows a banner in the Whisper that functions as a call to action to the user.Number
- Input field that allows the end user to provide a number within the parameters provided.Password
- Input field that allows the end user to provide a password. This field protects the end user by obscuring what they type. Showing each character as a solid black dot.Progress
- Progress components express an unspecified wait time or display the length of a process.RadioGroup
- A collection of options in which a user selects a single result. The result is selected by clicking one of the radio elements in the radio group. A selected value of -1 indicates that nothing is selected.RichTextEditor
- An input / editor that allows the end user to enter rich text, which is then output as Markdown.