Footer
Footer represents a footer within a Spectrum container.
| install | yarn add @adobe/react-spectrum |
|---|---|
| added | 3.0.0 |
| usage | import {Footer} from '@adobe/react-spectrum' |
Example#
<Footer>© All rights reserved.</Footer><Footer>© All rights reserved.</Footer><Footer>
© All rights
reserved.
</Footer>Content#
The Footer component represents a footer within a Spectrum container
such as a Dialog. Footer provides no specific styling by
itself, but receives styling from the parent container. In addition,
Footer will be automatically placed within the container's layout
according to Spectrum guidelines.
See Dialog for examples of how to use the
Footer component in the context of a Spectrum container.
See MDN
for more information about the semantics of the footer element.
Props#
| Name | Type | Description |
children | ReactNode | Footer content. |
Layout
| Name | Type | Description |
flex | Responsive<string
| number
| boolean> | When used in a flex layout, specifies how the element will grow or shrink to fit the space available. See MDN. |
flexGrow | Responsive<number> | When used in a flex layout, specifies how the element will grow to fit the space available. See MDN. |
flexShrink | Responsive<number> | When used in a flex layout, specifies how the element will shrink to fit the space available. See MDN. |
flexBasis | Responsive<number | string> | When used in a flex layout, specifies the initial main size of the element. See MDN. |
alignSelf | Responsive<'auto'
| 'normal'
| 'start'
| 'end'
| 'center'
| 'flex-start'
| 'flex-end'
| 'self-start'
| 'self-end'
| 'stretch'> | Overrides the |
justifySelf | Responsive<'auto'
| 'normal'
| 'start'
| 'end'
| 'flex-start'
| 'flex-end'
| 'self-start'
| 'self-end'
| 'center'
| 'left'
| 'right'
| 'stretch'> | Specifies how the element is justified inside a flex or grid container. See MDN. |
order | Responsive<number> | The layout order for the element within a flex or grid container. See MDN. |
gridArea | Responsive<string> | When used in a grid layout, specifies the named grid area that the element should be placed in within the grid. See MDN. |
gridColumn | Responsive<string> | When used in a grid layout, specifies the column the element should be placed in within the grid. See MDN. |
gridRow | Responsive<string> | When used in a grid layout, specifies the row the element should be placed in within the grid. See MDN. |
|