From 41d40c788e2793b7707ee1ca0719d3d66bba838d Mon Sep 17 00:00:00 2001 From: "Y." Date: Tue, 20 Aug 2024 16:28:12 +0800 Subject: [PATCH] docs(Link): update docs and style files (#1887) Co-authored-by: anlyyao --- docs/mobile/api/link.en-US.md | 17 ++++++ docs/mobile/api/link.md | 15 +++++ style/mobile/components/link/_index.less | 15 +++-- style/mobile/components/link/_var.less | 76 +++++++++++++++++++----- 4 files changed, 103 insertions(+), 20 deletions(-) create mode 100644 docs/mobile/api/link.en-US.md create mode 100644 docs/mobile/api/link.md diff --git a/docs/mobile/api/link.en-US.md b/docs/mobile/api/link.en-US.md new file mode 100644 index 0000000000..bbf13f3517 --- /dev/null +++ b/docs/mobile/api/link.en-US.md @@ -0,0 +1,17 @@ +--- +title: Link +description: Links are used to start a new task or jump to a new page. + +spline: base +isComponent: true +toc: false +--- + + +### 01 Component Type + +{{ base }} + +### 02 Component Status + +{{ status }} \ No newline at end of file diff --git a/docs/mobile/api/link.md b/docs/mobile/api/link.md new file mode 100644 index 0000000000..f790c9d00e --- /dev/null +++ b/docs/mobile/api/link.md @@ -0,0 +1,15 @@ +--- +title: Link 标签 +description: 用于开启一个任务或跳转一个新页面。 +spline: base +isComponent: true +toc: false +--- + +### 01 组件类型 + +{{ base }} + +### 02 组件状态 + +{{ status }} diff --git a/style/mobile/components/link/_index.less b/style/mobile/components/link/_index.less index d78ac1296d..8bdf258599 100644 --- a/style/mobile/components/link/_index.less +++ b/style/mobile/components/link/_index.less @@ -35,11 +35,13 @@ color: @@disabledColor; } - &.@{link}--hover { - color: @@activeColor; + &:active { + &.@{link}--hover { + color: @@activeColor; - &.@{link}--underline::after { - border-color: @@activeColor; + &.@{link}--underline::after { + border-color: @@activeColor; + } } } } @@ -60,6 +62,7 @@ display: flex; align-items: center; box-sizing: content-box; + text-decoration: none; &--underline::after { content: ""; @@ -67,16 +70,18 @@ left: 0; right: 0; height: 0; - bottom: 0; + bottom: 2px; opacity: 1; border-bottom: 1px solid rgb(205, 11, 231); } &__prefix-icon:not(:empty) + &__content:not(:empty) { padding-left: 4px; + display: inherit; } &__content:not(:empty) + &__suffix-icon:not(:empty) { padding-left: 4px; + display: inherit; } } diff --git a/style/mobile/components/link/_var.less b/style/mobile/components/link/_var.less index 94cd5fb2cf..74f31121c3 100644 --- a/style/mobile/components/link/_var.less +++ b/style/mobile/components/link/_var.less @@ -1,28 +1,73 @@ // 状态色 - 默认色 -@link-default-color: var(--td-link-default-color, @font-gray-1); // default 主题默认态颜色 -@link-default-active-color: var(--td-link-default-active-color, @brand-color-active); // default 主题激活态颜色 -@link-default-disabled-color: var(--td-link-default-disabled-color, @text-color-disabled); // default 主题禁用态颜色 +@link-default-color: var( + --td-link-default-color, + @text-color-primary +); // default 主题默认态颜色 +@link-default-active-color: var( + --td-link-default-active-color, + @brand-color-active +); // default 主题激活态颜色 +@link-default-disabled-color: var( + --td-link-default-disabled-color, + @text-color-disabled +); // default 主题禁用态颜色 // 状态色 - 主色 -@link-primary-color: var(--td-link-primary-color, @brand-color); // primary 主题默认态颜色 -@link-primary-active-color: var(--td-link-primary-active-color, @brand-color-active); // primary 主题激活态颜色 -@link-primary-disabled-color: var(--td-link-primary-disabled-color, @brand-color-disabled); // primary 主题禁用态颜色 +@link-primary-color: var( + --td-link-primary-color, + @brand-color +); // primary 主题默认态颜色 +@link-primary-active-color: var( + --td-link-primary-active-color, + @brand-color-active +); // primary 主题激活态颜色 +@link-primary-disabled-color: var( + --td-link-primary-disabled-color, + @brand-color-disabled +); // primary 主题禁用态颜色 // 状态色 - 成功 -@link-success-color: var(--td-link-success-color, @success-color); // success 主题默认态颜色 -@link-success-active-color: var(--td-link-success-active-color, @success-color-active); // success 主题激活态颜色 -@link-success-disabled-color: var(--td-link-success-disabled-color, @success-color-disabled); // success 主题禁用态颜色 +@link-success-color: var( + --td-link-success-color, + @success-color +); // success 主题默认态颜色 +@link-success-active-color: var( + --td-link-success-active-color, + @success-color-active +); // success 主题激活态颜色 +@link-success-disabled-color: var( + --td-link-success-disabled-color, + @success-color-disabled +); // success 主题禁用态颜色 // 状态色 - 警告 -@link-warning-color: var(--td-link-warning-color, @warning-color); // warning 主题默认态颜色 -@link-warning-active-color: var(--td-link-warning-active-color, @warning-color-active); // warning 主题激活态颜色 -@link-warning-disabled-color: var(--td-link-warning-disabled-color, @warning-color-disabled); // warning 主题禁用态颜色 +@link-warning-color: var( + --td-link-warning-color, + @warning-color +); // warning 主题默认态颜色 +@link-warning-active-color: var( + --td-link-warning-active-color, + @warning-color-active +); // warning 主题激活态颜色 +@link-warning-disabled-color: var( + --td-link-warning-disabled-color, + @warning-color-disabled +); // warning 主题禁用态颜色 // 状态色 - 危险 -@link-danger-color: var(--td-link-danger-color, @error-color); // danger 主题默认态颜色 -@link-danger-active-color: var(--td-link-danger-active-color, @error-color-active); // danger 主题激活态颜色 -@link-danger-disabled-color: var(--td-link-danger-disabled-color, @error-color-disabled); // danger 主题禁用态颜色 +@link-danger-color: var( + --td-link-danger-color, + @error-color +); // danger 主题默认态颜色 +@link-danger-active-color: var( + --td-link-danger-active-color, + @error-color-active +); // danger 主题激活态颜色 +@link-danger-disabled-color: var( + --td-link-danger-disabled-color, + @error-color-disabled +); // danger 主题禁用态颜色 // 字号 @link-content-small-font-size: 12px; @@ -37,6 +82,7 @@ @link-content-large-line-height: 24px; @link-icon-large-font-size: 18px; +@link-icon-margin: 6px; @themes: primary, success, warning, default, danger; @link: ~"@{prefix}-link";