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/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>
``` ```