Ant Design Blazor
Affix
Wrap Affix around another component to make it stick the viewport.
When To Use
- On longer web pages, its helpful for some content to stick to the viewport. This is common for menus and actions.
- Please note that Affix should not cover other content on the page, especially when the size of the viewport is small.
Examples
The simplest usage.
Set a TargetId for Affix, which listen to scroll event of target element (default is window).
Callback with affixed state.
Affix API#
| Property | Description | Type | Default Value |
|---|---|---|---|
| OffsetBottom | ParameterOffset from the bottom of the viewport (in pixels) | Int32 | -- |
| OffsetTop | ParameterOffset from the top of the viewport (in pixels) | Int32 | -- |
| TargetSelector | ParameterThe CSS selector that specifies the scrollable area DOM node | String | window |
| ChildContent | ParameterAdditional Content | RenderFragment | -- |
| OnChange | ParameterCallback for when Affix state is changed. A boolean indicating if the Affix is currently affixed is passed. | EventCallback<Boolean> | -- |
| Id | ParameterID for the component's HTML | String | Uniquely Generated ID |
| Class | ParameterSpecifies one or more class names for an DOM element. | String | -- |
| Style | ParameterSpecifies an inline style for a DOM element. | String | -- |
| RefBack | ParameterA ForwardRef instance. You can get a reference to the internal DOM by using AntDesign.ForwardRef.Current. |
ForwardRef | -- |