opensource/driver.js
3
0
Fork 0
mirror of https://github.com/kamranahmedse/driver.js.git synced 2026-10-31 03:52:13 +08:00
Code Issues Packages Projects Releases Wiki Activity

Popover positioning example

Browse Source
This commit is contained in:
Kamran Ahmed
2023-07-02 14:41:45 +01:00
parent 79edf8bee7
commit 1a01674789
3 changed files with 172 additions and 169 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/src/components/CodeSample.tsx
-1
View File
@@ -100,7 +100,6 @@ export function CodeSample(props: CodeSampleProps) {
<div id={id} className={className}>
{heading && <p className="text-lg -mt-0 font-medium text-black -mb-3 rounded-md">{heading}</p>}
{children && <div className="-mb-4">{children}</div>}
{!children && <div className="mb-1"></div>}
<button onClick={onClick} className="w-full rounded-md bg-black p-2 text-white">
{buttonText}
</button>
docs/src/content/guides/popover-position.mdx
+170 -168
View File
@@ -30,182 +30,184 @@ driverObj.highlight({
<p>Use the buttons below to show the popover.</p>
</div>
<CodeSample
buttonText={"Left Start"}
highlight={{
element: '#sample-box',
popover: {
title: 'Left Start Example',
description: 'We have side set to <mark>left</mark> and align set to <mark>start</mark>. PS, we can use HTML in the title and descriptions of popover.',
side: "left",
align: 'start'
}
}}
id={"left-start"}
client:load
/>
<div className="flex flex-wrap mt-3 gap-1 justify-start">
<CodeSample
buttonText={"Left Start"}
highlight={{
element: '#sample-box',
popover: {
title: 'Left Start Example',
description: 'We have side set to <mark>left</mark> and align set to <mark>start</mark>. PS, we can use HTML in the title and descriptions of popover.',
side: "left",
align: 'start'
}
}}
id={"left-start"}
client:load
/>
<CodeSample
buttonText={"Left Center"}
highlight={{
element: '#sample-box',
popover: {
title: 'Left Center Example',
description: 'We have side set to <mark>left</mark> and align set to <mark>center</mark>. PS, we can use HTML in the title and descriptions of popover.',
side: "left",
align: 'center'
}
}}
id={"left-start"}
client:load
/>
<CodeSample
buttonText={"Left Center"}
highlight={{
element: '#sample-box',
popover: {
title: 'Left Center Example',
description: 'We have side set to <mark>left</mark> and align set to <mark>center</mark>. PS, we can use HTML in the title and descriptions of popover.',
side: "left",
align: 'center'
}
}}
id={"left-start"}
client:load
/>
<CodeSample
buttonText={"Left End"}
highlight={{
element: '#sample-box',
popover: {
title: 'Left End Example',
description: 'We have side set to <mark>left</mark> and align set to <mark>end</mark>. PS, we can use HTML in the title and descriptions of popover.',
side: "left",
align: 'end'
}
}}
id={"left-start"}
client:load
/>
<CodeSample
buttonText={"Left End"}
highlight={{
element: '#sample-box',
popover: {
title: 'Left End Example',
description: 'We have side set to <mark>left</mark> and align set to <mark>end</mark>. PS, we can use HTML in the title and descriptions of popover.',
side: "left",
align: 'end'
}
}}
id={"left-start"}
client:load
/>
<CodeSample
buttonText={"Top Start"}
highlight={{
element: '#sample-box',
popover: {
title: 'Top Start Example',
description: 'We have side set to <mark>top</mark> and align set to <mark>start</mark>. PS, we can use HTML in the title and descriptions of popover.',
side: "top",
align: 'start'
}
}}
id={"top-start"}
client:load
/>
<CodeSample
buttonText={"Top Start"}
highlight={{
element: '#sample-box',
popover: {
title: 'Top Start Example',
description: 'We have side set to <mark>top</mark> and align set to <mark>start</mark>. PS, we can use HTML in the title and descriptions of popover.',
side: "top",
align: 'start'
}
}}
id={"top-start"}
client:load
/>
<CodeSample
buttonText={"Top Center"}
highlight={{
element: '#sample-box',
popover: {
title: 'Top Center Example',
description: 'We have side set to <mark>top</mark> and align set to <mark>center</mark>. PS, we can use HTML in the title and descriptions of popover.',
side: "top",
align: 'center'
}
}}
id={"top-start"}
client:load
/>
<CodeSample
buttonText={"Top Center"}
highlight={{
element: '#sample-box',
popover: {
title: 'Top Center Example',
description: 'We have side set to <mark>top</mark> and align set to <mark>center</mark>. PS, we can use HTML in the title and descriptions of popover.',
side: "top",
align: 'center'
}
}}
id={"top-start"}
client:load
/>
<CodeSample
buttonText={"Top End"}
highlight={{
element: '#sample-box',
popover: {
title: 'Top End Example',
description: 'We have side set to <mark>top</mark> and align set to <mark>end</mark>. PS, we can use HTML in the title and descriptions of popover.',
side: "top",
align: 'end'
}
}}
id={"top-start"}
client:load
/>
<CodeSample
buttonText={"Top End"}
highlight={{
element: '#sample-box',
popover: {
title: 'Top End Example',
description: 'We have side set to <mark>top</mark> and align set to <mark>end</mark>. PS, we can use HTML in the title and descriptions of popover.',
side: "top",
align: 'end'
}
}}
id={"top-start"}
client:load
/>
<CodeSample
buttonText={"Right Start"}
highlight={{
element: '#sample-box',
popover: {
title: 'Right Start Example',
description: 'We have side set to <mark>right</mark> and align set to <mark>start</mark>. PS, we can use HTML in the title and descriptions of popover.',
side: "right",
align: 'start'
}
}}
id={"right-start"}
client:load
/>
<CodeSample
buttonText={"Right Start"}
highlight={{
element: '#sample-box',
popover: {
title: 'Right Start Example',
description: 'We have side set to <mark>right</mark> and align set to <mark>start</mark>. PS, we can use HTML in the title and descriptions of popover.',
side: "right",
align: 'start'
}
}}
id={"right-start"}
client:load
/>
<CodeSample
buttonText={"Right Center"}
highlight={{
element: '#sample-box',
popover: {
title: 'Right Center Example',
description: 'We have side set to <mark>right</mark> and align set to <mark>center</mark>. PS, we can use HTML in the title and descriptions of popover.',
side: "right",
align: 'center'
}
}}
id={"right-start"}
client:load
/>
<CodeSample
buttonText={"Right Center"}
highlight={{
element: '#sample-box',
popover: {
title: 'Right Center Example',
description: 'We have side set to <mark>right</mark> and align set to <mark>center</mark>. PS, we can use HTML in the title and descriptions of popover.',
side: "right",
align: 'center'
}
}}
id={"right-start"}
client:load
/>
<CodeSample
buttonText={"Right End"}
highlight={{
element: '#sample-box',
popover: {
title: 'Right End Example',
description: 'We have side set to <mark>right</mark> and align set to <mark>end</mark>. PS, we can use HTML in the title and descriptions of popover.',
side: "right",
align: 'end'
}
}}
id={"right-start"}
client:load
/>
<CodeSample
buttonText={"Right End"}
highlight={{
element: '#sample-box',
popover: {
title: 'Right End Example',
description: 'We have side set to <mark>right</mark> and align set to <mark>end</mark>. PS, we can use HTML in the title and descriptions of popover.',
side: "right",
align: 'end'
}
}}
id={"right-start"}
client:load
/>
<CodeSample
buttonText={"Bottom Start"}
highlight={{
element: '#sample-box',
popover: {
title: 'Bottom Start Example',
description: 'We have side set to <mark>bottom</mark> and align set to <mark>start</mark>. PS, we can use HTML in the title and descriptions of popover.',
side: "bottom",
align: 'start'
}
}}
id={"bottom-start"}
client:load
/>
<CodeSample
buttonText={"Bottom Start"}
highlight={{
element: '#sample-box',
popover: {
title: 'Bottom Start Example',
description: 'We have side set to <mark>bottom</mark> and align set to <mark>start</mark>. PS, we can use HTML in the title and descriptions of popover.',
side: "bottom",
align: 'start'
}
}}
id={"bottom-start"}
client:load
/>
<CodeSample
buttonText={"Bottom Center"}
highlight={{
element: '#sample-box',
popover: {
title: 'Bottom Center Example',
description: 'We have side set to <mark>bottom</mark> and align set to <mark>center</mark>. PS, we can use HTML in the title and descriptions of popover.',
side: "bottom",
align: 'center'
}
}}
id={"bottom-start"}
client:load
/>
<CodeSample
buttonText={"Bottom Center"}
highlight={{
element: '#sample-box',
popover: {
title: 'Bottom Center Example',
description: 'We have side set to <mark>bottom</mark> and align set to <mark>center</mark>. PS, we can use HTML in the title and descriptions of popover.',
side: "bottom",
align: 'center'
}
}}
id={"bottom-start"}
client:load
/>
<CodeSample
buttonText={"Bottom End"}
highlight={{
element: '#sample-box',
popover: {
title: 'Bottom End Example',
description: 'We have side set to <mark>bottom</mark> and align set to <mark>end</mark>. PS, we can use HTML in the title and descriptions of popover.',
side: "bottom",
align: 'end'
}
}}
id={"right-start"}
client:load
/>
<CodeSample
buttonText={"Bottom End"}
highlight={{
element: '#sample-box',
popover: {
title: 'Bottom End Example',
description: 'We have side set to <mark>bottom</mark> and align set to <mark>end</mark>. PS, we can use HTML in the title and descriptions of popover.',
side: "bottom",
align: 'end'
}
}}
id={"right-start"}
client:load
/>
</div>
docs/src/content/guides/tour-progress.mdx
+2
View File
@@ -45,6 +45,8 @@ Please note that `showProgress` is `false` by default. Also the default text for
```
</CodeSample>
<div className="mb-1.5"></div>
<CodeSample
buttonText={"Different Progress Text"}
config={{