Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(Sticky): update demo #555

Merged
merged 1 commit into from
Apr 3, 2023
Merged

feat(Sticky): update demo #555

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/_common
Open in desktop
Submodule _common updated 13 files
+5 −2 docs/mobile/api_v2/sticky.md
+36 −0 docs/web/api/breadcrumb.en-US.md
+69 −0 docs/web/api/drawer.en-US.md
+61 −0 docs/web/api/dropdown.en-US.md
+70 −0 docs/web/api/menu.en-US.md
+16 −0 docs/web/api/message.en-US.md
+36 −0 docs/web/api/notification.en-US.md
+54 −0 docs/web/api/pagination.en-US.md
+36 −0 docs/web/api/popconfirm.en-US.md
+64 −0 docs/web/api/popup.en-US.md
+6 −0 style/web/components/sticky-tool/_index.less
+3 −0 style/web/components/sticky-tool/_mixin.less
+6 −0 style/web/components/sticky-tool/_var.less
182 changes: 81 additions & 101 deletions src/sticky/__test__/__snapshots__/demo.test.jsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,36 +2,31 @@

exports[`Sticky > Sticky baseVue demo works fine 1`] = `
<div
class="sticky-demo"
class="t-sticky"
data-v-4a742626=""
style="height: 0px;"
>
<div
class="t-sticky"
data-v-4a742626=""
style="height: 0px;"
class="t-sticky__content"
style="z-index: 99; position: fixed; top: 0px;"
>
<div
class="t-sticky__content"
style="z-index: 50; position: fixed; top: 0px;"

<button
aria-disabled="false"
class="t-button t-size-l t-button--base t-button--primary t-button--shape-rectangle common-button"
data-v-4a742626=""
role="button"
>

<button
aria-disabled="false"
class="t-button t-size-m t-button--base t-button--primary t-button--shape-rectangle custom-common-button"
data-v-4a742626=""
role="button"
<!---->
<span
class="t-button__text"
>
<!---->
<span
class="t-button__text"
>

基础吸顶

</span>
</button>

</div>

基础吸顶

</span>
</button>

</div>
</div>
`;
Expand All @@ -54,7 +49,7 @@ exports[`Sticky > Sticky containerVue demo works fine 1`] = `

<button
aria-disabled="false"
class="t-button t-size-m t-button--base t-button--default t-button--shape-rectangle custom-common-button green-button"
class="t-button t-size-l t-button--base t-button--default t-button--shape-rectangle common-button green-button"
data-v-046295d6=""
role="button"
>
Expand Down Expand Up @@ -109,37 +104,32 @@ exports[`Sticky > Sticky mobileVue demo works fine 1`] = `
>

<div
class="sticky-demo"
class="t-sticky"
data-v-3246353e=""
data-v-4a742626=""
style="height: 0px;"
>
<div
class="t-sticky"
data-v-4a742626=""
style="height: 0px;"
class="t-sticky__content"
style="z-index: 99; position: fixed; top: 0px;"
>
<div
class="t-sticky__content"
style="z-index: 50; position: fixed; top: 0px;"

<button
aria-disabled="false"
class="t-button t-size-l t-button--base t-button--primary t-button--shape-rectangle common-button"
data-v-4a742626=""
role="button"
>

<button
aria-disabled="false"
class="t-button t-size-m t-button--base t-button--primary t-button--shape-rectangle custom-common-button"
data-v-4a742626=""
role="button"
<!---->
<span
class="t-button__text"
>
<!---->
<span
class="t-button__text"
>

基础吸顶

</span>
</button>

</div>

基础吸顶

</span>
</button>

</div>
</div>

Expand All @@ -164,37 +154,32 @@ exports[`Sticky > Sticky mobileVue demo works fine 1`] = `
>

<div
class="sticky-demo"
class="t-sticky"
data-v-3246353e=""
data-v-76d3d054=""
data-v-ec54aea2=""
style="height: 0px;"
>
<div
class="t-sticky"
data-v-76d3d054=""
style="height: 0px;"
class="t-sticky__content"
style="z-index: 99; position: fixed; top: 40px;"
>
<div
class="t-sticky__content"
style="z-index: 99; position: fixed; top: 50px;"

<button
aria-disabled="false"
class="t-button t-size-l t-button--base t-button--danger t-button--shape-rectangle common-button"
data-v-ec54aea2=""
role="button"
>

<button
aria-disabled="false"
class="t-button t-size-m t-button--base t-button--danger t-button--shape-rectangle custom-common-button"
data-v-76d3d054=""
role="button"
<!---->
<span
class="t-button__text"
>
<!---->
<span
class="t-button__text"
>

吸顶距离

</span>
</button>

</div>

吸顶距离

</span>
</button>

</div>
</div>

Expand Down Expand Up @@ -236,7 +221,7 @@ exports[`Sticky > Sticky mobileVue demo works fine 1`] = `

