-
Notifications
You must be signed in to change notification settings - Fork 141
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(comp:*): container is supported for all overlay related componen…
…ts (#1122)
- Loading branch information
Showing
131 changed files
with
716 additions
and
575 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,5 +1,30 @@ | ||
<script setup lang="ts"> | ||
import { ref } from 'vue' | ||
const open = ref(false) | ||
</script> | ||
|
||
<template> | ||
<CdkPortal target="ix-container"> | ||
<div>Portal</div> | ||
<IxButton @click="open = !open">Open Modal</IxButton> | ||
<CdkPortal target="body"> | ||
<div v-if="open" class="portal-modal"> | ||
<p>Hello modal!</p> | ||
<IxButton @click="open = false">Close</IxButton> | ||
</div> | ||
</CdkPortal> | ||
</template> | ||
|
||
<style scoped> | ||
.portal-modal { | ||
position: fixed; | ||
z-index: 1000; | ||
top: 30%; | ||
left: 50%; | ||
width: 300px; | ||
margin-left: -150px; | ||
padding: 48px; | ||
border-radius: 4px; | ||
background-color: #fff; | ||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05); | ||
} | ||
</style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,10 +1,10 @@ | ||
--- | ||
order: 2 | ||
order: 1 | ||
title: | ||
zh: 禁止传送 | ||
en: Disabled | ||
--- | ||
|
||
## zh | ||
|
||
`disabled` 设置为true可以禁止传送,直接以 `v-dom` 的上下文进行渲染。 | ||
`disabled` 设置为 `true` 可以禁止传送,直接在当前 `DOM` 中进行渲染。 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,16 +1,33 @@ | ||
<template> | ||
<CdkPortal target="ix-container" :disabled="disabled"> | ||
<div>Portal</div> | ||
</CdkPortal> | ||
<IxButton @click="handleDisable">Disabled</IxButton> | ||
</template> | ||
|
||
<script setup lang="ts"> | ||
import { ref } from 'vue' | ||
const open = ref(false) | ||
const disabled = ref(false) | ||
</script> | ||
|
||
const handleDisable = () => { | ||
disabled.value = !disabled.value | ||
<template> | ||
<IxSpace> | ||
<IxButton @click="open = !open">Open Modal</IxButton> | ||
<IxButton @click="disabled = !disabled">Disabled</IxButton> | ||
</IxSpace> | ||
<CdkPortal :disabled="disabled" target="body"> | ||
<div v-if="open" class="portal-modal"> | ||
<p>Hello modal!</p> | ||
<IxButton @click="open = false">Close</IxButton> | ||
</div> | ||
</CdkPortal> | ||
</template> | ||
|
||
<style scoped> | ||
.portal-modal { | ||
position: fixed; | ||
z-index: 1000; | ||
top: 30%; | ||
left: 50%; | ||
width: 300px; | ||
margin-left: -150px; | ||
padding: 48px; | ||
border-radius: 4px; | ||
background-color: #fff; | ||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05); | ||
} | ||
</script> | ||
</style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,11 +1,34 @@ | ||
<script setup lang="ts"> | ||
import { ref } from 'vue' | ||
const open = ref(false) | ||
const container = document.createElement('div') | ||
container.classList.add('portal-element-demo-container') | ||
document.body.appendChild(container) | ||
</script> | ||
|
||
<template> | ||
<IxButton @click="open = !open">Open Modal</IxButton> | ||
<CdkPortal :target="container"> | ||
<div>Portal</div> | ||
<div v-if="open" class="portal-modal"> | ||
<p>Hello modal!</p> | ||
<IxButton @click="open = false">Close</IxButton> | ||
</div> | ||
</CdkPortal> | ||
</template> | ||
|
||
<script setup lang="ts"> | ||
const container = document.createElement('div') | ||
container.classList.add('custom-container') | ||
document.body.appendChild(container) | ||
</script> | ||
<style scoped> | ||
.portal-modal { | ||
position: fixed; | ||
z-index: 1000; | ||
top: 30%; | ||
left: 50%; | ||
width: 300px; | ||
margin-left: -150px; | ||
padding: 48px; | ||
border-radius: 4px; | ||
background-color: #fff; | ||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2); | ||
} | ||
</style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,12 +1,30 @@ | ||
<template> | ||
<CdkPortal target="ix-container" :load="load"> | ||
<div>Portal</div> | ||
</CdkPortal> | ||
<IxButton @click="load = !load">Load</IxButton> | ||
</template> | ||
|
||
<script setup lang="ts"> | ||
import { ref } from 'vue' | ||
const load = ref(false) | ||
const open = ref(false) | ||
</script> | ||
|
||
<template> | ||
<IxButton @click="open = !open">Open Modal</IxButton> | ||
<CdkPortal target=".portal-load-demo-container" :load="open"> | ||
<div v-if="open" class="portal-modal portal-modal-lazy-load"> | ||
<p>Hello modal!</p> | ||
<IxButton @click="open = false">Close</IxButton> | ||
</div> | ||
</CdkPortal> | ||
</template> | ||
|
||
<style scoped> | ||
.portal-modal { | ||
position: fixed; | ||
z-index: 1000; | ||
top: 30%; | ||
left: 50%; | ||
width: 300px; | ||
margin-left: -150px; | ||
padding: 48px; | ||
border-radius: 4px; | ||
background-color: #fff; | ||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05); | ||
} | ||
</style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,13 +1,11 @@ | ||
## API | ||
|
||
`@idux/cdk/popper` 对 `Teleport` 进行了简单的封装. | ||
|
||
### CdkPortal | ||
|
||
#### PortalProps | ||
|
||
| 名称 | 说明 | 类型 | 默认值 | 备注 | | ||
| 名称 | 说明 | 类型 | 默认值 | 备注 | | ||
| --- | --- | --- | --- | --- | | ||
| `disabled` | 是否禁用传送 | `boolean` | - | - | | ||
| `load` | 是否立即加载节点 | `boolean` | `true` | 传入 `false` 可以懒加载节点 <br />节点加载后,再修改此值将不再生效。 | | ||
| `target` | 被传送的目标元素 | `string \| HTMLElement \| () => string \| HTMLElement` | - | 如果传入一个元素,组件直接传送到该元素上 <br /> 如果是一个字符串,会判断是否可以通过此字符串可以找到相应元素,若找到,则直接插入该元素下<br /> 反之会在 `body` 的最后一个元素上创建元素,并将组件传送到该元素, 传入的字符串将作为其类名 | | ||
| `load` | 是否立即加载节点 | `boolean` | `true` | 传入 `false` 可以懒加载节点, 节点加载后,再修改此值将不再生效。 | | ||
| `target` | 被传送的目标元素或者一个 [querySelector](https://developer.mozilla.org/zh-CN/docs/Web/API/Document/querySelector) 支持的 css 选择器 | `string \| HTMLElement \| () => string \| HTMLElement` | - | 当传入 css 选择器时,如果能找到,则直接返回。如果未查找到对应元素,就会在 `body` 中插入一个 `div`, 并设置对应的属性(仅支持简单的 `id` 和 `class` 选择器) | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -4,3 +4,5 @@ title: Portal | |
subtitle: 传送门 | ||
cover: | ||
--- | ||
|
||
对 `Teleport` 进行了简单的封装,可以打开 `devtools` 来观察 `DOM` 元素的插入位置变化。 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -5,5 +5,5 @@ | |
|
||
height: 100%; | ||
background-color: @mask-background-color; | ||
z-index: @zindex-l4-base; | ||
z-index: 1000; | ||
} |
Oops, something went wrong.