first commit
This commit is contained in:
lingxiao865
33
uni_modules/tdesign-uniapp/components/footer/README.en-US.md
Normal file
33
uni_modules/tdesign-uniapp/components/footer/README.en-US.md
Normal file
@@ -0,0 +1,33 @@
|
||||
:: BASE_DOC ::
|
||||
|
||||
## API
|
||||
|
||||
### Footer Props
|
||||
|
||||
name | type | default | description | required
|
||||
-- | -- | -- | -- | --
|
||||
custom-style | Object | - | CSS(Cascading Style Sheets) | N
|
||||
copyright | String | '' | `deprecated` | N
|
||||
links | Array | [] | Typescript：`Array<LinkObj>` `interface LinkObj { name: string; url?: string; openType?: 'navigate' \| 'redirect' \| 'relaunch' \| 'switchTab' \| 'navigateBack' }`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/uniapp-components/footer/type.ts) | N
|
||||
logo | Object | - | Typescript：`FooterLogo` `interface FooterLogo { icon: string; title?: string; url?: string }`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/uniapp-components/footer/type.ts) | N
|
||||
text | String | '' | \- | N
|
||||
text-link-list | Array | [] | `deprecated`。Typescript：`Array<LinkObj>` `interface LinkObj { name: string; url?: string; openType?: 'navigate' \| 'redirect' \| 'relaunch' \| 'switchTab' \| 'navigateBack' }`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/uniapp-components/footer/type.ts) | N
|
||||
theme | String | 'text' | `deprecated`。options: text/logo | N
|
||||
|
||||
### CSS Variables
|
||||
|
||||
The component provides the following CSS variables, which can be used to customize styles.
|
||||
Name | Default Value | Description
|
||||
-- | -- | --
|
||||
--td-footer-link-color | @brand-color | -
|
||||
--td-footer-link-dividing-line-color | @text-color-placeholder | -
|
||||
--td-footer-link-dividing-line-padding | @spacer-1 | -
|
||||
--td-footer-link-font | @font-body-medium | -
|
||||
--td-footer-logo-icon-height | 48rpx | -
|
||||
--td-footer-logo-icon-margin-right | @spacer | -
|
||||
--td-footer-logo-icon-width | 48rpx | -
|
||||
--td-footer-logo-title-font | @font-title-medium | -
|
||||
--td-footer-logo-title-url-width | 256rpx | -
|
||||
--td-footer-text-color | @text-color-placeholder | -
|
||||
--td-footer-text-font | @font-body-small | -
|
||||
--td-footer-text-margin-top | 8rpx | -
|
||||
61
uni_modules/tdesign-uniapp/components/footer/README.md
Normal file
61
uni_modules/tdesign-uniapp/components/footer/README.md
Normal file
@@ -0,0 +1,61 @@
|
||||
---
|
||||
title: Footer 页脚
|
||||
description: 用于基础列表展示，可附带文字、品牌 logo、操作，常用商详、个人中心、设置等页面。
|
||||
spline: data
|
||||
isComponent: true
|
||||
---
|
||||
|
||||
|
||||
## 引入
|
||||
|
||||
可在 `main.ts` 或在需要使用的页面或组件中引入。
|
||||
|
||||
```js
|
||||
import TFooter from '@tdesign/uniapp/footer/footer.vue';
|
||||
```
|
||||
|
||||
### 类型
|
||||
|
||||
基础页脚
|
||||
|
||||
{{ base }}
|
||||
|
||||
基础加链接页脚
|
||||
|
||||
{{ link }}
|
||||
|
||||
品牌页脚
|
||||
|
||||
{{ logo }}
|
||||
|
||||
## API
|
||||
|
||||
### Footer Props
|
||||
|
||||
名称 | 类型 | 默认值 | 描述 | 必传
|
||||
-- | -- | -- | -- | --
|
||||
custom-style | Object | - | 自定义样式 | N
|
||||
copyright | String | '' | 已废弃。版权信息，type 为`text`生效 | N
|
||||
links | Array | [] | 链接列表。name 表示链接名称， url 表示链接 page 路径，目前只支持小程序内部跳转，openType 表示跳转方式。TS 类型：`Array<LinkObj>` `interface LinkObj { name: string; url?: string; openType?: 'navigate' \| 'redirect' \| 'relaunch' \| 'switchTab' \| 'navigateBack' }`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/uniapp-components/footer/type.ts) | N
|
||||
logo | Object | - | 图标配置。`logo.icon` 表示图标链接地址，`logo.title` 表示标题文本，`logo.url` 表示链接。TS 类型：`FooterLogo` `interface FooterLogo { icon: string; title?: string; url?: string }`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/uniapp-components/footer/type.ts) | N
|
||||
text | String | '' | 版权信息 | N
|
||||
text-link-list | Array | [] | 已废弃。链接列表，type 为`text`生效。name 表示链接名称， url 表示链接 page 路径，目前只支持小程序内部跳转，openType 表示跳转方式。TS 类型：`Array<LinkObj>` `interface LinkObj { name: string; url?: string; openType?: 'navigate' \| 'redirect' \| 'relaunch' \| 'switchTab' \| 'navigateBack' }`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/uniapp-components/footer/type.ts) | N
|
||||
theme | String | 'text' | 已废弃。页脚展示类型。可选项：text/logo | N
|
||||
|
||||
### CSS Variables
|
||||
|
||||
组件提供了下列 CSS 变量，可用于自定义样式。
|
||||
名称 | 默认值 | 描述
|
||||
-- | -- | --
|
||||
--td-footer-link-color | @brand-color | -
|
||||
--td-footer-link-dividing-line-color | @text-color-placeholder | -
|
||||
--td-footer-link-dividing-line-padding | @spacer-1 | -
|
||||
--td-footer-link-font | @font-body-medium | -
|
||||
--td-footer-logo-icon-height | 48rpx | -
|
||||
--td-footer-logo-icon-margin-right | @spacer | -
|
||||
--td-footer-logo-icon-width | 48rpx | -
|
||||
--td-footer-logo-title-font | @font-title-medium | -
|
||||
--td-footer-logo-title-url-width | 256rpx | -
|
||||
--td-footer-text-color | @text-color-placeholder | -
|
||||
--td-footer-text-font | @font-body-small | -
|
||||
--td-footer-text-margin-top | 8rpx | -
|
||||
47
uni_modules/tdesign-uniapp/components/footer/footer.css
Normal file
47
uni_modules/tdesign-uniapp/components/footer/footer.css
Normal file
@@ -0,0 +1,47 @@
|
||||
.t-footer {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
.t-footer__text {
|
||||
font: var(--td-footer-text-font, var(--td-font-body-small, 24rpx / 40rpx var(--td-font-family, PingFang SC, Microsoft YaHei, Arial Regular)));
|
||||
color: var(--td-footer-text-color, var(--td-text-color-placeholder, var(--td-font-gray-3, rgba(0, 0, 0, 0.4))));
|
||||
}
|
||||
.t-footer__link-list + .t-footer__text:not(:empty) {
|
||||
margin-top: var(--td-footer-text-margin-top, 8rpx);
|
||||
}
|
||||
.t-footer__link-list {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.t-footer__link-item {
|
||||
color: var(--td-footer-link-color, var(--td-brand-color, var(--td-primary-color-7, #0052d9)));
|
||||
font: var(--td-footer-link-font, var(--td-font-body-medium, 28rpx / 44rpx var(--td-font-family, PingFang SC, Microsoft YaHei, Arial Regular)));
|
||||
text-decoration: underline;
|
||||
}
|
||||
.t-footer__link-line {
|
||||
font-size: 24rpx;
|
||||
color: var(--td-footer-link-dividing-line-color, var(--td-text-color-placeholder, var(--td-font-gray-3, rgba(0, 0, 0, 0.4))));
|
||||
display: inline-block;
|
||||
padding: 0 var(--td-footer-link-dividing-line-padding, var(--td-spacer-1, 24rpx));
|
||||
}
|
||||
.t-footer__logo {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.t-footer__icon {
|
||||
width: var(--td-footer-logo-icon-width, 48rpx);
|
||||
height: var(--td-footer-logo-icon-height, 48rpx);
|
||||
margin-right: var(--td-footer-logo-icon-margin-right, var(--td-spacer, 16rpx));
|
||||
}
|
||||
.t-footer__title {
|
||||
color: var(--td-text-color-primary, var(--td-font-gray-1, rgba(0, 0, 0, 0.9)));
|
||||
font: var(--td-footer-logo-title-font, var(--td-font-title-medium, 600 32rpx / 48rpx var(--td-font-family, PingFang SC, Microsoft YaHei, Arial Regular)));
|
||||
font-style: italic;
|
||||
}
|
||||
.t-footer__title-url {
|
||||
width: var(--td-footer-logo-title-url-width, 256rpx);
|
||||
}
|
||||
117
uni_modules/tdesign-uniapp/components/footer/footer.vue
Normal file
117
uni_modules/tdesign-uniapp/components/footer/footer.vue
Normal file
@@ -0,0 +1,117 @@
|
||||
<template>
|
||||
<view
|
||||
:style="tools._style([customStyle])"
|
||||
:class="[
|
||||
classPrefix,
|
||||
tClass
|
||||
]"
|
||||
>
|
||||
<block v-if="logo && Object.keys(logo).length">
|
||||
<view :class="classPrefix + '__logo'">
|
||||
<t-image
|
||||
v-if="logo.icon"
|
||||
:t-class="classPrefix + '__icon'"
|
||||
:custom-style="iconCustomStyle"
|
||||
:src="logo.icon"
|
||||
/>
|
||||
<view
|
||||
v-if="logo.title"
|
||||
:class="classPrefix + '__title'"
|
||||
>
|
||||
{{ logo.title }}
|
||||
</view>
|
||||
<t-image
|
||||
v-else-if="logo.url"
|
||||
:t-class="classPrefix + '__title-url'"
|
||||
:custom-style="titleUrlCustomStyle"
|
||||
:src="logo.url"
|
||||
mode="widthFix"
|
||||
/>
|
||||
</view>
|
||||
</block>
|
||||
<block v-else>
|
||||
<view
|
||||
v-if="links.length > 0"
|
||||
:class="classPrefix + '__link-list'"
|
||||
>
|
||||
<block
|
||||
v-for="(item, index) in links"
|
||||
:key="index"
|
||||
>
|
||||
<navigator
|
||||
:url="item.url"
|
||||
:open-type="item.openType"
|
||||
hover-class="none"
|
||||
:class="classPrefix + '__link-item'"
|
||||
>
|
||||
{{ item.name }}
|
||||
</navigator>
|
||||
|
||||
<view
|
||||
v-if="index !== links.length - 1"
|
||||
:aria-hidden="true"
|
||||
:class="classPrefix + '__link-line'"
|
||||
>
|
||||
|
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
<view :class="classPrefix + '__text'">
|
||||
{{ text }}
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
import TImage from '../image/image';
|
||||
import { uniComponent } from '../common/src/index';
|
||||
import { prefix } from '../common/config';
|
||||
import props from './props';
|
||||
import tools from '../common/utils.wxs';
|
||||
|
||||
|
||||
const name = `${prefix}-footer`;
|
||||
|
||||
|
||||
export default uniComponent({
|
||||
name,
|
||||
options: {
|
||||
styleIsolation: 'shared',
|
||||
},
|
||||
externalClasses: [
|
||||
`${prefix}-class`,
|
||||
],
|
||||
components: {
|
||||
TImage,
|
||||
},
|
||||
props: {
|
||||
...props,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
prefix,
|
||||
classPrefix: name,
|
||||
tools,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
iconCustomStyle() {
|
||||
return tools._style({
|
||||
width: 'var(--td-footer-logo-icon-width, 24px)',
|
||||
height: 'var(--td-footer-logo-icon-height, 24px)',
|
||||
marginRight: 'var(--td-footer-logo-icon-margin-right, var(--td-spacer, 8px))',
|
||||
});
|
||||
},
|
||||
titleUrlCustomStyle() {
|
||||
return tools._style({
|
||||
width: 'var(--td-footer-logo-title-url-width, 128px)',
|
||||
});
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
},
|
||||
});
|
||||
</script>
|
||||
<style scoped>
|
||||
@import './footer.css';
|
||||
</style>
|
||||
23
uni_modules/tdesign-uniapp/components/footer/props.ts
Normal file
23
uni_modules/tdesign-uniapp/components/footer/props.ts
Normal file
@@ -0,0 +1,23 @@
|
||||
/* eslint-disable */
|
||||
|
||||
/**
|
||||
* 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
|
||||
* */
|
||||
|
||||
import type { TdFooterProps } from './type';
|
||||
export default {
|
||||
/** 链接列表。name 表示链接名称， url 表示链接 page 路径，目前只支持小程序内部跳转，openType 表示跳转方式 */
|
||||
links: {
|
||||
type: Array,
|
||||
default: (): TdFooterProps['links'] => [],
|
||||
},
|
||||
/** 图标配置。`logo.icon` 表示图标链接地址，`logo.title` 表示标题文本，`logo.url` 表示链接 */
|
||||
logo: {
|
||||
type: Object,
|
||||
},
|
||||
/** 版权信息 */
|
||||
text: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
};
|
||||
34
uni_modules/tdesign-uniapp/components/footer/type.ts
Normal file
34
uni_modules/tdesign-uniapp/components/footer/type.ts
Normal file
@@ -0,0 +1,34 @@
|
||||
/* eslint-disable */
|
||||
|
||||
/**
|
||||
* 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
|
||||
* */
|
||||
|
||||
export interface TdFooterProps {
|
||||
/**
|
||||
* 链接列表。name 表示链接名称， url 表示链接 page 路径，目前只支持小程序内部跳转，openType 表示跳转方式
|
||||
* @default []
|
||||
*/
|
||||
links?: Array<LinkObj>;
|
||||
/**
|
||||
* 图标配置。`logo.icon` 表示图标链接地址，`logo.title` 表示标题文本，`logo.url` 表示链接
|
||||
*/
|
||||
logo?: FooterLogo;
|
||||
/**
|
||||
* 版权信息
|
||||
* @default ''
|
||||
*/
|
||||
text?: string;
|
||||
}
|
||||
|
||||
export interface LinkObj {
|
||||
name: string;
|
||||
url?: string;
|
||||
openType?: 'navigate' | 'redirect' | 'relaunch' | 'switchTab' | 'navigateBack';
|
||||
}
|
||||
|
||||
export interface FooterLogo {
|
||||
icon: string;
|
||||
title?: string;
|
||||
url?: string;
|
||||
}
|
||||
Reference in New Issue
Block a user