@spectrum-web-components/textfield
Version:
`sp-textfield` components are text boxes that allow users to input custom text entries with a keyboard. Various decorations can be displayed around the field to communicate the entry requirements.
123 lines (120 loc) • 4.38 kB
JavaScript
/*
Copyright 2018 Adobe. All rights reserved.
This file is licensed to you under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License. You may obtain a copy
of the License at http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software distributed under
the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
OF ANY KIND, either express or implied. See the License for the specific language
governing permissions and limitations under the License.
*/
import { html } from '@spectrum-web-components/base';
import '../sp-textfield.js';
import '@spectrum-web-components/field-label/sp-field-label.js';
export default {
component: 'sp-textfield',
title: 'Textarea',
};
export const Default = () => {
return html `
<sp-textfield
multiline
label="Enter your life story"
placeholder="Enter your life story"
></sp-textfield>
<sp-textfield
multiline
label="Enter your life story"
disabled
placeholder="Enter your life story"
></sp-textfield>
<sp-textfield
multiline
label="Enter your life story"
pattern="[\\w\\s]+"
required
valid
value="A valid input"
placeholder="Enter your life story"
></sp-textfield>
<sp-textfield
multiline
label="Enter your life story"
required
valid
value="A valid input"
disabled
placeholder="Enter your life story"
></sp-textfield>
<sp-textfield
multiline
label="Enter your life story"
pattern="[\\d]+"
required
value="Not a valid input"
placeholder="Enter your life story"
></sp-textfield>
<sp-textfield
multiline
label="Enter your life story"
pattern="[\\d]+"
invalid
required
value="Not a valid input"
disabled
placeholder="Enter your life story"
></sp-textfield>
`;
};
export const grows = () => html `
<sp-field-label for="story">Enter your life story...</sp-field-label>
<sp-textfield
multiline
id="story"
value="Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt."
grows
placeholder="Enter your life story"
></sp-textfield>
`;
export const growsWithLargeWords = () => html `
<sp-field-label for="story">
Enter your life story with very long words...
</sp-field-label>
<sp-textfield
multiline
id="story"
value="Sed utperspiciatisundeomnisistenatuserrorsitvoluptatemaccusantiumdoloremquelaudantium,totamemaperiam, eaque ipsa quae ab illo inventore veritatis etquasiarchitectobeataevitaedictasuntexplicabo. Nemo enimipsamvoluptatemquiavoluptassitaspernaturautoditautfugitsedquiaconsequunturmagnidoloreseosquirationevoluptatemsequinesciunt."
grows
placeholder="Enter your life story"
></sp-textfield>
`;
export const readonly = () => html `
<sp-textfield
multiline
label="Enter your life story"
value="A readonly textarea"
readonly
placeholder="Enter your life story"
></sp-textfield>
`;
export const resizeControls = () => html `
<sp-textfield
multiline
style="resize: none;"
label="No resize control"
placeholder="No resize control"
></sp-textfield>
<sp-textfield
multiline
style="resize: vertical;"
label="Vertical resize control"
placeholder="Vertical resize control"
></sp-textfield>
<sp-textfield
multiline
style="resize: horizontal;"
label="Horizontal resize control"
placeholder="Horizontal resize control"
></sp-textfield>
`;
//# sourceMappingURL=textarea.stories.js.map