@leafygreen-ui/inline-definition
v8.0.4
Published
leafyGreen UI Kit Inline Definition
Downloads
271,027
Keywords
Readme
Inline Definition
View on MongoDB.design
Installation
Yarn
yarn add @leafygreen-ui/inline-definition
NPM
npm install @leafygreen-ui/inline-definition
Example
<H2>
<InlineDefinition definition={shardDefinition}>Shard</InlineDefinition> your
cluster
</H2>
Output HTML
<h2 class="leafygreen-ui-1xwhtk1">
<span class="leafygreen-ui-1eprrtj" aria-describedby="tooltip-1">Shard</span>
your cluster
</h2>
<div>
<div class="leafygreen-ui-10b9mvh">
<div role="tooltip" id="tooltip-27" class="leafygreen-ui-10d84ei">
<div class="leafygreen-ui-qlb2bl">
<div class="leafygreen-ui-3uslxw"></div>
</div>
<p class="leafygreen-ui-1s8990i">
Sharding is a method for horizontally scaling across multiple replica
sets by breaking up large datasets (e.g. partitioning) into smaller
parts. Sharding is native to MongoDB.
</p>
</div>
</div>
</div>
Properties
| Prop | Type | Description | Default |
| ----------------------- | ---------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------ | --------- |
| definition
(Required) | React.ReactNode
| Content that describes the term. Will appear inside Tooltip. | |
| children
| string
| Text that will appear underlined | |
| className
| string
| className will be applied to the trigger element | |
| align
| 'top'
, 'bottom'
, 'left'
, 'right'
| Determines the preferred alignment of the tooltip relative to the component's children. | 'top'
|
| justify
| 'start'
, 'middle'
, 'end'
| Determines the preferred justification of the tooltip (based on the alignment) relative to the element passed to the component's children. | 'start'
|
| darkMode
| boolean
| Determines if the component will appear in dark mode. | false
|
| tooltipClassName
| string
| className to be applied to the tooltip element | |