mirror of
https://github.com/element-plus/element-plus.git
synced 2026-03-13 07:51:17 +08:00
b171632d4e
* feat(components): [affix] implement append-to-body * feat: change append-to-body to teleported and append-to * test: optimize affix teleport case * Update packages/components/affix/src/affix.ts Co-authored-by: rzzf <cszhjh@gmail.com> * Update packages/components/affix/src/affix.vue Co-authored-by: rzzf <cszhjh@gmail.com> * Update packages/components/affix/src/affix.vue Co-authored-by: rzzf <cszhjh@gmail.com> * Update packages/components/affix/src/affix.vue Co-authored-by: btea <2356281422@qq.com> * Update docs/en-US/component/affix.md Co-authored-by: btea <2356281422@qq.com> * Update docs/en-US/component/affix.md Co-authored-by: btea <2356281422@qq.com> * chore: update the affix.md format --------- Co-authored-by: rzzf <cszhjh@gmail.com> Co-authored-by: btea <2356281422@qq.com>
2.9 KiB
2.9 KiB
title, lang
| title | lang |
|---|---|
| Affix | en-US |
Affix
Fix the element to a specific visible area.
Basic Usage
Affix is fixed at the top of the page by default.
:::demo You can set offset attribute to change the offset top，the default value is 0.
affix/basic
:::
Target Container
You can set target attribute to keep the affix in the container at all times. It will be hidden if out of range.
:::demo Please notice that the container avoid having scrollbar.
affix/target
:::
Fixed Position
The affix component provides two fixed positions: top and bottom.
:::demo You can set position attribute to change the fixed position, the default value is top.
affix/fixed
:::
API
Attributes
| Name | Description | Type | Default |
|---|---|---|---|
| offset | offset distance | ^[number] | 0 |
| position | position of affix | ^[enum]'top' | 'bottom' |
top |
| target | target container (CSS selector) | ^[string] | — |
| z-index | z-index of affix |
^[number] | 100 |
| teleported ^(2.13.0) | whether affix element is teleported, if true it will be teleported to where append-to sets |
^[boolean] | false |
| append-to ^(2.13.0) | which element the affix element appends to | ^[CSSSelector] / ^[HTMLElement] | body |
Events
| Name | Description | Type |
|---|---|---|
| change | triggers when fixed state changed | ^[Function](fixed: boolean) => void |
| scroll | triggers when scrolling | ^[Function](value: { scrollTop: number, fixed: boolean }) => void |
Slots
| Name | Description |
|---|---|
| default | customize default content |
Exposes
| Name | Description | Type |
|---|---|---|
| update | update affix state manually | ^[Function]() => void |
| updateRoot | update rootRect info | ^[Function]() => void |