Open baitian752 opened 1 year ago
<script lang="ts"> import Textfield from "@smui/textfield"; import HelperText from "@smui/textfield/helper-text"; import TextfieldIcon from "@smui/textfield/icon"; const SMUI_VERSION = "7.0.0-beta.14"; let files: FileList = null; </script> <main> <!-- Hint where we get fonts from. --> <link rel="preconnect" href="https://fonts.googleapis.com" /> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="anonymous" /> <!-- Material Icons, Roboto, and Roboto Mono fonts --> <link href="https://fonts.googleapis.com/css2?family=Material+Icons&Roboto+Mono:ital@0;1&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet" /> <!-- SMUI Styles --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/svelte-material-ui@{SMUI_VERSION}/bare.min.css" /> <!-- SMUI Styles --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/svelte-material-ui@{SMUI_VERSION}/themes/svelte.min.css" media="(prefers-color-scheme: light)" /> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/svelte-material-ui@{SMUI_VERSION}/themes/svelte-dark.min.css" media="screen and (prefers-color-scheme: dark)" /> <Textfield bind:files style="width: 100%;" label="Files" type="file" required label$hidden={true} input$multiple={true} on:change={() => {}} > <TextfieldIcon class="material-icons" slot="leadingIcon">attach_file</TextfieldIcon> <HelperText validationMsg slot="helper">You should choose at least one file</HelperText> </Textfield> </main>