78 lines
2.9 KiB
HTML
78 lines
2.9 KiB
HTML
|
<!doctype html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||
|
|
<link rel="stylesheet" href="../../lib/3rdparty/highlight/styles/default.css">
|
||
|
|
<link rel="stylesheet" href="../../css/doctest.css">
|
||
|
|
<script src="../../lib/3rdparty/highlight/highlight.pack.js"></script>
|
||
|
|
<script src="../../lib/3rdparty/all.js"></script>
|
||
|
|
|
||
|
|
<script src="../all.js"></script>
|
||
|
|
<script src="./all.js"></script>
|
||
|
|
</head>
|
||
|
|
<body onload="Doctest.run()" >
|
||
|
|
<h1>Popover</h1>
|
||
|
|
<p>
|
||
|
|
Add small overlay content, like those found in iOS, to any element for housing secondary information.
|
||
|
|
The Popover plugin is similar to tooltips; it is a pop-up box that appears when the user clicks or
|
||
|
|
touches an element. The difference is that the popover can contain much more content.
|
||
|
|
</p>
|
||
|
|
<p>Let's look at an example of a popover:</p>
|
||
|
|
<canvas id="canvas" class="grayBorder interactive">Canvas not supported</canvas>
|
||
|
|
<script class="doctest">
|
||
|
|
|
||
|
|
const app = new PIXIApp({
|
||
|
|
view: canvas,
|
||
|
|
autoResize: false,
|
||
|
|
width: 850, height: 450
|
||
|
|
}).setup().run()
|
||
|
|
|
||
|
|
let popover1 = new Popover({title: "Popover title", text: "This is the popover text.", x: 150, y: 130})
|
||
|
|
app.scene.addChild(popover1)
|
||
|
|
|
||
|
|
let popover2 = new Popover({text: "This is another popover text. It has more words than the first one, some line breaks, \n\nbut no title :-(", x: 50, y: 230, placement: "right", width: 180})
|
||
|
|
app.scene.addChild(popover2)
|
||
|
|
|
||
|
|
let popover3 = new Popover({title: "Popover title 3. This title has many words but the Popover has no text...", x: 650, y: 70, placement: "left"})
|
||
|
|
app.scene.addChild(popover3)
|
||
|
|
|
||
|
|
const text4 = `
|
||
|
|
Jemand musste Josef K. verleumdet haben, denn ohne dass er etwas Böses
|
||
|
|
getan hätte, wurde er eines Morgens verhaftet. »Wie ein Hund!« sagte er,
|
||
|
|
es war, als sollte die Scham ihn überleben. Als Gregor Samsa eines Morgens
|
||
|
|
aus unruhigen Träumen erwachte, fand er sich in seinem Bett zu einem
|
||
|
|
ungeheueren Ungeziefer verwandelt. Und es war ihnen wie eine Bestätigung
|
||
|
|
ihrer neuen Träume und guten Absichten, als am Ziele ihrer Fahrt die
|
||
|
|
Tochter als erste sich erhob und ihren jungen Körper dehnte. »Es ist ein
|
||
|
|
eigentümlicher Apparat«, sagte der Offizier zu dem Forschungsreisenden
|
||
|
|
und überblickte mit einem gewissermaßen bewundernden Blick den ihm doch
|
||
|
|
wohlbekannten Apparat.
|
||
|
|
`
|
||
|
|
|
||
|
|
let popover4 = new Popover({title: "Popover title 4", text: text4, x: 650, y: 120, width: 380, placement: "bottom", titleStyle: {
|
||
|
|
fontFamily: 'Arial',
|
||
|
|
fontSize: 40,
|
||
|
|
fontStyle: 'italic',
|
||
|
|
fontWeight: 'bold',
|
||
|
|
fill: ['#6b6acf', '#d7626c'], // gradient
|
||
|
|
stroke: '#393879',
|
||
|
|
strokeThickness: 6,
|
||
|
|
dropShadow: true,
|
||
|
|
dropShadowColor: '#e7bc51',
|
||
|
|
dropShadowBlur: 4,
|
||
|
|
dropShadowAngle: Math.PI / 6,
|
||
|
|
dropShadowDistance: 3,
|
||
|
|
wordWrap: true,
|
||
|
|
wordWrapWidth: 440
|
||
|
|
}, textStyle: {
|
||
|
|
fontFamily: 'Arial',
|
||
|
|
fontSize: 10,
|
||
|
|
fill: "#76a9c9",
|
||
|
|
strokeThickness: 5,
|
||
|
|
wordWrap: true
|
||
|
|
}})
|
||
|
|
app.scene.addChild(popover4)
|
||
|
|
|
||
|
|
</script>
|
||
|
|
</body>
|