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

docs(sticky): 示例文档同步 #435

Merged
merged 4 commits into from
Aug 8, 2024
Merged

docs(sticky): 示例文档同步 #435

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
1888f75
docs(sticky): 示例文档同步
byq1213 Aug 2, 2024
c48fdd8
docs(sticky): jsx示例文件换tsx
byq1213 Aug 7, 2024
87d9989
Merge branch 'develop' into sticky_0802
byq1213 Aug 8, 2024
9fad909
test(sticky): update ssr file
byq1213 Aug 8, 2024
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 site/mobile/mobile.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -105,7 +105,7 @@ export default {
{
title: 'Sticky 吸顶',
name: 'sticky',
component: () => import('tdesign-mobile-react/sticky/_example/index.jsx'),
component: () => import('tdesign-mobile-react/sticky/_example/index.tsx'),
},
{
title: 'BackTop 返回顶部',
Expand Down
0 src/sticky/_example/base.jsx → src/sticky/_example/base.tsx
View file
Open in desktop
File renamed without changes.
0 src/sticky/_example/container.jsx → src/sticky/_example/container.tsx
View file
Open in desktop
File renamed without changes.
4 changes: 2 additions & 2 deletions src/sticky/_example/index.jsx → src/sticky/_example/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,15 +4,15 @@ import TDemoHeader from '../../../site/mobile/components/DemoHeader';
import './style/index.less';

import BaseDemo from './base';
import OffsetTopDemo from './offsetTop';
import OffsetTopDemo from './offset';
import ContainerDemo from './container';

export default function Base() {
return (
<div className="tdesign-mobile-demo">
<TDemoHeader title="Sticky 吸顶" summary="用于常驻页面顶部的信息，操作展示" />
<div className="tdesign-demo-block-wrap">
<TDemoBlock title="01 类型" summary="基础吸顶">
<TDemoBlock summary="基础吸顶">
<BaseDemo />
</TDemoBlock>
<TDemoBlock summary="吸顶距离">
Expand Down
0 src/sticky/_example/offsetTop.jsx → src/sticky/_example/offset.tsx
View file
Open in desktop
File renamed without changes.
16 changes: 16 additions & 0 deletions src/sticky/sticky.en-US.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
:: BASE_DOC ::

## API


### Sticky Props

name | type | default | description | required
-- | -- | -- | -- | --
className | String | - | className of component | N
style | Object | - | CSS(Cascading Style Sheets)，Typescript：`React.CSSProperties` | N
container | String / Function | body | Typescript：`ScrollContainer`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
disabled | Boolean | false | \- | N
offsetTop | String / Number | 0 | \- | N
zIndex | Number | 99 | \- | N
onScroll | Function | | Typescript：`(context: { scrollTop: number, isFixed: boolean }) => void`<br/>Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
5 changes: 3 additions & 2 deletions src/sticky/sticky.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,14 @@
:: BASE_DOC ::

## API

### Sticky Props

名称 | 类型 | 默认值 | 说明 | 必传
名称 | 类型 | 默认值 | 描述 | 必传
-- | -- | -- | -- | --
className | String | - | 类名 | N
style | Object | - | 样式，TS 类型：`React.CSSProperties` | N
container | String / Function | body | 指定滚动的容器。数据类型为 String 时，会被当作选择器处理，进行节点查询。示例：'body' 或 () => document.body。TS 类型：`ScrollContainer` | N
container | String / Function | body | 指定滚动的容器。数据类型为 String 时，会被当作选择器处理，进行节点查询。示例：'body' 或 () => document.body。TS 类型：`ScrollContainer`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
disabled | Boolean | false | 是否禁用组件 | N
offsetTop | String / Number | 0 | 吸顶时与顶部的距离，单位`px` | N
zIndex | Number | 99 | 吸顶时的 z-index | N
Expand Down
2 changes: 1 addition & 1 deletion src/sticky/style/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1 @@
import '../../_common/style/mobile/components/sticky/_index.less';
import '../../_common/style/mobile/components/sticky/_index.less';
253 changes: 253 additions & 0 deletions test/snap/__snapshots__/csr.test.jsx.snap
View file
Open in desktop

Large diffs are not rendered by default.

8 changes: 8 additions & 0 deletions test/snap/__snapshots__/ssr.test.jsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,3 +31,11 @@ exports[`ssr snapshot test > ssr test src/result/_example/custom.tsx 1`] = `"<di
exports[`ssr snapshot test > ssr test src/result/_example/index.tsx 1`] = `"<div class="tdesign-mobile-demo"><div class="tdesign-mobile-demo-header"><h1 class="tdesign-mobile-demo-header__title">Result 结果</h1><p class="tdesign-mobile-demo-header__summary">结果反馈</p></div><div class="tdesign-mobile-demo-block"><div class="tdesign-mobile-demo-block__header"><h2 class="tdesign-mobile-demo-block__title">01类型</h2><p class="tdesign-mobile-demo-block__summary">不同结果反馈</p></div><div class="tdesign-mobile-demo-block__slot"><div><div class="t-result t-result--theme-success space"><div class="t-result__thumb"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-check-circle t-result__icon"><path fill="currentColor" d="M4.5 8.2L7 10.7l4.5-4.5-.7-.7L7 9.3 5.2 7.5l-.7.7z" fill-opacity="0.9"></path><path fill="currentColor" d="M4.11 2.18a7 7 0 117.78 11.64A7 7 0 014.1 2.18zm.56 10.8a6 6 0 106.66-9.97A6 6 0 004.67 13z" fill-opacity="0.9"></path></svg></div><div class="t-result__title">成功状态</div><div class="t-result__description">描述文字</div></div><div class="t-result t-result--theme-error space"><div class="t-result__thumb"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-close-circle t-result__icon"><path fill="currentColor" d="M4.98 10.31L7.3 8 5 5.69l.7-.7L8 7.28 10.31 5l.7.7L8.72 8l2.3 2.31-.7.7L8 8.72 5.69 11l-.7-.7z" fill-opacity="0.9"></path><path fill="currentColor" d="M8 1a7 7 0 110 14A7 7 0 018 1zm0 1a6 6 0 100 12A6 6 0 008 2z" fill-opacity="0.9"></path></svg></div><div class="t-result__title">失败状态</div><div class="t-result__description">描述文字</div></div><div class="t-result t-result--theme-warning space"><div class="t-result__thumb"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-info-circle t-result__icon"><path fill="currentColor" d="M7.5 12V6.5h1V12h-1zM8.6 4H7.4v1.2h1.2V4z" fill-opacity="0.9"></path><path fill="currentColor" d="M1 8a7 7 0 1014 0A7 7 0 001 8zm1 0a6 6 0 1112 0A6 6 0 012 8z" fill-opacity="0.9"></path></svg></div><div class="t-result__title">警示状态</div><div class="t-result__description">描述文字</div></div><div class="t-result t-result--theme-default space"><div class="t-result__thumb"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-info-circle t-result__icon"><path fill="currentColor" d="M7.5 12V6.5h1V12h-1zM8.6 4H7.4v1.2h1.2V4z" fill-opacity="0.9"></path><path fill="currentColor" d="M1 8a7 7 0 1014 0A7 7 0 001 8zm1 0a6 6 0 1112 0A6 6 0 012 8z" fill-opacity="0.9"></path></svg></div><div class="t-result__title">默认状态</div><div class="t-result__description">描述文字</div></div></div></div></div><div class="tdesign-mobile-demo-block tdesign-mobile-demo-block_subtitle"><div class="tdesign-mobile-demo-block__header"><p class="tdesign-mobile-demo-block__summary tdesign-mobile-demo-block_subtitle">自定义结果</p></div><div class="tdesign-mobile-demo-block__slot"><div class="t-result t-result--theme-default"><div class="t-result__thumb"><div class="t-image t-image--round extra-class-image"><div class="t-image__status"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-ellipsis"><path fill="currentColor" d="M3 9a1 1 0 110-2 1 1 0 010 2zM7 8a1 1 0 102 0 1 1 0 00-2 0zM12 8a1 1 0 102 0 1 1 0 00-2 0z" fill-opacity="0.9"></path></svg></div><img class="t-image__img" src="https://tdesign.gtimg.com/mobile/demos/result1.png" style="object-fit:fill;width:inherit;height:inherit"/></div></div><div class="t-result__title">自定义结果</div><div class="t-result__description">描述文字</div></div></div></div><div class="tdesign-mobile-demo-block tdesign-mobile-demo-block_subtitle"><div class="tdesign-mobile-demo-block__header"><p class="tdesign-mobile-demo-block__summary tdesign-mobile-demo-block_subtitle">页面位置展示</p></div><div class="tdesign-mobile-demo-block__slot"><div class="padding"><button type="button" class="t-button t-button--outline t-button--primary t-size-l t-is-block t-button--shape-rectangle"><span class="t-button__text"> <!-- -->页面位置展示</span></button></div></div></div></div>"`;

exports[`ssr snapshot test > ssr test src/result/_example/theme.tsx 1`] = `"<div data-reactroot=""><div class="t-result t-result--theme-success space"><div class="t-result__thumb"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-check-circle t-result__icon"><path fill="currentColor" d="M4.5 8.2L7 10.7l4.5-4.5-.7-.7L7 9.3 5.2 7.5l-.7.7z" fill-opacity="0.9"></path><path fill="currentColor" d="M4.11 2.18a7 7 0 117.78 11.64A7 7 0 014.1 2.18zm.56 10.8a6 6 0 106.66-9.97A6 6 0 004.67 13z" fill-opacity="0.9"></path></svg></div><div class="t-result__title">成功状态</div><div class="t-result__description">描述文字</div></div><div class="t-result t-result--theme-error space"><div class="t-result__thumb"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-close-circle t-result__icon"><path fill="currentColor" d="M4.98 10.31L7.3 8 5 5.69l.7-.7L8 7.28 10.31 5l.7.7L8.72 8l2.3 2.31-.7.7L8 8.72 5.69 11l-.7-.7z" fill-opacity="0.9"></path><path fill="currentColor" d="M8 1a7 7 0 110 14A7 7 0 018 1zm0 1a6 6 0 100 12A6 6 0 008 2z" fill-opacity="0.9"></path></svg></div><div class="t-result__title">失败状态</div><div class="t-result__description">描述文字</div></div><div class="t-result t-result--theme-warning space"><div class="t-result__thumb"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-info-circle t-result__icon"><path fill="currentColor" d="M7.5 12V6.5h1V12h-1zM8.6 4H7.4v1.2h1.2V4z" fill-opacity="0.9"></path><path fill="currentColor" d="M1 8a7 7 0 1014 0A7 7 0 001 8zm1 0a6 6 0 1112 0A6 6 0 012 8z" fill-opacity="0.9"></path></svg></div><div class="t-result__title">警示状态</div><div class="t-result__description">描述文字</div></div><div class="t-result t-result--theme-default space"><div class="t-result__thumb"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-info-circle t-result__icon"><path fill="currentColor" d="M7.5 12V6.5h1V12h-1zM8.6 4H7.4v1.2h1.2V4z" fill-opacity="0.9"></path><path fill="currentColor" d="M1 8a7 7 0 1014 0A7 7 0 001 8zm1 0a6 6 0 1112 0A6 6 0 012 8z" fill-opacity="0.9"></path></svg></div><div class="t-result__title">默认状态</div><div class="t-result__description">描述文字</div></div></div>"`;

exports[`ssr snapshot test > ssr test src/sticky/_example/base.tsx 1`] = `"<div class="tdesign-demo-block-1" data-reactroot=""><div class="t-sticky"><div class="t-sticky__content"><button type="button" class="t-button t-button--base t-button--primary custom-common-button t-size-default t-button--shape-rectangle"><span class="t-button__text"> <!-- -->基础吸顶</span></button></div></div></div>"`;

exports[`ssr snapshot test > ssr test src/sticky/_example/container.tsx 1`] = `"<div class="tdesign-demo-block-3" id="container" data-reactroot=""><div class="t-sticky"><div class="t-sticky__content"><button type="button" class="t-button t-button--base t-button--default custom-button custom-common-button t-size-default t-button--shape-rectangle"><span class="t-button__text"> <!-- -->指定容器</span></button></div></div></div>"`;

exports[`ssr snapshot test > ssr test src/sticky/_example/index.tsx 1`] = `"<div class="tdesign-mobile-demo" data-reactroot=""><div class="tdesign-mobile-demo-header"><h1 class="tdesign-mobile-demo-header__title">Sticky 吸顶</h1><p class="tdesign-mobile-demo-header__summary">用于常驻页面顶部的信息，操作展示</p></div><div class="tdesign-demo-block-wrap"><div class="tdesign-mobile-demo-block tdesign-mobile-demo-block_subtitle"><div class="tdesign-mobile-demo-block__header"><p class="tdesign-mobile-demo-block__summary tdesign-mobile-demo-block_subtitle">基础吸顶</p></div><div class="tdesign-mobile-demo-block__slot"><div class="tdesign-demo-block-1"><div class="t-sticky"><div class="t-sticky__content"><button type="button" class="t-button t-button--base t-button--primary custom-common-button t-size-default t-button--shape-rectangle"><span class="t-button__text"> <!-- -->基础吸顶</span></button></div></div></div></div></div><div class="tdesign-mobile-demo-block tdesign-mobile-demo-block_subtitle"><div class="tdesign-mobile-demo-block__header"><p class="tdesign-mobile-demo-block__summary tdesign-mobile-demo-block_subtitle">吸顶距离</p></div><div class="tdesign-mobile-demo-block__slot"><div class="tdesign-demo-block-2"><div class="t-sticky"><div class="t-sticky__content"><button type="button" class="t-button t-button--base t-button--danger custom-common-button t-size-default t-button--shape-rectangle"><span class="t-button__text"> <!-- -->吸顶距离</span></button></div></div></div></div></div><div class="tdesign-mobile-demo-block tdesign-mobile-demo-block_subtitle"><div class="tdesign-mobile-demo-block__header"><p class="tdesign-mobile-demo-block__summary tdesign-mobile-demo-block_subtitle">指定容器</p></div><div class="tdesign-mobile-demo-block__slot"><div class="tdesign-demo-block-3" id="container"><div class="t-sticky"><div class="t-sticky__content"><button type="button" class="t-button t-button--base t-button--default custom-button custom-common-button t-size-default t-button--shape-rectangle"><span class="t-button__text"> <!-- -->指定容器</span></button></div></div></div></div></div></div></div>"`;

exports[`ssr snapshot test > ssr test src/sticky/_example/offset.tsx 1`] = `"<div class="tdesign-demo-block-2" data-reactroot=""><div class="t-sticky"><div class="t-sticky__content"><button type="button" class="t-button t-button--base t-button--danger custom-common-button t-size-default t-button--shape-rectangle"><span class="t-button__text"> <!-- -->吸顶距离</span></button></div></div></div>"`;
Loading