Spacer

Spacer is a wrapper component that adds controlled margins around a single element. It’s meant for isolating one item, not for managing layout between multiple elements.


                                                        
                                                        
                                                            <template>
                                                            <w-spacer bottom="xlarge" top="small">
                                                              <w-button label="Submit" />
                                                            </w-spacer>
                                                        </template>

Props

Name	Description	Type	Values
all	Sets all 4 margins of the spacer. This property has the lowest priority which means that it will be overwritten by any other prop.	string	null, none, small, medium, large, xlarge
horizontal	Sets left and right margin of the spacer. Can be overwritten by `left` and `right` properties.	string	null, none, small, medium, large, xlarge
vertical	Sets top and bottom margin of the spacer. Can be overwritten by `top` and `bottom` properties.	string	null, none, small, medium, large, xlarge
top	Set the top margin of the spacer	string	null, none, small, medium, large, xlarge
right	Set the right margin of the spacer	string	null, none, small, medium, large, xlarge
bottom	Set the bottom margin of the spacer	string	null, none, small, medium, large, xlarge
left	Set the left margin of the spacer	string	null, none, small, medium, large, xlarge

Slots

Name	Description
default	Default content slot