guide_en.md 1.7 KB
Usage
The Badge component is usually placed in the upper right corner of the content, so when used conventionally, please pass the main content as the default slot. Since the Badge is positioned relative to the main content, it will not affect the layout of the main content.
However, for some special components, such as Cell, the Badge may be placed in a specific position within the component. In this case, you can use the isInner attribute to position the Badge as an inner element, with the placement determined by the component itself. See the example for reference.
offsetY and offsetX
By default, the Badge component is positioned relative to the upper right corner of the main content, and the left and top offsets are half the width and height of the Badge, respectively. However, due to the uncertainty and complexity of the internal content, offsetY and offsetX can be used to adjust the position of the Badge based on the original position, in order to meet more requirements.
Leaf-shaped Corner Radius
When radius is set to leaf, the corner style of the Badge is leaf-shaped, and the direction of the leaves is associated with the current position.
Injecting CSS
The injClass parameter can be used to inject custom CSS class names (not limited to Tailwind CSS) into the Badge component, which allows for further customization of the component's appearance. For example, the example uses injClass to customize the background color and border of the Badge.
If the injected class name does not take effect, add a ! before the class name, as demonstrated in the Tailwind Important Modifier.