mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-18 03:26:36 +00:00
Draft commit for review for Popover v11 #1896
This commit is contained in:
Samuel Janda
parent
559701ec86
commit
79d941bdff
5 changed files with 165 additions and 107 deletions
|
|
@ -3,7 +3,8 @@ components: ["Popover", "PopoverContent"]
|
|||
---
|
||||
|
||||
<script>
|
||||
import { Popover, PopoverContent } from "carbon-components-svelte";
|
||||
import { Button, Popover, PopoverContent } from "carbon-components-svelte";
|
||||
import FavoriteFilled from "carbon-icons-svelte/lib/FavoriteFilled.svelte";
|
||||
import Preview from "../../components/Preview.svelte";
|
||||
</script>
|
||||
|
||||
|
|
@ -11,34 +12,29 @@ components: ["Popover", "PopoverContent"]
|
|||
|
||||
By default, the position of the popover component is absolute.
|
||||
|
||||
<div data-outline>
|
||||
<Popover open>
|
||||
Parent
|
||||
<PopoverContent style="padding: var(--bx-spacing-05)">Content</PopoverContent>
|
||||
</Popover>
|
||||
</div>
|
||||
|
||||
## Relative position
|
||||
|
||||
Set `relative` to `true` to use a relative position.
|
||||
|
||||
<div data-outline>
|
||||
Parent
|
||||
<Popover relative open>
|
||||
<div style="padding: var(--bx-spacing-05)">Content</div>
|
||||
</Popover>
|
||||
</div>
|
||||
<Popover open>
|
||||
<div data-outline>
|
||||
<Button kind="tertiary" iconDescription="Popover example" icon={FavoriteFilled} />
|
||||
</div>
|
||||
<PopoverContent>
|
||||
<h6>Available storage</h6>
|
||||
<p>This server has 150 GB of block storage remaining.</p>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
|
||||
## Close on outside click
|
||||
|
||||
Set `closeOnOutsideClick` to set `open` to `false` when clicking outside of the popover.
|
||||
|
||||
<div data-outline>
|
||||
Parent
|
||||
<Popover open closeOnOutsideClick on:click:outside={() => {console.log('on:click:outside')}}>
|
||||
<div style="padding: var(--bx-spacing-05)">Content</div>
|
||||
</Popover>
|
||||
</div>
|
||||
<Popover open closeOnOutsideClick on:click:outside={() => {console.log('on:click:outside')}}>
|
||||
<div data-outline>
|
||||
<Button kind="tertiary" iconDescription="Popover example" icon={FavoriteFilled} />
|
||||
</div>
|
||||
<PopoverContent>
|
||||
<h6>Available storage</h6>
|
||||
<p>This server has 150 GB of block storage remaining.</p>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
|
||||
## Popover alignment
|
||||
|
||||
|
|
@ -46,80 +42,98 @@ Customize the popover alignment using the `align` prop. Valid values include: `"
|
|||
|
||||
The default `align` value is `"top"`.
|
||||
|
||||
<div data-outline>
|
||||
Parent
|
||||
<Popover open align="top-left">
|
||||
<div style="padding: var(--bx-spacing-05)">top-left</div>
|
||||
</Popover>
|
||||
<Popover open align="top-left">
|
||||
<div data-outline>
|
||||
<Button kind="tertiary" iconDescription="Popover example" icon={FavoriteFilled} />
|
||||
</div>
|
||||
<div data-outline>
|
||||
Parent
|
||||
<PopoverContent>
|
||||
<p>Top-left alignment</p>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
|
||||
<div data-outline style="width:100%;padding:2em;display:flex;align-items:center;flex-direction:column;">
|
||||
<Popover open align="top-right">
|
||||
<div style="padding: var(--bx-spacing-05)">top-right</div>
|
||||
<Button kind="tertiary" iconDescription="Popover example" icon={FavoriteFilled} />
|
||||
<PopoverContent>
|
||||
<p>Top-right alignment</p>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
</div>
|
||||
<div data-outline>
|
||||
Parent
|
||||
<div data-outline style="width:100%;padding:2em;display:flex;align-items:center;flex-direction:column;">
|
||||
<Popover open align="bottom">
|
||||
<div style="padding: var(--bx-spacing-05)">bottom</div>
|
||||
<Button kind="tertiary" iconDescription="Popover example" icon={FavoriteFilled} />
|
||||
<PopoverContent>
|
||||
<p>Bottom alignment</p>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
</div>
|
||||
<div data-outline>
|
||||
Parent
|
||||
<div data-outline style="width:100%;padding:2em;display:flex;align-items:center;flex-direction:column;">
|
||||
<Popover open align="bottom-left">
|
||||
<div style="padding: var(--bx-spacing-05)">bottom-left</div>
|
||||
<Button kind="tertiary" iconDescription="Popover example" icon={FavoriteFilled} />
|
||||
<PopoverContent>
|
||||
<p>Bottom-left alignment</p>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
</div>
|
||||
<div data-outline>
|
||||
Parent
|
||||
<Popover open align="bottom-right">
|
||||
<div style="padding: var(--bx-spacing-05)">bottom-right</div>
|
||||
</Popover>
|
||||
</div>
|
||||
<div data-outline>
|
||||
Parent
|
||||
<div data-outline style="width:100%;padding:2em;display:flex;align-items:center;flex-direction:column;">
|
||||
<Popover open align="left">
|
||||
<div style="padding: var(--bx-spacing-05)">left</div>
|
||||
<Button kind="tertiary" iconDescription="Popover example" icon={FavoriteFilled} />
|
||||
<PopoverContent>
|
||||
<p>Left alignment</p>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
</div>
|
||||
<div data-outline>
|
||||
Parent
|
||||
<div data-outline style="width:100%;padding:2em;display:flex;align-items:center;flex-direction:column;">
|
||||
<Popover open align="left-bottom">
|
||||
<div style="padding: var(--bx-spacing-05)">left-bottom</div>
|
||||
<Button kind="tertiary" iconDescription="Popover example" icon={FavoriteFilled} />
|
||||
<PopoverContent>
|
||||
<p>Left-bottom alignment</p>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
</div>
|
||||
<div data-outline>
|
||||
Parent
|
||||
<Popover open align="left-right">
|
||||
<div style="padding: var(--bx-spacing-05)">left-right</div>
|
||||
<div data-outline style="width:100%;padding:2em;display:flex;align-items:center;flex-direction:column;">
|
||||
<Popover open align="left-top">
|
||||
<Button kind="tertiary" iconDescription="Popover example" icon={FavoriteFilled} />
|
||||
<PopoverContent>
|
||||
<p>Left-top alignment</p>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
</div>
|
||||
<div data-outline>
|
||||
Parent
|
||||
<div data-outline style="width:100%;padding:2em;display:flex;align-items:center;flex-direction:column;">
|
||||
<Popover open align="right">
|
||||
<div style="padding: var(--bx-spacing-05)">right</div>
|
||||
<Button kind="tertiary" iconDescription="Popover example" icon={FavoriteFilled} />
|
||||
<PopoverContent>
|
||||
<p>Right alignment</p>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
</div>
|
||||
<div data-outline>
|
||||
Parent
|
||||
<div data-outline style="width:100%;padding:2em;display:flex;align-items:center;flex-direction:column;">
|
||||
<Popover open align="right-bottom">
|
||||
<div style="padding: var(--bx-spacing-05)">right-bottom</div>
|
||||
<Button kind="tertiary" iconDescription="Popover example" icon={FavoriteFilled} />
|
||||
<PopoverContent>
|
||||
<p>Right-bottom alignment</p>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
</div>
|
||||
<div data-outline>
|
||||
Parent
|
||||
<div data-outline style="width:100%;padding:2em;display:flex;align-items:center;flex-direction:column;">
|
||||
<Popover open align="right-top">
|
||||
<div style="padding: var(--bx-spacing-05)">right-top</div>
|
||||
<Button kind="tertiary" iconDescription="Popover example" icon={FavoriteFilled} />
|
||||
<PopoverContent>
|
||||
<p>Right-top alignment</p>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
</div>
|
||||
|
||||
## With caret
|
||||
|
||||
<div data-outline>
|
||||
Parent
|
||||
<Popover caret open>
|
||||
<div style="padding: var(--bx-spacing-05)">Content</div>
|
||||
</Popover>
|
||||
<div data-outline style="width:100%;padding:4em 0 1em 0;display:flex;align-items:center;flex-direction:column;">
|
||||
<Popover caret open>
|
||||
<Button kind="tertiary" iconDescription="Popover example" icon={FavoriteFilled} />
|
||||
<PopoverContent>
|
||||
<h6>Available storage</h6>
|
||||
<p>This server has 150 GB of block storage remaining.</p>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
</div>
|
||||
|
||||
## Custom caret alignment
|
||||
|
|
@ -128,29 +142,50 @@ By default, the caret is aligned "top".
|
|||
|
||||
Possible `align` values include `"top"`, `"top-left"`, `"top-right"`, `"bottom"`, `"bottom-left"`, `"bottom-right"`, `"left"`, `"left-bottom"`, `"left-top"`, `"right"`, `"right-bottom"` or `"right-top"`.
|
||||
|
||||
<div data-outline>
|
||||
Parent
|
||||
<Popover caret align="top-left" open>
|
||||
<div style="padding: var(--bx-spacing-05)">Content</div>
|
||||
</Popover>
|
||||
<div data-outline style="width:100%;padding:1em 0 1em 0;display:flex;align-items:center;flex-direction:column;">
|
||||
<Popover caret align="right-top" open>
|
||||
<Button kind="tertiary" iconDescription="Popover example" icon={FavoriteFilled} />
|
||||
<PopoverContent>
|
||||
<h6>Available storage</h6>
|
||||
<p>This server has 150 GB of block storage remaining.</p>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
</div>
|
||||
|
||||
## Light variant
|
||||
|
||||
<div data-outline>
|
||||
Parent
|
||||
<Popover light open>
|
||||
<div style="padding: var(--bx-spacing-05)">Content</div>
|
||||
</Popover>
|
||||
<div data-outline style="width:100%;padding:4em 0 1em 0;display:flex;align-items:center;flex-direction:column;">
|
||||
<Popover light open>
|
||||
<Button kind="tertiary" iconDescription="Popover example" icon={FavoriteFilled} />
|
||||
<PopoverContent>
|
||||
<h6>Available storage</h6>
|
||||
<p>This server has 150 GB of block storage remaining.</p>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
</div>
|
||||
|
||||
## High contrast variant
|
||||
|
||||
<div data-outline>
|
||||
Parent
|
||||
<Popover highContrast open>
|
||||
<div style="padding: var(--bx-spacing-05)">Content</div>
|
||||
</Popover>
|
||||
<div data-outline style="width:100%;padding:4em 0 1em 0;display:flex;align-items:center;flex-direction:column;">
|
||||
<Popover highContrast open>
|
||||
<Button kind="tertiary" iconDescription="Popover example" icon={FavoriteFilled} />
|
||||
<PopoverContent>
|
||||
<h6>Available storage</h6>
|
||||
<p>This server has 150 GB of block storage remaining.</p>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
</div>
|
||||
|
||||
## Drop shadow
|
||||
|
||||
<div data-outline style="width:100%;padding:4em 0 1em 0;display:flex;align-items:center;flex-direction:column;">
|
||||
<Popover dropShadow open>
|
||||
<Button kind="tertiary" iconDescription="Popover example" icon={FavoriteFilled} />
|
||||
<PopoverContent>
|
||||
<h6>Available storage</h6>
|
||||
<p>This server has 150 GB of block storage remaining.</p>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
</div>
|
||||
|
||||
## External element
|
||||
|
|
|
|||
|
|
@ -1,20 +1,31 @@
|
|||
<script>
|
||||
import { Popover, Button } from "carbon-components-svelte";
|
||||
import { Popover, PopoverContent, Button } from "carbon-components-svelte";
|
||||
|
||||
let open = true;
|
||||
let ref = null;
|
||||
</script>
|
||||
|
||||
<div bind:this="{ref}" style:position="relative">
|
||||
<Button on:click="{() => (open = !open)}">Toggle popover</Button>
|
||||
<Popover
|
||||
bind:open="{open}"
|
||||
align="bottom-left"
|
||||
on:click:outside="{({ detail }) => {
|
||||
console.log('on:click:outside');
|
||||
open = ref.contains(detail.target);
|
||||
}}"
|
||||
<div
|
||||
data-outline
|
||||
style="width:100%;padding:4em 0 1em 0;display:flex;align-items:center;flex-direction:column;"
|
||||
>
|
||||
<div style="padding: var(--bx-spacing-05)">Content</div>
|
||||
</Popover>
|
||||
<Popover
|
||||
bind:open="{open}"
|
||||
align="bottom-left"
|
||||
caret
|
||||
on:click:outside="{({ detail }) => {
|
||||
console.log('on:click:outside');
|
||||
open = ref.contains(detail.target);
|
||||
}}"
|
||||
>
|
||||
<Button on:click="{() => (open = !open)}">Toggle popover</Button>
|
||||
<PopoverContent>
|
||||
<div style="padding:0.5em;">
|
||||
<h6>Available storage</h6>
|
||||
<p>This server has 150 GB of block storage remaining.</p>
|
||||
</div>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -3,6 +3,9 @@
|
|||
* @event {{ target: HTMLElement; }} click:outside
|
||||
*/
|
||||
|
||||
/** Set an id for the content `span` component */
|
||||
export let id = "ccs-" + Math.random().toString(36);
|
||||
|
||||
/** Set to `true` to display the popover */
|
||||
export let open = false;
|
||||
|
||||
|
|
@ -21,11 +24,17 @@
|
|||
/** Set to `true` to enable the light variant */
|
||||
export let light = false;
|
||||
|
||||
/** Specify whether a drop shadow should be rendered on the popover */
|
||||
export let dropShadow = false;
|
||||
|
||||
/** Set to `true` to enable the high contrast variant */
|
||||
export let highContrast = false;
|
||||
|
||||
/** Set to `true` to use a relative position */
|
||||
export let relative = false;
|
||||
/**
|
||||
* Specify the container `div` props
|
||||
* @type {import('svelte/elements').HTMLDivAttributes}
|
||||
*/
|
||||
export let containerProps = {};
|
||||
|
||||
import { createEventDispatcher } from "svelte";
|
||||
|
||||
|
|
@ -44,10 +53,12 @@
|
|||
}}"
|
||||
/>
|
||||
|
||||
<div
|
||||
<span
|
||||
bind:this="{ref}"
|
||||
id="{id}"
|
||||
class:bx--popover-container="{true}"
|
||||
class:bx--popover--caret="{caret}"
|
||||
class:bx--popover--drop-shadow="{dropShadow}"
|
||||
class:bx--popover--light="{light}"
|
||||
class:bx--popover--high-contrast="{highContrast}"
|
||||
class:bx--popover--top="{align === 'top'}"
|
||||
|
|
@ -63,9 +74,7 @@
|
|||
class:bx--popover--right-bottom="{align === 'right-bottom'}"
|
||||
class:bx--popover--right-top="{align === 'right-top'}"
|
||||
class:bx--popover--open="{open}"
|
||||
class:bx--popover--relative="{relative}"
|
||||
style:position="{relative ? "relative" : undefined}"
|
||||
{...$$restProps}
|
||||
{...containerProps}
|
||||
>
|
||||
<slot />
|
||||
</div>
|
||||
</span>
|
||||
|
|
|
|||
|
|
@ -1,9 +1,13 @@
|
|||
<script>
|
||||
export let className = null;
|
||||
/**
|
||||
* Specify the content `span` props
|
||||
* @type {import('svelte/elements').HTMLDivAttributes}
|
||||
*/
|
||||
export let contentProps = {};
|
||||
</script>
|
||||
|
||||
<span class:bx--popover="{true}" {...$$restProps}>
|
||||
<span class:bx--popover-content="{true}" class="{className}">
|
||||
<span class:bx--popover="{true}">
|
||||
<span class:bx--popover-content="{true}" {...contentProps}>
|
||||
<slot />
|
||||
</span>
|
||||
<span class:bx--popover-caret="{true}"></span>
|
||||
|
|
|
|||
|
|
@ -5,16 +5,15 @@
|
|||
</script>
|
||||
|
||||
<Popover
|
||||
bind:open
|
||||
bind:open="{open}"
|
||||
closeOnOutsideClick
|
||||
align="right"
|
||||
caret
|
||||
relative
|
||||
light
|
||||
highContrast
|
||||
on:click:outside="{() => {
|
||||
console.log('on:click:outside');
|
||||
}}"
|
||||
>
|
||||
<PopoverContent style="padding: var(--bx-spacing-05)">Content</PopoverContent>
|
||||
<PopoverContent>Content</PopoverContent>
|
||||
</Popover>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue