From fac68661dfb504f25c0ddccaf584566b4d3aa4f4 Mon Sep 17 00:00:00 2001 From: panyongxu Date: Wed, 17 Nov 2021 19:42:54 +0800 Subject: [PATCH 01/10] =?UTF-8?q?feat:=20[readTip]=20=E6=96=B0=E5=A2=9Eove?= =?UTF-8?q?rlayClassName=20=E5=B1=9E=E6=80=A7?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/devui-vue/devui/read-tip/src/read-tip.tsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/packages/devui-vue/devui/read-tip/src/read-tip.tsx b/packages/devui-vue/devui/read-tip/src/read-tip.tsx index 74333c4d..4cb16a00 100644 --- a/packages/devui-vue/devui/read-tip/src/read-tip.tsx +++ b/packages/devui-vue/devui/read-tip/src/read-tip.tsx @@ -134,7 +134,8 @@ export default defineComponent({ } return () => { - return (
+ return ( +
@@ -157,7 +158,8 @@ export default defineComponent({
) )} -
) +
+ ) } } }) -- Gitee From d32a2f3f0900199fc4d54548be7112f264e7806b Mon Sep 17 00:00:00 2001 From: panyongxu Date: Wed, 17 Nov 2021 19:45:33 +0800 Subject: [PATCH 02/10] =?UTF-8?q?feat:=20[readTip]=E6=96=87=E6=A1=A3?= =?UTF-8?q?=E5=8A=9F=E8=83=BD=E6=96=B0=E5=A2=9E?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/devui-vue/.ls-lint.yml | 2 +- packages/devui-vue/devui/read-tip/src/read-tip-template.tsx | 2 +- packages/devui-vue/devui/read-tip/src/read-tip-types.ts | 2 ++ packages/devui-vue/devui/read-tip/src/read-tip.tsx | 2 +- packages/devui-vue/docs/components/read-tip/index.md | 4 ++++ 5 files changed, 9 insertions(+), 3 deletions(-) diff --git a/packages/devui-vue/.ls-lint.yml b/packages/devui-vue/.ls-lint.yml index b367ef20..03019617 100644 --- a/packages/devui-vue/.ls-lint.yml +++ b/packages/devui-vue/.ls-lint.yml @@ -4,7 +4,7 @@ ls: .scss: kebab-case .vue: kebab-case .js: kebab-case - .ts: kebab-case + # .ts: kebab-case .tsx: kebab-case .spec.ts: kebab-case .route.ts: kebab-case diff --git a/packages/devui-vue/devui/read-tip/src/read-tip-template.tsx b/packages/devui-vue/devui/read-tip/src/read-tip-template.tsx index 9ef7afb9..f6d1cafa 100644 --- a/packages/devui-vue/devui/read-tip/src/read-tip-template.tsx +++ b/packages/devui-vue/devui/read-tip/src/read-tip-template.tsx @@ -21,7 +21,7 @@ export default defineComponent({
{ diff --git a/packages/devui-vue/devui/read-tip/src/read-tip-types.ts b/packages/devui-vue/devui/read-tip/src/read-tip-types.ts index 422d2990..6dcfe1f5 100644 --- a/packages/devui-vue/devui/read-tip/src/read-tip-types.ts +++ b/packages/devui-vue/devui/read-tip/src/read-tip-types.ts @@ -21,6 +21,7 @@ export type DefaultTemplateProps = { id? : string temp: string contentTemplate: boolean + overlayClassName?: string } export interface ReadTipOptions { @@ -32,6 +33,7 @@ export interface ReadTipOptions { overlayClassName?: string appendToBody?: boolean rules: ReadTipRules + } export type ReadTipRules = ReadTipRule | ReadTipRule[]; diff --git a/packages/devui-vue/devui/read-tip/src/read-tip.tsx b/packages/devui-vue/devui/read-tip/src/read-tip.tsx index 4cb16a00..218ef18e 100644 --- a/packages/devui-vue/devui/read-tip/src/read-tip.tsx +++ b/packages/devui-vue/devui/read-tip/src/read-tip.tsx @@ -135,7 +135,7 @@ export default defineComponent({ } return () => { return ( -
+
diff --git a/packages/devui-vue/docs/components/read-tip/index.md b/packages/devui-vue/docs/components/read-tip/index.md index d3c4c955..f28836d8 100644 --- a/packages/devui-vue/docs/components/read-tip/index.md +++ b/packages/devui-vue/docs/components/read-tip/index.md @@ -28,6 +28,7 @@ import { defineComponent } from 'vue' const readTipOptions = { trigger: 'click', + overlayClassName:'red', rules: { trigger: 'click', position:'top', @@ -54,6 +55,9 @@ const readTipOptions = { .readtip-target:hover { text-decoration: underline; } +.red { + color: red +} ``` -- Gitee From d72e9cc0cf22c823fc85b04c33efce839a18c4b6 Mon Sep 17 00:00:00 2001 From: panyongxu Date: Wed, 17 Nov 2021 20:59:59 +0800 Subject: [PATCH 03/10] =?UTF-8?q?feat:=20[readTip]=20=E5=A2=9E=E5=8A=A0app?= =?UTF-8?q?end=E5=B1=9E=E6=80=A7=E5=8A=9F=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/devui-vue/devui/read-tip/src/read-tip-types.ts | 5 +++-- packages/devui-vue/docs/components/read-tip/index.md | 4 +++- 2 files changed, 6 insertions(+), 3 deletions(-) diff --git a/packages/devui-vue/devui/read-tip/src/read-tip-types.ts b/packages/devui-vue/devui/read-tip/src/read-tip-types.ts index 6dcfe1f5..9c507b21 100644 --- a/packages/devui-vue/devui/read-tip/src/read-tip-types.ts +++ b/packages/devui-vue/devui/read-tip/src/read-tip-types.ts @@ -18,10 +18,11 @@ export type DefaultTemplateProps = { top?: number selector?: string position?: string - id? : string + id?: string temp: string contentTemplate: boolean overlayClassName?: string + appendToBody?: boolean } export interface ReadTipOptions { @@ -33,7 +34,7 @@ export interface ReadTipOptions { overlayClassName?: string appendToBody?: boolean rules: ReadTipRules - + } export type ReadTipRules = ReadTipRule | ReadTipRule[]; diff --git a/packages/devui-vue/docs/components/read-tip/index.md b/packages/devui-vue/docs/components/read-tip/index.md index f28836d8..7e7b1fe6 100644 --- a/packages/devui-vue/docs/components/read-tip/index.md +++ b/packages/devui-vue/docs/components/read-tip/index.md @@ -29,6 +29,8 @@ import { defineComponent } from 'vue' const readTipOptions = { trigger: 'click', overlayClassName:'red', + appendToBody: false, + rules: { trigger: 'click', position:'top', @@ -37,7 +39,6 @@ const readTipOptions = { content: 'This is Jack\'s profile', }, }; - +``` + +::: + + + +### 异步获取数据 + +通过设置selector选择需要显示readtip的元素,传入title和content设置显示的内容。 +:::demo + +```vue + + + + + ``` -- Gitee From 5f470e3b16362ba73a93ec5ca05bb36a0021688f Mon Sep 17 00:00:00 2001 From: panyongxu Date: Wed, 17 Nov 2021 23:40:47 +0800 Subject: [PATCH 05/10] =?UTF-8?q?feat:=20[readTip]=20=E5=88=9D=E6=AD=A5?= =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E6=94=AF=E6=8C=81=20appendToBody=E5=B1=9E?= =?UTF-8?q?=E6=80=A7?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../devui/read-tip/src/read-tip-template.tsx | 35 ++++++++++++-- .../devui-vue/devui/read-tip/src/read-tip.tsx | 47 +++++++++---------- .../docs/components/read-tip/index.md | 12 +++-- 3 files changed, 62 insertions(+), 32 deletions(-) diff --git a/packages/devui-vue/devui/read-tip/src/read-tip-template.tsx b/packages/devui-vue/devui/read-tip/src/read-tip-template.tsx index e2d621b0..6483c7af 100644 --- a/packages/devui-vue/devui/read-tip/src/read-tip-template.tsx +++ b/packages/devui-vue/devui/read-tip/src/read-tip-template.tsx @@ -1,4 +1,4 @@ -import { defineComponent, ref, Ref, onMounted, Teleport, toRefs } from 'vue' +import { defineComponent, reactive, ref, Ref, onMounted, Teleport, toRefs } from 'vue' import { readTipProps, ReadTipProps, DefaultTemplateProps } from './read-tip-types' import './read-tip.scss' @@ -10,25 +10,50 @@ export default defineComponent({ const { defaultTemplateProps } = toRefs(props) let rule: DefaultTemplateProps = defaultTemplateProps.value const query = rule?.id ? `#${rule.id}` : rule.selector - + const domBounding = document.querySelector(query).getBoundingClientRect(); + const styles: any = reactive(rule.appendToBody ? { + top: domBounding.y + document.documentElement.scrollTop + 'px', + left: domBounding.x + 'px', + transform: '' + } : {}) if (typeof rule.dataFn === 'function') { - const dataFn = rule.dataFn({ element: rule.dom, rule }) + const dataFn = rule.dataFn({ element: document.querySelector(query), rule }) rule = { ...rule, ...dataFn } } const temp = ref(null) onMounted(() => { // 当定位为top展示时 元素定位高度需要计算弹窗的高度 - if (rule.position == 'top') { + if (rule.position == 'top' && !rule.appendToBody) { temp.value.style.top = (- temp.value.offsetHeight - 10) + 'px' + } else if (rule.appendToBody) { + switch(rule.position) { + case 'top': + styles.transform = 'translate(0px, calc(-100% - 10px))' + break; + case 'left': + styles.transform = 'translate(calc(-100% - 10px), 0)' + break; + case 'bottom': + styles.top = domBounding.y + domBounding.height + document.documentElement.scrollTop + 10 + 'px' + break; + case 'right': + console.log(temp.value) + styles.left = domBounding.x + domBounding.width + 'px' + break; + } + // const domBounding = rule.dom.getBoundingClientRect(); + // styles.top = domBounding.y + document.documentElement.scrollTop - temp.value.offsetHeight - 10 + 'px' + // styles.left = domBounding.x + 'px'; } }) return () => { return ( - +
{ diff --git a/packages/devui-vue/devui/read-tip/src/read-tip.tsx b/packages/devui-vue/devui/read-tip/src/read-tip.tsx index eb98c6f5..1c77ac18 100644 --- a/packages/devui-vue/devui/read-tip/src/read-tip.tsx +++ b/packages/devui-vue/devui/read-tip/src/read-tip.tsx @@ -50,10 +50,10 @@ export default defineComponent({ rule.overlayClassName = rule.overlayClassName || options.overlayClassName rule.position = rule.position || options.position rule.contentTemplate = !!(ctx.slots.contentTemplate) + if (!('appendToBody' in rule)) rule.appendToBody = options.appendToBody const doms = defaultSlot.value.querySelectorAll(rule.selector); [...doms].map((dom, index) => { - dom.style.position = 'relative' - rule.dom = dom + if (rule.appendToBody === false) dom.style.position = 'relative'; let newRule = reactive({ id: null }) @@ -74,7 +74,6 @@ export default defineComponent({ return rules } function show(dom, rule) { - dom.id rule.status = true } // 把传入的props.rules统一转为数组对象格式 @@ -137,30 +136,30 @@ export default defineComponent({ } return () => { return ( -
-
- { - ctx.slots?.default() - } -
- - {(refRules).map(rule => ( -
+
- {rule.status && ( - { - rule.contentTemplate && ctx.slots?.contentTemplate() - } - ) - + { + ctx.slots?.default() }
- ) - )} -
+ + {(refRules).map(rule => ( +
+ {rule.status && ( + { + rule.contentTemplate && ctx.slots?.contentTemplate() + } + ) + + } +
+ ) + )} +
) } } diff --git a/packages/devui-vue/docs/components/read-tip/index.md b/packages/devui-vue/docs/components/read-tip/index.md index 667fede3..d5af1dbd 100644 --- a/packages/devui-vue/docs/components/read-tip/index.md +++ b/packages/devui-vue/docs/components/read-tip/index.md @@ -76,9 +76,8 @@ const readTipOptions = {

Click here to display first content

Click here to display second content

Hover here to display third content

-

Another third content with same class name

- -
+

Hover here to display third content

+

4Another third content with same class name

@@ -114,6 +113,13 @@ const readTipOptions = { position: 'bottom', title: 'This Is the Third Title', content: 'Aenean libero urna, scelerisque tincidunt', + }, + { + trigger: 'click', + selector: '.four-content', + position: 'right', + title: 'This Is the Third Title', + content: 'Aenean libero urna, scelerisque tincidunt', }, ], }; -- Gitee From ea6d630fa0e04f8d3c87749e828d6707b31d51af Mon Sep 17 00:00:00 2001 From: panyongxu Date: Thu, 18 Nov 2021 22:32:06 +0800 Subject: [PATCH 06/10] =?UTF-8?q?feat(readTip):=20=E5=AE=8C=E5=96=84?= =?UTF-8?q?=E6=96=87=E6=A1=A3=E5=B9=B6=E6=B7=BB=E5=8A=A0=E8=B7=B3=E8=BD=AC?= =?UTF-8?q?demo?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../devui/read-tip/src/read-tip-template.tsx | 60 +++--- .../devui/read-tip/src/read-tip-types.ts | 1 - .../devui/read-tip/src/read-tip.scss | 11 -- .../devui-vue/devui/read-tip/src/read-tip.tsx | 7 +- .../docs/components/read-tip/index.md | 186 ++++++++++++++++-- 5 files changed, 203 insertions(+), 62 deletions(-) diff --git a/packages/devui-vue/devui/read-tip/src/read-tip-template.tsx b/packages/devui-vue/devui/read-tip/src/read-tip-template.tsx index 6483c7af..661e0302 100644 --- a/packages/devui-vue/devui/read-tip/src/read-tip-template.tsx +++ b/packages/devui-vue/devui/read-tip/src/read-tip-template.tsx @@ -7,15 +7,11 @@ export default defineComponent({ props: readTipProps, emits: [], setup(props: ReadTipProps, ctx) { - const { defaultTemplateProps } = toRefs(props) + const { defaultTemplateProps, } = toRefs(props) let rule: DefaultTemplateProps = defaultTemplateProps.value - const query = rule?.id ? `#${rule.id}` : rule.selector - const domBounding = document.querySelector(query).getBoundingClientRect(); - const styles: any = reactive(rule.appendToBody ? { - top: domBounding.y + document.documentElement.scrollTop + 'px', - left: domBounding.x + 'px', - transform: '' - } : {}) + const query = rule?.id ? `#${rule.id}` : rule.selector; + + const styles: any = reactive({}); if (typeof rule.dataFn === 'function') { const dataFn = rule.dataFn({ element: document.querySelector(query), rule }) rule = { ...rule, ...dataFn } @@ -23,28 +19,32 @@ export default defineComponent({ const temp = ref(null) onMounted(() => { - // 当定位为top展示时 元素定位高度需要计算弹窗的高度 - if (rule.position == 'top' && !rule.appendToBody) { - temp.value.style.top = (- temp.value.offsetHeight - 10) + 'px' - } else if (rule.appendToBody) { - switch(rule.position) { - case 'top': - styles.transform = 'translate(0px, calc(-100% - 10px))' - break; - case 'left': - styles.transform = 'translate(calc(-100% - 10px), 0)' - break; - case 'bottom': - styles.top = domBounding.y + domBounding.height + document.documentElement.scrollTop + 10 + 'px' - break; - case 'right': - console.log(temp.value) - styles.left = domBounding.x + domBounding.width + 'px' - break; - } - // const domBounding = rule.dom.getBoundingClientRect(); - // styles.top = domBounding.y + document.documentElement.scrollTop - temp.value.offsetHeight - 10 + 'px' - // styles.left = domBounding.x + 'px'; + const domBounding = document.querySelector(query).getBoundingClientRect(); + const distance = 10; + let positionTop = 0; + let positionLeft = 0; + const targetDom = document.querySelector('.read-tip-container').getBoundingClientRect(); + if (rule.appendToBody) { + positionTop = domBounding.y + document.documentElement.scrollTop; + positionLeft = domBounding.x; + } + switch(rule.position) { + case 'top': + styles.top = positionTop - targetDom.height - distance + 'px'; + styles.left = positionLeft + 'px'; + break; + case 'left': + styles.top = positionTop + 'px'; + styles.left = positionLeft - targetDom.width - distance + 'px'; + break; + case 'bottom': + styles.top = positionTop + domBounding.height + distance + 'px' + styles.left = positionLeft + 'px'; + break; + case 'right': + styles.top = positionTop + 'px'; + styles.left = positionLeft + domBounding.width + distance + 'px'; + break; } }) return () => { diff --git a/packages/devui-vue/devui/read-tip/src/read-tip-types.ts b/packages/devui-vue/devui/read-tip/src/read-tip-types.ts index ef322472..872a9940 100644 --- a/packages/devui-vue/devui/read-tip/src/read-tip-types.ts +++ b/packages/devui-vue/devui/read-tip/src/read-tip-types.ts @@ -15,7 +15,6 @@ export type Trigger = 'hover' | 'click' export type DefaultTemplateProps = { title?: string content?: string - top?: number selector?: string position?: string id? : string diff --git a/packages/devui-vue/devui/read-tip/src/read-tip.scss b/packages/devui-vue/devui/read-tip/src/read-tip.scss index 03a6be87..893ab489 100644 --- a/packages/devui-vue/devui/read-tip/src/read-tip.scss +++ b/packages/devui-vue/devui/read-tip/src/read-tip.scss @@ -44,9 +44,6 @@ } // 定位 top &.top { - top: -60px; - left: 0; - .after { bottom: -4px; } @@ -54,9 +51,6 @@ // 定位 left &.left { - right: calc(100% + 10px); - top: -2px; - .after { right: -4px; } @@ -64,9 +58,6 @@ // 定位 right &.right { - left: calc(100% + 10px); - top: -2px; - .after { left: -4px; } @@ -74,8 +65,6 @@ // 定位 bottom &.bottom { - top: calc(100% + 10px); - .after { top: -4px; } diff --git a/packages/devui-vue/devui/read-tip/src/read-tip.tsx b/packages/devui-vue/devui/read-tip/src/read-tip.tsx index 1c77ac18..5fac00c6 100644 --- a/packages/devui-vue/devui/read-tip/src/read-tip.tsx +++ b/packages/devui-vue/devui/read-tip/src/read-tip.tsx @@ -57,10 +57,11 @@ export default defineComponent({ let newRule = reactive({ id: null }) + const id = rule.selector.slice(rule.selector[0] === '.' ? 1 : 0) + index; if (index > 0) { newRule = { ...rule } - dom.id = rule.selector.slice(1) + index - newRule.id = rule.selector.slice(1) + index + dom.id = id + newRule.id = id rules.push(newRule) } @@ -149,7 +150,7 @@ export default defineComponent({
- {rule.status && ( + {rule.status && ( { rule.contentTemplate && ctx.slots?.contentTemplate() } diff --git a/packages/devui-vue/docs/components/read-tip/index.md b/packages/devui-vue/docs/components/read-tip/index.md index d5af1dbd..cb70b692 100644 --- a/packages/devui-vue/docs/components/read-tip/index.md +++ b/packages/devui-vue/docs/components/read-tip/index.md @@ -18,21 +18,15 @@

Set selector to display readtip

The following is the target you want to show readtip

@Jack - ``` @@ -77,7 +111,6 @@ const readTipOptions = {

Click here to display second content

Hover here to display third content

Hover here to display third content

-

4Another third content with same class name

@@ -108,7 +141,7 @@ const readTipOptions = { overlayClassName:'red', }, { - trigger: 'hover', + trigger: 'click', selector: '.third-content', position: 'bottom', title: 'This Is the Third Title', @@ -127,12 +160,14 @@ const readTipOptions = { +``` + +::: + ### 异步获取数据 通过设置selector选择需要显示readtip的元素,传入title和content设置显示的内容。 @@ -202,7 +355,6 @@ function getDataFromDB ({ element, rule }) { } .readtip-target { - display: inline-block; font-weight: bold; cursor: pointer; margin-top: 16px; @@ -225,9 +377,9 @@ d-read-tip 参数 | 参数 | 类型 | 默认 | 说明 | 跳转 Demo | 全局配置项 | | -------------------- | ------------------ | ---- | ------------------------------- | ---------------------- | ---------- | -| readTipOptions | ReadTipOptions | -- | 必选,配置提示选项 | 基本用法 | -- | -| readTipOptions.rules | ReadTipRules | -- | 必选,配置 readtip 内容 | 包括多个提示的 readtip | -- | -| contentTemplate | `TemplateRef` | -- | 可选,传入模板显示 readtip 内容 | 传入模板显示内容 | -- | +| readTipOptions | ReadTipOptions | -- | 必选,配置提示选项 | [基本用法](#基本用法) | -- | +| readTipOptions.rules | ReadTipRules | -- | 必选,配置 readtip 内容 | [基本用法](#基本用法) | -- | +| contentTemplate | `TemplateRef` | -- | 可选,传入模板显示 readtip 内容 | [传入模板显示内容](#传入模板显示内容) | -- | -- Gitee From 102c5fe6d1a4802ff3f1429d9c907db376cdcc0d Mon Sep 17 00:00:00 2001 From: panyongxu Date: Thu, 18 Nov 2021 22:34:36 +0800 Subject: [PATCH 07/10] =?UTF-8?q?docs(readTip):=20=E4=BF=AE=E5=A4=8D?= =?UTF-8?q?=E6=96=87=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/devui-vue/.ls-lint.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/devui-vue/.ls-lint.yml b/packages/devui-vue/.ls-lint.yml index 03019617..b367ef20 100644 --- a/packages/devui-vue/.ls-lint.yml +++ b/packages/devui-vue/.ls-lint.yml @@ -4,7 +4,7 @@ ls: .scss: kebab-case .vue: kebab-case .js: kebab-case - # .ts: kebab-case + .ts: kebab-case .tsx: kebab-case .spec.ts: kebab-case .route.ts: kebab-case -- Gitee From 7f75c042d11d95cc0825cb66c2549fa223707ed5 Mon Sep 17 00:00:00 2001 From: panyongxu Date: Thu, 18 Nov 2021 22:37:48 +0800 Subject: [PATCH 08/10] =?UTF-8?q?docs(readTip):=20=E4=BF=AE=E6=AD=A3?= =?UTF-8?q?=E6=96=87=E6=A1=A3=E9=94=99=E8=AF=AF?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../docs/components/read-tip/index.md | 63 +------------------ 1 file changed, 3 insertions(+), 60 deletions(-) diff --git a/packages/devui-vue/docs/components/read-tip/index.md b/packages/devui-vue/docs/components/read-tip/index.md index cb70b692..19fe559b 100644 --- a/packages/devui-vue/docs/components/read-tip/index.md +++ b/packages/devui-vue/docs/components/read-tip/index.md @@ -52,47 +52,7 @@ const readTipOptions = { .readtip-target:hover { text-decoration: underline; } -.red { - /* color: red */ -} -@import '@devui-design/icons/icomoon/devui-icon.css' -.icon { - cursor: pointer; - font-size: 16px; - margin-right: 8px; - vertical-align: middle; -} -.icon + span { - vertical-align: middle; -} -.card-block { - margin-right: 16px; - i{ - cursor: pointer; - font-size: 16px; - margin-right: 8px; - vertical-align: middle; - } - i + span { - vertical-align: middle; - } -} -.d-card { - cursor: pointer; - transition: - box-shadow .3s cubic-bezier(.645,.045,.355,1), - transform .3s cubic-bezier(.645,.045,.355,1); - &:hover { - box-shadow: 0 4px 16px 0 rgba(0,0,0,.1); - transform: translateY(-5px); - } -} -.card-container { - width: 350px; -} -.action-text { - color: #8a8e99; -} + ``` @@ -213,8 +173,8 @@ const readTipOptions = {

You can also pass in template

Write your own template

The following is the target you want to show readtip

-

DEVUI Course

-

Another DEVUI Course with same class name

+

DEVUI Course

+

Another DEVUI Course with same class name