js/webawesome
1
0
Fork 0
mirror of https://github.com/shoelace-style/webawesome.git synced 2026-01-12 04:09:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

fixes #968

Browse Source
This commit is contained in:
Cory LaViska
2022-11-10 17:12:29 -05:00
parent 337d688bd3
commit 33e19c003c
1 changed files with 19 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
docs/components/input.md
View File

@@ -262,27 +262,37 @@ const App = () => (
### Customizing Label Position
Use parts to customize the label's position.
Use [CSS parts](#css-parts) to customize the way form controls are drawn. This example uses CSS grid to position the label to the left of the control, but the possible orientations are nearly endless. The same technique works for inputs, textareas, radio groups, and similar form controls.
```html preview
<sl-input class="label-on-left" label="Name"></sl-input><br />
<sl-input class="label-on-left" label="Email" type="email"></sl-input>
<sl-input class="label-on-left" label="Name" help-text="Enter your name""></sl-input>
<sl-input class="label-on-left" label="Email" type="email" help-text="Enter your email"></sl-input>
<sl-textarea class="label-on-left" label="Bio" help-text="Tell us something about yourself"></sl-textarea>
<style>
.label-on-left {
--label-width: 60px;
--gap-width: 1rem;
}
.label-on-left + .label-on-left {
margin-top: var(--sl-spacing-medium);
}
.label-on-left::part(form-control) {
display: flex;
display: grid;
grid: auto / var(--label-width) 1fr;
gap: var(--sl-spacing-3x-small) var(--gap-width);
align-items: center;
gap: 1rem;
}
.label-on-left::part(form-control-label) {
flex: 0 0 auto;
width: 60px;
text-align: right;
}
.label-on-left::part(form-control-input) {
flex: 1 1 auto;
.label-on-left::part(form-control-help-text) {
grid-column: span 2;
padding-left: calc(var(--label-width) + var(--gap-width));
}
</style>
```