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

Merge pull request #699 from ing-bank/fix/buttons-within-lion-field-story

Browse source 
fix(form-system): buttons within fields story
This commit is contained in:
gerjanvangeest 2020-04-29 15:23:43 +02:00 committed by GitHub
commit e6a3ade004
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
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/button/lion-button.js';
<Meta title="Forms/System/Field integrations" />
# Content inside fields
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.
<Story name="Buttons Within lion fields">
<Story name="Buttons within fields">
{html`
<lion-input label="Prefix and sufix">
<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>
`}
</Story>
@ -19,6 +21,6 @@ For example if you want to add a button as a prefix or suffix.
```html
<lion-input label="Prefix and sufix">
<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>
```