chore(tabs): improve readme for storybook
This commit is contained in:
parent
7573ecf53e
commit
8d8cb79b16
7 changed files with 18 additions and 44 deletions
|
|
@ -15,7 +15,7 @@ export default {
|
|||
};
|
||||
```
|
||||
|
||||
```js story
|
||||
```js preview-story
|
||||
export const main = () => html` <lion-button>Default</lion-button> `;
|
||||
```
|
||||
|
||||
|
|
|
|||
|
|
@ -207,7 +207,7 @@ export class LionButton extends DisabledWithTabIndexMixin(SlotMixin(LitElement))
|
|||
}
|
||||
|
||||
__setupDelegationInConstructor() {
|
||||
// do not move to connectedCallback, otherwise IE11 breaks
|
||||
// do not move to connectedCallback, otherwise IE11 breaks.
|
||||
// more info: https://github.com/ing-bank/lion/issues/179#issuecomment-511763835
|
||||
this.addEventListener('click', this.__clickDelegationHandler, true);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@ export default {
|
|||
};
|
||||
```
|
||||
|
||||
```js story
|
||||
```js preview-story
|
||||
export const main = () => html` <lion-switch label="Label" help-text="Help text"></lion-switch> `;
|
||||
```
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
import { ChoiceInputMixin, LionField } from '@lion/form-core';
|
||||
import { css, html, ScopedElementsMixin } from '@lion/core';
|
||||
|
||||
import { ChoiceInputMixin, LionField } from '@lion/form-core';
|
||||
import { LionSwitchButton } from './LionSwitchButton.js';
|
||||
|
||||
export class LionSwitch extends ScopedElementsMixin(ChoiceInputMixin(LionField)) {
|
||||
|
|
@ -72,7 +71,7 @@ export class LionSwitch extends ScopedElementsMixin(ChoiceInputMixin(LionField))
|
|||
}
|
||||
|
||||
/**
|
||||
* Override this function from ChoiceInputMixin
|
||||
* Override this function from ChoiceInputMixin.
|
||||
*/
|
||||
// eslint-disable-next-line class-methods-use-this
|
||||
_isEmpty() {}
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@ export default {
|
|||
};
|
||||
```
|
||||
|
||||
```js story
|
||||
```js preview-story
|
||||
export const main = () => html`
|
||||
<lion-tabs>
|
||||
<button slot="tab">Info</button>
|
||||
|
|
@ -37,14 +37,14 @@ export const main = () => html`
|
|||
npm i --save @lion/tabs;
|
||||
```
|
||||
|
||||
### Usage
|
||||
|
||||
```js
|
||||
import { LiontTabs } from '@lion/tabs';
|
||||
import { LionTabs } from '@lion/tabs';
|
||||
// or
|
||||
import '@lion/tabs/lion-tabs.js';
|
||||
```
|
||||
|
||||
### Usage
|
||||
|
||||
```html
|
||||
<lion-tabs>
|
||||
<button slot="tab">Info</button>
|
||||
|
|
@ -106,7 +106,7 @@ Below, we demonstrate on how you could dynamically add new tab + panels.
|
|||
|
||||
```js preview-story
|
||||
export const distributeNewElement = () => {
|
||||
const tagName = 'lion-tabs-experimental';
|
||||
const tagName = 'demo-tabs-add-dynamically';
|
||||
if (!customElements.get(tagName)) {
|
||||
customElements.define(
|
||||
tagName,
|
||||
|
|
@ -119,20 +119,17 @@ export const distributeNewElement = () => {
|
|||
render() {
|
||||
return html`
|
||||
<h3>Append</h3>
|
||||
<button @click="${this.__handleAppendClick}">
|
||||
Append
|
||||
</button>
|
||||
<lion-tabs id="appendTabs">
|
||||
<button slot="tab">tab 1</button>
|
||||
<p slot="panel">panel 1</p>
|
||||
<button slot="tab">tab 2</button>
|
||||
<p slot="panel">panel 2</p>
|
||||
</lion-tabs>
|
||||
<button @click="${this.__handleAppendClick}">
|
||||
Append
|
||||
</button>
|
||||
<hr />
|
||||
<h3>Push</h3>
|
||||
<button @click="${this.__handlePushClick}">
|
||||
Push
|
||||
</button>
|
||||
<lion-tabs id="pushTabs">
|
||||
<button slot="tab">tab 1</button>
|
||||
<p slot="panel">panel 1</p>
|
||||
|
|
@ -145,6 +142,9 @@ export const distributeNewElement = () => {
|
|||
`,
|
||||
)}
|
||||
</lion-tabs>
|
||||
<button @click="${this.__handlePushClick}">
|
||||
Push
|
||||
</button>
|
||||
`;
|
||||
}
|
||||
constructor() {
|
||||
|
|
@ -180,7 +180,7 @@ export const distributeNewElement = () => {
|
|||
},
|
||||
);
|
||||
}
|
||||
return html` <lion-tabs-experimental></lion-tabs-experimental> `;
|
||||
return html` <demo-tabs-add-dynamically></demo-tabs-add-dynamically> `;
|
||||
};
|
||||
```
|
||||
|
||||
|
|
|
|||
|
|
@ -67,7 +67,7 @@ export class LionTabs extends LitElement {
|
|||
static get properties() {
|
||||
return {
|
||||
/**
|
||||
* index number of the selected tab
|
||||
* index number of the selected tab.
|
||||
*/
|
||||
selectedIndex: {
|
||||
type: Number,
|
||||
|
|
|
|||
25
yarn.lock
25
yarn.lock
|
|
@ -1998,31 +1998,6 @@
|
|||
npmlog "^4.1.2"
|
||||
write-file-atomic "^2.3.0"
|
||||
|
||||
"@lion/field@0.13.1":
|
||||
version "0.13.1"
|
||||
resolved "https://registry.yarnpkg.com/@lion/field/-/field-0.13.1.tgz#566244c16fbac8e46d59e5a2eca7024cc6c8bfdc"
|
||||
integrity sha512-ecAzZt4qq4VA+BCrxS9wcE5Vzy3yK6ETdHQlnmIZKuJwaACbtx+FKTkDovwxkYy4jpohWB2g+etQevz4F6GOzw==
|
||||
dependencies:
|
||||
"@lion/core" "0.6.0"
|
||||
"@lion/validate" "0.11.0"
|
||||
|
||||
"@lion/localize@0.10.0":
|
||||
version "0.10.0"
|
||||
resolved "https://registry.yarnpkg.com/@lion/localize/-/localize-0.10.0.tgz#f3608baeb9ae65ac4e0c3efdd6208208220a6153"
|
||||
integrity sha512-oAy07yvNkFlsMxW3TBwrHvj1QEcjVDJ50vazuekzpc0M6v9c+00/6Y3U3TnH/H5V5qjKmOHnfhqYZoVqkmaqhA==
|
||||
dependencies:
|
||||
"@bundled-es-modules/message-format" "6.0.4"
|
||||
"@lion/core" "0.6.0"
|
||||
singleton-manager "1.0.0"
|
||||
|
||||
"@lion/validate@0.11.0":
|
||||
version "0.11.0"
|
||||
resolved "https://registry.yarnpkg.com/@lion/validate/-/validate-0.11.0.tgz#634465b2a90461024e913698f60505cd0b774a19"
|
||||
integrity sha512-pphmYoWZZyybjLo0kdZ8jBSDwS2yh4Kjuanu6Qv8YJCK1gK1d7CvMIqBdFAPlRvZ5DSpz7eoHMrY/iYbo6edog==
|
||||
dependencies:
|
||||
"@lion/core" "0.6.0"
|
||||
"@lion/localize" "0.10.0"
|
||||
|
||||
"@marionebl/sander@^0.6.0":
|
||||
version "0.6.1"
|
||||
resolved "https://registry.yarnpkg.com/@marionebl/sander/-/sander-0.6.1.tgz#1958965874f24bc51be48875feb50d642fc41f7b"
|
||||
|
|
|
|||
Loading…
Reference in a new issue