<button
aria-disabled="false"
class="t-button t-size-m t-button--base t-button--default t-button--shape-rectangle custom-common-button green-button"
class="t-button t-size-l t-button--base t-button--default t-button--shape-rectangle common-button green-button"
data-v-046295d6=""
role="button"
>
Expand All @@ -259,38 +244,33 @@ exports[`Sticky > Sticky mobileVue demo works fine 1`] = `
</div>
`;

exports[`Sticky > Sticky offsetTopVue demo works fine 1`] = `
exports[`Sticky > Sticky offsetVue demo works fine 1`] = `
<div
class="sticky-demo"
data-v-76d3d054=""
class="t-sticky"
data-v-ec54aea2=""
style="height: 0px;"
>
<div
class="t-sticky"
data-v-76d3d054=""
style="height: 0px;"
class="t-sticky__content"
style="z-index: 99; position: fixed; top: 40px;"
>
<div
class="t-sticky__content"
style="z-index: 99; position: fixed; top: 50px;"

<button
aria-disabled="false"
class="t-button t-size-l t-button--base t-button--danger t-button--shape-rectangle common-button"
data-v-ec54aea2=""
role="button"
>

<button
aria-disabled="false"
class="t-button t-size-m t-button--base t-button--danger t-button--shape-rectangle custom-common-button"
data-v-76d3d054=""
role="button"
<!---->
<span
class="t-button__text"
>
<!---->
<span
class="t-button__text"
>

吸顶距离

</span>
</button>

</div>

吸顶距离

</span>
</button>

</div>
</div>
`;
4 changes: 2 additions & 2 deletions src/sticky/__test__/demo.test.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,13 +6,13 @@ import { mount } from '@vue/test-utils';
import baseVue from '@/sticky/demos/base.vue';
import containerVue from '@/sticky/demos/container.vue';
import mobileVue from '@/sticky/demos/mobile.vue';
import offsetTopVue from '@/sticky/demos/offsetTop.vue';
import offsetVue from '@/sticky/demos/offset.vue';

const mapper = {
baseVue,
containerVue,
mobileVue,
offsetTopVue,
offsetVue,
};

describe('Sticky', () => {
Expand Down
15 changes: 4 additions & 11 deletions src/sticky/demos/base.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,18 +1,11 @@
<template>
<div class="sticky-demo">
<t-sticky :z-index="50">
<t-button theme="primary" class="custom-common-button">基础吸顶</t-button>
</t-sticky>
</div>
<t-sticky>
<t-button theme="primary" size="large" class="common-button">基础吸顶</t-button>
</t-sticky>
</template>

<style lang="less" scoped>
.sticky-demo {
padding-left: 16px;
}
.custom-common-button {
color: #fff;
.common-button {
width: 104px;
height: 44px;
}
</style>
16 changes: 8 additions & 8 deletions src/sticky/demos/container.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<template>
<div id="container" class="sticky-demo">
<t-sticky container="#container" @scroll="onScroll">
<t-button class="custom-common-button green-button">指定容器</t-button>
<t-button size="large" class="common-button green-button">指定容器</t-button>
</t-sticky>
</div>
</template>
Expand All @@ -13,17 +13,17 @@ const onScroll = (context: { scrollTop: number; isFixed: boolean }) => {

<style lang="less" scoped>
.sticky-demo {
background: white;
height: 200px;
padding-left: 250px;
width: 100%;
height: 150px;
background-color: rgba(255, 255, 255, 1);
}
.custom-common-button {
.common-button {
color: #fff;
width: 104px;
height: 44px;
margin-left: 256px;
}
.green-button {
background-color: rgba(0, 168, 112, 1) !important;
color: #fff !important;
background-color: rgba(0, 168, 112, 1);
color: #fff;
}
</style>
6 changes: 3 additions & 3 deletions src/sticky/demos/mobile.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,11 @@
<div class="tdesign-mobile-demo sticky-demo-container">
<h1 class="title">Sticky 吸顶</h1>
<p class="summary">用于常驻页面顶部的信息、操作展示。</p>
<tdesign-demo-block summary="基础吸顶">
<tdesign-demo-block summary="基础吸顶" padding>
<BaseDemo />
</tdesign-demo-block>
<tdesign-demo-block summary="吸顶距离">
<OffsetTopDemo />
<OffsetDemo />
</tdesign-demo-block>
<tdesign-demo-block summary="指定容器">
<ContainerDemo />
Expand All @@ -16,7 +16,7 @@

<script setup lang="ts">
import BaseDemo from './base.vue';
import OffsetTopDemo from './offsetTop.vue';
import OffsetDemo from './offset.vue';
import ContainerDemo from './container.vue';
</script>

Expand Down
13 changes: 13 additions & 0 deletions src/sticky/demos/offset.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
<template>
<t-sticky :offset-top="40">
<t-button theme="danger" size="large" class="common-button">吸顶距离</t-button>
</t-sticky>
</template>

<style lang="less" scoped>
.common-button {
color: #fff;
width: 104px;
margin-left: 136px;
}
</style>
18 changes: 0 additions & 18 deletions src/sticky/demos/offsetTop.vue
View file
Open in desktop

This file was deleted.