Components
The Weavy UIKit is composed of components (interactive building blocks) that can be used individually or combined into larger and more complex solutions. Our components are just regular HTML elements, or custom elements to be precise, and you can use them like any other element.
Custom elements cannot have self-closing tags, e.g.
<wy-messenger />. You must always include both opening and closing tags:<wy-messenger></wy-messenger>.
Layout
All Weavy components are designed for optimal rendering in flex and grid layouts, with predefined, adaptable height and width with built-in scrolling when needed.
Always try to use a flex or grid layout for the parent container where the Weavy component is placed; otherwise, you may have to specify the height on the Weavy component instead (which is not optimal).
For components that feature reverse scrolling, such as <wy-chat>, <wy-copilot>, and <wy-messenger>, it's recommended to also define a height on the container and not let it grow with the content.
This will enable proper reverse infinite scrolling; otherwise, all messages may load at once when the component first renders. See the documentation on each component to get a full understanding of the layout.
Attributes and properties
Many components have properties that can be set using attributes. For example, the <wy-chat> component requires a uid attribute that maps to the uid property which identifies the corresponding app in the Weavy environment.
<wy-chat uid="test-chat"></wy-chat>
See the reference documentation for a complete list of components and their properties.
Features
Each component comes with its own set of features. Some of them are enabled by default. With the features attribute, you can enable additional features and/or disable default features.
Example: Enable additional features by listing them as a space-separated string:
<wy-chat features="receipts meetings"></wy-chat>
Example: Disable a feature by prefixing it with negative - in the features attribute.
<wy-chat features="-attachments"></wy-chat>
See the reference documentation for a list of available features on each component.
Events
You can listen for standard events such as click and mouseover as you normally would. However, it's important to note that many events emitted within a component's shadow root will be retargeted to the host element. This may result in, for example, multiple click handlers executing even if the user clicks just once. Furthermore, event.target will point to the host element, making things even more confusing.
As a result, you should almost always listen for custom events instead. For example, instead of listening to click to determine when a notification in the notifications component is toggled, listen to wy-link.
<wy-notifications></wy-notifications>
<script>
const notifications = document.querySelector("wy-notifications");
notifications.addEventListener("wy-link", (event) => {
// TODO: Evaluate event.detail and navigate to the correct page/view in your application
});
</script>
See the reference documentation for a complete list of components and their custom events.
Methods
Some components have methods you can call to trigger various behaviors. For example, you can use the markAllAsRead() method on the notifications component to mark all notifications as read.
<wy-notifications></wy-notifications>
<script>
const notifications = document.querySelector("wy-notifications");
notifications.markAllAsRead();
</script>
See the reference documentation for a complete list of components and their methods and arguments.
Slots
Some components use slots to accept content inside of them. The most common slot is the default slot, which includes any content inside the component that doesn't have a slot attribute.
For example, a button's default slot is used to populate its label.
<wy-button>Click me</wy-button>
Some components also have named slots. A named slot can be populated by adding a child element with the appropriate slot attribute. Notice how the button below has the slot="actions" attribute? This tells the component to place the button into its actions slot.
<wy-feed>
<wy-button slot="actions" kind="icon">
<wy-icon name="gear"></wy-icon>
</wy-button>
</wy-feed>
The location of a named slot doesn't matter. You can put it anywhere inside the component and the browser will move it to the right place automatically!
See the reference documentation for a complete list of components and their available slots.