gpt4 book ai didi

html - intro.js 中是否有任何选项可以使突出显示的文本或图像清晰

转载 作者:行者123 更新时间:2023-11-28 19:13:40 25 4
gpt4 key购买 nike

我正在尝试在 ionic 4 中实现 intro.js 但突出显示的文本不可见

enter image description here

这里是我如何在 Angular 7 中实现代码。

intro() {
let intro = introJs.introJs();
intro.setOptions({
exitOnOverlayClick: false,
showStepNumbers: false,
showBullets: false,
overlayOpacity: 0.8,
doneLabel: "GOT IT",
nextLabel: "GOT IT",
steps: [
{
element: '#search-img',
intro: "Search here by accounts, contacts, etc.",
position: 'top',
}, {
element: '#search-text',
intro: "Search here by accounts, contacts, etc.",
position: 'top',
},
{
element: '#search-box',
intro: "Search here by accounts, contacts, etc.",
position: 'middle',
},
{
element: '#profile',
intro: "Click on profile icon to view your DPN account & saved
list",
position: 'bottom',
floatVArrow: 'right'
}
]
});
intro.start();
}

最佳答案

您可以通过为该特定步骤使用 highlightClass 属性来实现此目的,以便该步骤指向一个类(我称之为 .my-bespoke-class),其中您可以使用 CSS 对突出显示执行任何您喜欢的操作,例如更改不透明度或颜色。

我需要检查一下,但我很确定您也可以更改 overlayOpacity 一个步骤(您当然可以在 Shepherd 中)。

let intro = introJs();

intro.setOptions({
exitOnOverlayClick: false,
showStepNumbers: false,
showBullets: false,
overlayOpacity: 0.8,
doneLabel: "GOT IT",
nextLabel: "GOT IT",
steps: [
{
element: '#search-text',
intro: "Search here by accounts, contacts, etc.",
position: 'top',
highlightClass: '.my-bespoke-class',
overlayOpacity: '1'
}
]
});

intro.start();
#search-text{
width: 300px:
margin: 10px auto;
}

.my-bespoke-class{
background: orange;
font-size: 100px;
}
<link href="https://cdn.jsdelivr.net/npm/intro.js-mit@3.0.0/introjs.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/intro.js-mit@3.0.0/intro.min.js"></script>

<html>
<body>
<div id="search-text">This is the target element</div>
</body>
</html>

更多信息可以在官方文档中找到,您可以在 https://introjs.com/docs/ 找到。

关于html - intro.js 中是否有任何选项可以使突出显示的文本或图像清晰,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58831539/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com