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

feat: add loading site example and improve site tabs change event #835

Merged
merged 3 commits into from
Sep 5, 2023
Merged

feat: add loading site example and improve site tabs change event #835

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
9d176bb
feat: fix loading delay
GuYith Sep 4, 2023
bbc12e6
feat: add loading site example and improve site tabs change event
GuYith Sep 5, 2023
1357240
Merge branch 'master' of github.com:GuYith/omi into master
GuYith Sep 5, 2023
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 tdesign/desktop/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -142,7 +142,7 @@
"markdown-it-anchor": "^8.1.0",
"marked": "^7.0.2",
"mitt": "^3.0.1",
"omi": "^6.25.18",
"omi": "^6.25.20",
"omi-router": "^3.0.5",
"omi-twind": "^0.0.4",
"prismjs": "^1.24.0",
Expand Down
16 changes: 8 additions & 8 deletions tdesign/desktop/site/site.config.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -477,14 +477,14 @@ export const docs = [
name: 'list',
path: '/list',
},
// {
// title: 'Loading 加载',
// titleEn: 'Loading',
// name: 'loading',
// path: '/loading',
// component: () => import('tdesign-omi/loading/loading.md'),
// componentEn: () => import('tdesign-omi/loading/loading.en-US.md'),
// },
{
title: 'Loading 加载',
titleEn: 'Loading',
name: 'loading',
path: '/loading',
// component: () => import('tdesign-omi/loading/loading.md'),
// componentEn: () => import('tdesign-omi/loading/loading.en-US.md'),
},
// {
// title: 'Progress 进度条',
// titleEn: 'Progress',
Expand Down
10 changes: 5 additions & 5 deletions tdesign/desktop/site/src/components/web/back-top/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -79,11 +79,11 @@ define(
}

