Skip to content

Commit

Permalink
feat(anchor): [anchor] 增加anchor锚点新规范额外特性,并修改文档发现的图标等文档问题
Browse files Browse the repository at this point in the history
  • Loading branch information
chenxi-20 committed Oct 19, 2024
1 parent 6ecd2ff commit 7c7b659
Show file tree
Hide file tree
Showing 9 changed files with 35 additions and 94 deletions.
14 changes: 1 addition & 13 deletions examples/sites/demos/apis/anchor.js
Original file line number Diff line number Diff line change
Expand Up @@ -84,7 +84,7 @@ export default {
},
{
name: 'link-click',
type: '(event: Event, currentLink: {link: string, title: string}) => void',
type: '(event: Event, currentLink: { link: string, title: string } ) => void',
defaultValue: '',
desc: {
'zh-CN': '锚点点击事件',
Expand All @@ -93,18 +93,6 @@ export default {
mode: ['pc', 'mobile-first'],
pcDemo: 'set-container',
mfDemo: 'set-container'
},
{
name: 'on-change',
type: '(hash: string) => void',
defaultValue: '',
desc: {
'zh-CN': '使用 change 代替;[deprecated v3.12.0 废弃,v3.17.0 移除;移除原因:命名规范]',
'en-US':
'use change instead [deprecated v3.12.0 abandoned, v3.17.0 removed; reason for removal: naming convention]'
},
mode: ['pc'],
pcDemo: 'change'
}
],
methods: [],
Expand Down
18 changes: 0 additions & 18 deletions examples/sites/demos/pc/app/icon/show-title-composition-api.vue

This file was deleted.

8 changes: 0 additions & 8 deletions examples/sites/demos/pc/app/icon/show-title.spec.ts

This file was deleted.

22 changes: 0 additions & 22 deletions examples/sites/demos/pc/app/icon/show-title.vue

This file was deleted.

13 changes: 0 additions & 13 deletions examples/sites/demos/pc/app/icon/webdoc/icon.js
Original file line number Diff line number Diff line change
Expand Up @@ -15,19 +15,6 @@ export default {
},
codeFiles: ['basic-usage.vue']
},
{
demoId: 'show-title',
name: {
'zh-CN': '显示 Title',
'en-US': 'Display Title'
},
desc: {
'zh-CN': '通过其父元素的 <code>title</code> 属性,实现给图标增加 <code>Title</code> 的功能。',
'en-US':
'By using the <code>title</code> attribute of its parent element, the function of adding <code>Title</code> to the icon is implemented.'
},
codeFiles: ['show-title.vue']
},
{
demoId: 'list',
name: {
Expand Down
34 changes: 27 additions & 7 deletions packages/theme/src/anchor/index.less
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,6 @@
}

&-link {
margin: 0 0 0 var(--tv-Anchor-link-margin-left);
line-height: 22px;
cursor: pointer;

Expand All @@ -43,13 +42,13 @@
&-title {
display: block;
max-width: 100%;
padding: 1px var(--tv-Anchor-link-title-padding-right) 1px 10px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
color: var(--tv-Anchor-text-color);

&&--active {
color: var(--tv-Anchor-link-text-color-active);
}
Expand All @@ -61,10 +60,32 @@
margin-top: 0.5em;
}

.@{anchor-prefix-cls} {
& > .@{anchor-prefix-cls}-link {
margin-left: var(--tv-Anchor-link-margin-left);

& > .@{anchor-prefix-cls}-link {
& > .@{anchor-prefix-cls}-link-title {
padding-left: 32px;
}
}
}

&-link-title {
padding: 7px 8px 7px 16px;
font-size: 12px;
line-height: 1.5;

&--active {
background-color: var(--tv-Anchor-link-bg-color-active);
}
}
}

.@{anchor-prefix-cls}-link-mask {
position: absolute;
max-width: 0;
left: var(--tv-Anchor-orbit-width / 2);
left: calc(var(--tv-Anchor-orbit-width) / 2);
width: 100%;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
Expand All @@ -77,15 +98,14 @@
top: 0;
bottom: 0;
width: var(--tv-Anchor-orbit-width);
border-radius: calc(var(--tv-Anchor-orbit-width / 2));
background-color: var(--tv-Anchor-orbit-bg-color);
&-skid {
position: absolute;
left: 0;
width: var(--tv-Anchor-orbit-skid-width);
background-color: var(--tv-Anchor-orbit-bg-color);
&--active {
background-color: var(--tv-Anchor-link-bg-color-active);
background-color: var(--tv-Anchor-link-skid-bg-color-active);
}
}
}
Expand All @@ -102,11 +122,11 @@
position: relative;
padding-left: 10px;
margin-bottom: 16px;
margin-left: 8px;
}

.@{anchor-prefix-cls}-link-title {
padding-left: 16px;
padding-right: 0;
padding: 1px 0 1px 16px;
-webkit-line-clamp: 2;

&:before {
Expand Down
12 changes: 6 additions & 6 deletions packages/theme/src/anchor/vars.less
Original file line number Diff line number Diff line change
Expand Up @@ -22,23 +22,23 @@
// 选中锚点项默认文本色
--tv-Anchor-link-text-color-active: var(--tv-color-text, #191919);
// 锚点项左默认外边距
--tv-Anchor-link-margin-left: var(--tv-space-md, 8px);
--tv-Anchor-link-margin-left: var(--tv-space-sm, 4px);
// 悬浮锚点项默认文本色
--tv-Anchor-link-text-color-hover: var(--tv-color-text-secondary, #595959);
// 选中锚点背景色
--tv-Anchor-link-bg-color-active: var(--tv-color-bg-active, #f5f5f5);
// 选中锚点滑块背景色
--tv-Anchor-link-skid-bg-color-active: var(--tv-color-bg-active-primary, #191919);

// line类型
// 竖向轨道宽度
--tv-Anchor-orbit-width: var(--tv-size-base, 4px);
// 选中锚点蒙层背景色
--tv-Anchor-link-mask-bg-color: rgba(80, 115, 229, 0.15);
--tv-Anchor-link-mask-bg-color: transparent;
// 锚点竖向轨道背景色
--tv-Anchor-orbit-bg-color: var(--tv-color-border-divider-short, #dbdbdb);
// 选中锚点竖向轨道滑块宽度
--tv-Anchor-orbit-skid-width: var(--tv-size-base, 4px);
// 选中锚点竖向轨道滑块背景色
--tv-Anchor-link-bg-color-active: var(--tv-color-bg, #f5f5f5);
// 锚点标题右外边距
--tv-Anchor-link-title-padding-right: var(--tv-space-md, 8px);

// dot类型
// dot类型圆点边框色
Expand Down
4 changes: 0 additions & 4 deletions packages/theme/src/tabs/index.less
Original file line number Diff line number Diff line change
Expand Up @@ -227,10 +227,6 @@
}
}

&:hover {
font-weight: var(--tv-Tabs-item-card-hover-font-weight);
}

&.is-disabled {
cursor: not-allowed;
color: var(--tv-Tabs-item-disabled-text-color);
Expand Down
4 changes: 1 addition & 3 deletions packages/theme/src/tabs/vars.less
Original file line number Diff line number Diff line change
Expand Up @@ -77,8 +77,6 @@
--tv-Tabs-item-card-active-bg-color: var(--tv-color-act-primary-bg-white, #ffffff);
// card类型标签项默认上|右边框色
--tv-Tabs-item-card-border-color: transparent;
// card类型标签项悬浮字重
--tv-Tabs-item-card-hover-font-weight: var(--tv-font-weight-bold, 600);
// bordercard类型选中项圆角
--tv-Tabs-dark-border-radius: var(--tv-border-radius-md, 6px) var(--tv-border-radius-md, 6px) 0 0;
// bordercard类型选中项文本色
Expand All @@ -98,7 +96,7 @@
// bordercard类型标签栏边框厚度
--tv-Tabs-dark-border-weight: 0px;
// bordercard类型默认背景色
--tv-Tabs-header-dark-bg-color: var(--tv-color-bg-secondary, #ffffff);
--tv-Tabs-header-dark-bg-color: var(--tv-color-bg-primary, #191919);
// bordercard类型标签项高度
--tv-Tabs-dark-item-height: calc(var(--tv-size-base, 4px) * 11.75);
// 标签项超出时上下按钮尺寸
Expand Down

0 comments on commit 7c7b659

Please sign in to comment.