Stage - Web Component โ
The Stage component can be used imported from:
Playground โ
Parameters โ
The Web component uses the <z-stage>
tag:
By default, all the parameters are optional or can be set in different, except for the ones marked as required
The parametrization of the component can be done with the following custom HTML params:
Name | Type | Description | Slot | A11y |
---|---|---|---|---|
content | string | The stage content | default | |
header | string | Header of the stage | header | |
config | string | Configuration of the stage | ||
image-src | string | URL of the image |
Events โ
This component has events. Check the documentation about how to use the events.
Name | Payload | Description |
---|
Slots โ
This component has slots. Check the documentation about how to use the slots.
Name | Tags | Description |
---|---|---|
default | span | Content of the stage |
header | span | Header of the stage |
actions | span | Actions of the stage |
Parameters use โ
content
โ
The content
attribute is inject the main quote or using the default
slot:
header
โ
The header
parameter is a string that defines the stage header or using the header
slot.
shape
โ
Or using a slotted z-shape
. No need to set the :flip
, it's automatically handled.
config
โ
The config
parameter is a string that defines the stage configuration. You can configure the alignment and the padding of the stage content.
left โ
The left
modifier is used to align the stage content to the left.
slim โ
The slim
modifier is used to reduce the padding of the stage content.
Image โ
image-src
โ
The image-src
parameter is a string that defines the stage image source for the safe-space
.
You can also use the images from the Zurich media images. Make sure you specify correctly the name of the image you want to display.
We can also use tne image
slot:
Actions โ
The content of the Stage
component is customizable. Check the stage anatomy guidelines for more details.
Also you can customize the background color of the stage component, using the --z-stage--bg
CSS custom property.
Browser support โ
Detected engine: ย
Chromium
Webkit
Gecko