installed() {
this.tdDocTabs.current.onchange = ({ detail: currentTab }) => {
const tdDocTabsEl = this.tdDocTabs.current as HTMLElement
tdDocTabsEl.onchange = ({ detail: currentTab }: CustomEvent) => {
this.updateTab(currentTab)
}
}


render() {
return (
Expand Down Expand Up @@ -113,22 +113,22 @@ define(
</demo-wrapper>

<h3 id="不同组件主题的回到顶部">
不同组件形状的回到顶部 <a class="header-anchor" href="#不同组件形状的回到顶部"></a>
不同组件形状的回到顶部 <a class="header-anchor" href="#不同组件形状的回到顶部"></a>
</h3>
<p>不同组件形状的回到顶部</p>
<demo-wrapper>
<back-top-shape></back-top-shape>
</demo-wrapper>

<h3 id="不同组件主题的回到顶部">
不同组件主题的回到顶部 <a class="header-anchor" href="#不同组件主题的回到顶部"></a>
不同组件主题的回到顶部 <a class="header-anchor" href="#不同组件主题的回到顶部"></a>
</h3>
<demo-wrapper>
<back-top-theme></back-top-theme>
</demo-wrapper>

<h3 id="可自定义内容的回到顶部">
可自定义内容的回到顶部 <a class="header-anchor" href="#可自定义内容的回到顶部"></a>
可自定义内容的回到顶部 <a class="header-anchor" href="#可自定义内容的回到顶部"></a>
</h3>
<demo-wrapper>
<back-top-custom></back-top-custom>
Expand Down
3 changes: 2 additions & 1 deletion tdesign/desktop/site/src/components/web/comment/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,8 @@ define(
}

installed() {
this.tdDocTabs.current.onchange = ({ detail: currentTab }) => {
const tdDocTabsEl = this.tdDocTabs.current as HTMLElement
tdDocTabsEl.onchange = ({ detail: currentTab }: CustomEvent) => {
this.updateTab(currentTab)
}
}
Expand Down
3 changes: 2 additions & 1 deletion tdesign/desktop/site/src/components/web/divider/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,8 @@ define(
}

installed() {
this.tdDocTabs.current.onchange = ({ detail: currentTab }) => {
const tdDocTabsEl = this.tdDocTabs.current as HTMLElement
tdDocTabsEl.onchange = ({ detail: currentTab }: CustomEvent) => {
this.updateTab(currentTab)
}
}
Expand Down
3 changes: 2 additions & 1 deletion tdesign/desktop/site/src/components/web/dropdown/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -79,7 +79,8 @@ define(
}

installed() {
this.tdDocTabs.current.onchange = ({ detail: currentTab }) => {
const tdDocTabsEl = this.tdDocTabs.current as HTMLElement
tdDocTabsEl.onchange = ({ detail: currentTab }: CustomEvent) => {
this.updateTab(currentTab)
}
}
Expand Down
3 changes: 2 additions & 1 deletion tdesign/desktop/site/src/components/web/grid/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -74,7 +74,8 @@ define(
}

installed() {
this.tdDocTabs.current.onchange = ({ detail: currentTab }) => {
const tdDocTabsEl = this.tdDocTabs.current as HTMLElement
tdDocTabsEl.onchange = ({ detail: currentTab }: CustomEvent) => {
this.updateTab(currentTab)
}
}
Expand Down
3 changes: 2 additions & 1 deletion tdesign/desktop/site/src/components/web/icon/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,8 @@ define(
}

installed() {
this.tdDocTabs.current.onchange = ({ detail: currentTab }) => {
const tdDocTabsEl = this.tdDocTabs.current as HTMLElement
tdDocTabsEl.onchange = ({ detail: currentTab }: CustomEvent) => {
this.updateTab(currentTab)
}
}
Expand Down
3 changes: 2 additions & 1 deletion tdesign/desktop/site/src/components/web/input-adornment/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,8 @@ define(
}

installed() {
this.tdDocTabs.current.onchange = ({ detail: currentTab }) => {
const tdDocTabsEl = this.tdDocTabs.current as HTMLElement
tdDocTabsEl.onchange = ({ detail: currentTab }: CustomEvent) => {
this.updateTab(currentTab)
}
}
Expand Down
7 changes: 3 additions & 4 deletions tdesign/desktop/site/src/components/web/link/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,8 @@ define(
}

installed() {
this.tdDocTabs.current.onchange = ({ detail: currentTab }) => {
const tdDocTabsEl = this.tdDocTabs.current as HTMLElement
tdDocTabsEl.onchange = ({ detail: currentTab }: CustomEvent) => {
this.updateTab(currentTab)
}
}
Expand Down Expand Up @@ -172,9 +173,7 @@ define(
<h3 id="不同尺寸的链接">
不同尺寸的链接 <a class="header-anchor" href="#不同尺寸的链接"></a>
</h3>
<p>
提供大、中（默认）、小三种尺寸。
</p>
<p>提供大、中（默认）、小三种尺寸。</p>
<demo-wrapper>
<link-size></link-size>
</demo-wrapper>
Expand Down
130 changes: 69 additions & 61 deletions tdesign/desktop/site/src/components/web/list/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,6 @@ import '../../../../../src/list/_example/list-async-loading'
import '../../../../../src/list/_example/list-header-footer'
import '../../../../../src/list/_example/list-scroll'


import '../../../../../src/list/style/index'

import * as marked from 'marked'
Expand Down Expand Up @@ -85,7 +84,8 @@ define(
}

installed() {
this.tdDocTabs.current.onchange = ({ detail: currentTab }) => {
const tdDocTabsEl = this.tdDocTabs.current as HTMLElement
tdDocTabsEl.onchange = ({ detail: currentTab }: CustomEvent) => {
this.updateTab(currentTab)
}
}
Expand All @@ -94,65 +94,73 @@ define(
return (
<>
<div style={this.isShow('demo')} name="DEMO">
<h3 id='基础文字列表'>
基础文字列表 <a class="header-anchor" href="#基础文字列表"></a></h3>
<p>仅包含简单文字的列表。对较简单的信息进行陈列时使用。</p>
<demo-wrapper>
<list-base-text></list-base-text>
</demo-wrapper>

<h3 id='多行文字列表'>
多行文字列表 <a class="header-anchor" href="#多行文字列表"></a></h3>
<p>仅包含主要文字及描述性文字的列表。对较复杂的，包含多个字段或内容的信息进行展示时使用。</p>
<demo-wrapper>
<list-multiple-text></list-multiple-text>
</demo-wrapper>

<h3 id='基础图文列表'>
基础图文列表 <a class="header-anchor" href="#基础图文列表"></a></h3>
<p>包含简单图文的列表。需使用图片和文字结合展示信息。</p>
<demo-wrapper>
<list-base-image-text></list-base-image-text>
</demo-wrapper>

<h3 id='带操作列表'>
带操作列表 <a class="header-anchor" href="#带操作列表"></a></h3>
<p>包含操作的列表。需要对所在列进行操作时使用。</p>
<demo-wrapper>
<list-with-action></list-with-action>
</demo-wrapper>

<h3 id='不同尺寸的列表'>
不同尺寸的列表 <a class="header-anchor" href="#不同尺寸的列表"></a></h3>
<p>提供大、中（默认）、小三种尺寸。</p>
<demo-wrapper>
<list-size></list-size>
</demo-wrapper>

<h3 id='斑马纹区分列表'>
斑马纹区分列表 <a class="header-anchor" href="#斑马纹区分列表"></a></h3>
<demo-wrapper>
<list-zebra></list-zebra>
</demo-wrapper>

<h3 id='异步加载的列表'>
异步加载的列表 <a class="header-anchor" href="#异步加载的列表"></a></h3>
<demo-wrapper>
<list-async-loading></list-async-loading>
</demo-wrapper>

<h3 id='带头部及尾部的列表'>
带头部及尾部的列表 <a class="header-anchor" href="#带头部及尾部的列表"></a></h3>
<demo-wrapper>
<list-header-footer></list-header-footer>
</demo-wrapper>

<h3 id='带滚动事件的列表'>
带滚动事件的列表 <a class="header-anchor" href="#带滚动事件的列表"></a></h3>
<demo-wrapper>
<list-scroll></list-scroll>
</demo-wrapper>

<h3 id="基础文字列表">
基础文字列表 <a class="header-anchor" href="#基础文字列表"></a>
</h3>
<p>仅包含简单文字的列表。对较简单的信息进行陈列时使用。</p>
<demo-wrapper>
<list-base-text></list-base-text>
</demo-wrapper>

<h3 id="多行文字列表">
多行文字列表 <a class="header-anchor" href="#多行文字列表"></a>
</h3>
<p>仅包含主要文字及描述性文字的列表。对较复杂的，包含多个字段或内容的信息进行展示时使用。</p>
<demo-wrapper>
<list-multiple-text></list-multiple-text>
</demo-wrapper>

<h3 id="基础图文列表">
基础图文列表 <a class="header-anchor" href="#基础图文列表"></a>
</h3>
<p>包含简单图文的列表。需使用图片和文字结合展示信息。</p>
<demo-wrapper>
<list-base-image-text></list-base-image-text>
</demo-wrapper>

<h3 id="带操作列表">
带操作列表 <a class="header-anchor" href="#带操作列表"></a>
</h3>
<p>包含操作的列表。需要对所在列进行操作时使用。</p>
<demo-wrapper>
<list-with-action></list-with-action>
</demo-wrapper>

<h3 id="不同尺寸的列表">
不同尺寸的列表 <a class="header-anchor" href="#不同尺寸的列表"></a>
</h3>
<p>提供大、中（默认）、小三种尺寸。</p>
<demo-wrapper>
<list-size></list-size>
</demo-wrapper>

<h3 id="斑马纹区分列表">
斑马纹区分列表 <a class="header-anchor" href="#斑马纹区分列表"></a>
</h3>
<demo-wrapper>
<list-zebra></list-zebra>
</demo-wrapper>

<h3 id="异步加载的列表">
异步加载的列表 <a class="header-anchor" href="#异步加载的列表"></a>
</h3>
<demo-wrapper>
<list-async-loading></list-async-loading>
</demo-wrapper>

<h3 id="带头部及尾部的列表">
带头部及尾部的列表 <a class="header-anchor" href="#带头部及尾部的列表"></a>
</h3>
<demo-wrapper>
<list-header-footer></list-header-footer>
</demo-wrapper>

<h3 id="带滚动事件的列表">
带滚动事件的列表 <a class="header-anchor" href="#带滚动事件的列表"></a>
</h3>
<demo-wrapper>
<list-scroll></list-scroll>
</demo-wrapper>
</div>
<div style={this.isShow('api')} name="API">
<div
Expand Down
Loading