Conversation Bubble#
Code#
content
Properties
Shape
Class Name
Flip Horizontal
Flip Vertical
Props
| name | type | default | description |
|---|
Shapes#
I am KTop!
I am NTop!
I am ASide!
I am Angled!
The bubbles are designed to work with the TINKA logotype. Their names come from how they are intended to be placed.
More shapes will come in the future versions.
Examples#
Image Fill with customShapeRenderer prop#
With customShapeRenderer, you can fully customize the SVG tag in the component.
<ConversationBubble
className="w-80"
shape={ConversationBubbleShape.NTop}
customShapeRenderer={({ d, viewBox }) => (
<svg
className="conversation-bubble-svg"
xmlns="http://www.w3.org/2000/svg"
viewBox={viewBox}
preserveAspectRatio="xMinYMin"
>
<defs>
<pattern id="img1" patternUnits="userSpaceOnUse" width="40" height="30">
<image
href="/images/placeholder-4-3.png"
x="0"
y="0"
width="40"
height="30"
/>
</pattern>
</defs>
<path d={d} fill="url(#img1)" />
</svg>
)}
/>Responsive Conversation Bubble#
Sometimes you might find yourself wanting to express yourself in the fashion of comic, but you don't know how long-form your speech will be.
smile-face YEE~
Properties
Tail Side
Props
| name | type | default | description |
|---|
Customisation#
exclamation-markcloseclosehappyclosecloseexclamation-mark
exclamation-markcloseclosebirthdayclosecloseexclamation-mark
exclamation-markcloseclosebirthdayclosecloseexclamation-mark
ACCESS
DENIED
DENIED