ayo/lion
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

chore(form-system): buttons within fields story

Browse source
This commit is contained in:
qa46hx 2020-04-29 15:03:35 +02:00
parent 2476211c21
commit e042cb05a9
1 changed files with 5 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
packages/form-system/stories/50-Content-inside-fields.stories.mdx
View file

@ -2,16 +2,18 @@ import { Story, Meta, html } from '@open-wc/demoing-storybook';
import '@lion/input/lion-input.js'; import '@lion/input/lion-input.js';
import '@lion/button/lion-button.js'; import '@lion/button/lion-button.js';
<Meta title="Forms/System/Field integrations" />
# Content inside fields # Content inside fields
Due to our custom inputs being Web Components, it is possible to put HTML content inside an input. Due to our custom inputs being Web Components, it is possible to put HTML content inside an input.
For example if you want to add a button as a prefix or suffix. For example if you want to add a button as a prefix or suffix.
<Story name="Buttons Within lion fields"> <Story name="Buttons within fields">
{html` {html`
<lion-input label="Prefix and sufix"> <lion-input label="Prefix and sufix">
<lion-button slot="prefix" type="button">prefix</lion-button> <lion-button slot="prefix" type="button">prefix</lion-button>
<lion-button slot="suffix" type="button">sufix</lion-button> <lion-button slot="suffix" type="button">suffix</lion-button>
</lion-input> </lion-input>
`} `}
</Story> </Story>
@ -19,6 +21,6 @@ For example if you want to add a button as a prefix or suffix.
```html ```html
<lion-input label="Prefix and sufix"> <lion-input label="Prefix and sufix">
<lion-button slot="prefix" type="button">prefix</lion-button> <lion-button slot="prefix" type="button">prefix</lion-button>
<lion-button slot="suffix" type="button">sufix</lion-button> <lion-button slot="suffix" type="button">suffix</lion-button>
</lion-input> </lion-input>
``` ```