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

Jump to bottom

docs(sticky): update docs and demo #438

Merged
merged 7 commits into from
Oct 28, 2022
Merged

docs(sticky): update docs and demo #438

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
da64548
docs(sticky): update docs and demo
yuanmeda Oct 27, 2022
824e76c
fix(sticky): edit text
yuanmeda Oct 27, 2022
f165a7b
fix(sticky): update snap
yuanmeda Oct 27, 2022
a8da65b
fix(sticky): update snap
yuanmeda Oct 27, 2022
ddf2936
Merge branch 'develop' into fix/doc-sticky413
yuanmeda Oct 28, 2022
6081ca6
fix(sticky): fix cr
yuanmeda Oct 28, 2022
f19c666
fix(sticky): update snap
yuanmeda Oct 28, 2022
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
193 changes: 141 additions & 52 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,43 +2,87 @@

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

<button
aria-disabled="false"
class="t-button t-size-m t-button--base t-button--default t-button--shape-rectangle"
role="button"
<div
class="t-sticky__content"
style="z-index: 50; position: fixed; top: 0px;"
>
<!---->
<span
class="t-button__text"

<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>
</button>

<!---->
<span
class="t-button__text"
>

基础吸顶

</span>
</button>

</div>
</div>
</div>
`;

exports[`Sticky > Sticky containerVue demo works fine 1`] = `
<div
class="sticky-demo"
data-v-046295d6=""
id="container"
>
<div
class="t-sticky"
data-v-046295d6=""
style="height: 0px;"
>
<div
class="t-sticky__content"
style="z-index: 99; position: fixed; top: 0px;"
>

<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"
data-v-046295d6=""
role="button"
>
<!---->
<span
class="t-button__text"
>

指定容器

</span>
</button>

</div>
</div>
</div>
`;

exports[`Sticky > Sticky mobileVue demo works fine 1`] = `
<div
class="tdesign-mobile-demo sticky-demo"
class="tdesign-mobile-demo sticky-demo-container"
data-v-3246353e=""
>
<h1
class="title"
data-v-3246353e=""
>
Sticky 吸顶容器
Sticky 吸顶
</h1>
<p
class="summary"
Expand All @@ -54,35 +98,41 @@ exports[`Sticky > Sticky mobileVue demo works fine 1`] = `
<p
class="tdesign-mobile-demo-block__summary"
>
01 基础吸顶
基础吸顶
</p>

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

<button
aria-disabled="false"
class="t-button t-size-m t-button--base t-button--primary t-button--shape-rectangle"
data-v-3246353e=""
role="button"
<div
class="t-sticky__content"
style="z-index: 50; position: fixed; top: 0px;"
>
<!---->
<span
class="t-button__text"

<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>
</button>

<!---->
<span
class="t-button__text"
>

基础吸顶

</span>
</button>

</div>
</div>
</div>

Expand All @@ -95,16 +145,17 @@ exports[`Sticky > Sticky mobileVue demo works fine 1`] = `
<p
class="tdesign-mobile-demo-block__summary"
>
02 吸顶距离
吸顶距离
</p>

<div
class="block-2"
class="sticky-demo"
data-v-3246353e=""
data-v-76d3d054=""
>
<div
class="t-sticky"
data-v-3246353e=""
data-v-76d3d054=""
style="height: 0px;"
>
<div
Expand All @@ -114,16 +165,16 @@ exports[`Sticky > Sticky mobileVue demo works fine 1`] = `

<button
aria-disabled="false"
class="t-button t-size-m t-button--base t-button--danger t-button--shape-rectangle"
data-v-3246353e=""
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>
</button>
Expand All @@ -141,16 +192,18 @@ exports[`Sticky > Sticky mobileVue demo works fine 1`] = `
<p
class="tdesign-mobile-demo-block__summary"
>
03 指定容器
指定容器
</p>

<div
class="block-3"
class="sticky-demo"
data-v-046295d6=""
data-v-3246353e=""
id="container"
>
<div
class="t-sticky"
data-v-3246353e=""
data-v-046295d6=""
style="height: 0px;"
>
<div
Expand All @@ -160,16 +213,16 @@ 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"
data-v-3246353e=""
class="t-button t-size-m t-button--base t-button--default t-button--shape-rectangle custom-common-button green-button"
data-v-046295d6=""
role="button"
>
<!---->
<span
class="t-button__text"
>

吸顶按钮
指定容器

</span>
</button>
Expand All @@ -181,3 +234,39 @@ exports[`Sticky > Sticky mobileVue demo works fine 1`] = `
</div>
</div>
`;

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

<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>
</button>

</div>
</div>
</div>
`;
4 changes: 4 additions & 0 deletions src/sticky/__test__/demo.test.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,15 @@

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';

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

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

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

<style lang="less" scoped>
.sticky-demo {
background: white;
height: 200px;
padding-left: 250px;
}
.custom-common-button {
color: #fff;
width: 104px;
height: 44px;
}
.green-button {
background-color: rgba(0, 168, 112, 1) !important;
color: #fff !important;
}
</style>
Loading