Skip to content

Commit 95e7c95

Browse files
bennypowersbennypowers
committed
docs: add more examples tables
1 parent 1723146 commit 95e7c95

File tree

3 files changed

+198
-9
lines changed

3 files changed

+198
-9
lines changed

‎elements/pf-button/docs/pf-button.md‎

Lines changed: 16 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -81,23 +81,27 @@ pf-button + pf-button {
8181
```html
8282
<script type="module">
8383
import '@patternfly/elements/pf-button/pf-button.js';
84+
document.querySelector('pf-button')
85+
.addEventListener('click', function() {
86+
console.log('clicked!');
87+
});
8488
</script>
85-
<pf-button onclick="console.log('clicked!');">
86-
Click me!
87-
</pf-button>
89+
<pf-button>Click me!</pf-button>
8890
```
8991

9092
</pf-tab-panel>
9193
<pf-tab slot="tab">Lit</pf-tab>
9294
<pf-tab-panel>
9395

9496
```js
97+
import { html, render } from 'lit';
9598
import '@patternfly/elements/pf-button/pf-button.js';
96-
html`
99+
100+
render(html`
97101
<pf-button @click="${() => console.log('clicked!');}">
98102
Click me!
99103
</pf-button>
100-
`;
104+
`, document.getElementById('container'));
101105
```
102106

103107
</pf-tab-panel>
@@ -106,9 +110,13 @@ html`
106110

107111
```jsx
108112
import { Button } from '@patternfly/elements/react/pf-button/pf-button.js';
109-
<Button onClick={() => console.log('clicked!');}>
110-
Click me!
111-
</Button>
113+
export function Clicker() {
114+
return (
115+
<Button onClick={() => console.log('clicked!');}>
116+
Click me!
117+
</Button>
118+
)
119+
}
112120
```
113121

114122
</pf-tab-panel>

‎elements/pf-popover/docs/pf-popover.md‎

Lines changed: 98 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,13 +15,110 @@
1515
<pf-popover heading="Popover heading"
1616
body="Popovers are triggered by click rather than hover."
1717
footer="Popover footer">
18-
<button>Toggle popover</button>
18+
<pf-button>Toggle popover</pf-button>
1919
</pf-popover>
2020
{% endhtmlexample %}
2121

2222
**Note**: Unlike the [Patternfly React implementation][withfocustrap], this
2323
component does not trap focus in the popover dialog. If you would like to trap
2424
focus, consider using a modal dialog instead.
25+
26+
### Activating programmatically
27+
28+
Use the `show()` method to activate the popover.
29+
30+
<pf-tabs class="html-lit-react-snippets">
31+
<pf-tab slot="tab">HTML</pf-tab>
32+
<pf-tab-panel>
33+
34+
```html
35+
<script type="module">
36+
import '@patternfly/elements/pf-button/pf-button.js';
37+
import '@patternfly/elements/pf-popover/pf-popover.js';
38+
39+
const button = document.querySelector('pf-button');
40+
41+
const popover = document.querySelector('pf-popover');
42+
43+
button.addEventListener('mouseover', function() {
44+
popover.show();
45+
});
46+
47+
button.addEventListener('mouseout', function() {
48+
popover.hide();
49+
});
50+
</script>
51+
52+
<pf-button>Hover to cite</pf-button>
53+
54+
<pf-popover>
55+
<cite slot="body">Richard M. Stallman</cite>
56+
<q>Free software is a political movement; open source is a development model.</q>
57+
</pf-popover>
58+
```
59+
60+
</pf-tab-panel>
61+
<pf-tab slot="tab">Lit</pf-tab>
62+
<pf-tab-panel>
63+
64+
```js
65+
import { LitElement, html } from 'lit';
66+
import '@patternfly/elements/pf-button/pf-button.js';
67+
import '@patternfly/elements/pf-popover/pf-popover.js';
68+
69+
class Citer extends LitElement {
70+
render() {
71+
return html`
72+
<pf-button @mouseover="${this.#onMouseover}"
73+
@mouseout="${this.#onMouseout}">Hover to Cite</pf-button>
74+
75+
<pf-popover>
76+
<cite slot="body">Richard M. Stallman</cite>
77+
<q>Free software is a political movement; open source is a development model.</q>
78+
</pf-popover>
79+
`;
80+
}
81+
82+
get #popover() { return this.shadowRoot.querySelector('pf-popover'); }
83+
84+
#onMouseover() { this.#popover.show(); }
85+
86+
#onMouseout() { this.#popover.hide(); }
87+
}
88+
```
89+
90+
</pf-tab-panel>
91+
<pf-tab slot="tab">React</pf-tab>
92+
<pf-tab-panel>
93+
94+
```jsx
95+
import { Button } from '@patternfly/elements/react/pf-button/pf-button.js';
96+
import { Popover } from '@patternfly/elements/react/pf-popover/pf-popover.js';
97+
import { useRef } from 'react';
98+
99+
100+
export function Citer() {
101+
const popoverRef = useRef(null);
102+
103+
const onMouseover = e => void popoverRef.current.show();
104+
105+
const onMouseout = e => void popoverRef.current.hide();
106+
107+
return (
108+
<>
109+
<Button onmouseover={onMouseover}
110+
onmouseout={onMouseout}>Hover to Cite</Button>
111+
<Popover ref={popoverRef}>
112+
<cite slot="body">Richard M. Stallman</cite>
113+
<q>Free software is a political movement; open source is a development model.</q>
114+
</Popover>
115+
</>
116+
);
117+
}
118+
```
119+
120+
</pf-tab-panel>
121+
</pf-tabs>
25122
{% endband %}
26123

27124
{% renderSlots %}{% endrenderSlots %}

‎elements/pf-tabs/docs/pf-tabs.md‎

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,90 @@
4242
<pf-tab-panel>Database</pf-tab-panel>
4343
</pf-tabs>
4444
{% endhtmlexample %}
45+
46+
### Reacting to changes
47+
Listen for the `expand` event to react when a tab is selected.
48+
49+
<pf-tabs class="html-lit-react-snippets">
50+
<pf-tab slot="tab">HTML</pf-tab>
51+
<pf-tab-panel>
52+
53+
```html
54+
<script type="module">
55+
import { PfTabs } from '@patternfly/elements/pf-tabs/pf-tabs.js'};
56+
57+
document.querySelector('pf-tabs')
58+
.addEventListener('expand', function(event) {
59+
if (PfTabs.isExpandEvent(event)) {
60+
const pfTabs = event.target.closest('pf-tabs');
61+
const activeTab = pfTabs.tabs.at(pfTabs.activeTab)
62+
console.log(`${activeTab.textContent} tab activated!`);
63+
}
64+
});
65+
</script>
66+
67+
<pf-tabs>
68+
<pf-tab slot="tab">GPL</pf-tab>
69+
<pf-tab-panel>Copyleft</pf-tab-panel>
70+
<pf-tab slot="tab">MIT</pf-tab>
71+
<pf-tab-panel>Open source</pf-tab-panel>
72+
</pf-tabs>
73+
```
74+
75+
</pf-tab-panel>
76+
<pf-tab slot="tab">Lit</pf-tab>
77+
<pf-tab-panel>
78+
79+
```js
80+
import { html, render } from 'lit';
81+
import { PfTabs } from '@patternfly/elements/pf-tabs/pf-tabs.js'};
82+
83+
function onExpand(event) {
84+
if (PfTabs.isExpandEvent(event)) {
85+
const pfTabs = event.target.closest('pf-tabs');
86+
const activeTab = pfTabs.tabs.at(pfTabs.activeTab)
87+
console.log(`${activeTab.textContent} tab activated!`);
88+
}
89+
}
90+
91+
render(html`
92+
<pf-tabs @expand="${onExpand}">
93+
<pf-tab slot="tab">GPL</pf-tab>
94+
<pf-tab-panel>Copyleft</pf-tab-panel>
95+
<pf-tab slot="tab">MIT</pf-tab>
96+
<pf-tab-panel>Open source</pf-tab-panel>
97+
</pf-tabs>
98+
`, document.getElementById('container'));
99+
```
100+
101+
</pf-tab-panel>
102+
<pf-tab slot="tab">React</pf-tab>
103+
<pf-tab-panel>
104+
105+
```jsx
106+
import { Tabs, Tab, TabPanel } from '@patternfly/elements/react/pf-tabs/pf-tabs.js';
107+
import { PfTabs } from '@patternfly/elements/pf-tabs/pf-tabs.js';
108+
109+
function onExpand(event) {
110+
if (PfTabs.isExpandEvent(event)) {
111+
const pfTabs = event.target.closest('pf-tabs');
112+
const activeTab = pfTabs.tabs.at(pfTabs.activeTab)
113+
console.log(`${activeTab.textContent} tab activated!`);
114+
}
115+
}
116+
117+
export const Expander = () => (
118+
<Tabs onExpand={onExpand}>
119+
<Tab slot="tab">GPL</Tab>
120+
<TabPanel>Copyleft</TabPanel>
121+
<Tab slot="tab">MIT</Tab>
122+
<TabPanel>Open source</TabPanel>
123+
</Tabs>
124+
)
125+
```
126+
127+
</pf-tab-panel>
128+
</pf-tabs>
45129
{% endband %}
46130

47131
{% band header="Variants" %}

0 commit comments

Comments
 (0)