svelte-material-ui/packages/site/src/routes/demo/textfield/_Suffixed.svelte at master · hperrin/svelte-material-ui · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<div class="columns margins">
  <div>
    <Textfield
      bind:value={valueA}
      label="Standard"
      suffix="㎏"
      input$pattern="\d+"
    />

    <pre class="status">Value: {valueA}</pre>
  </div>
  <div>
    <Textfield
      variant="filled"
      bind:value={valueB}
      label="Filled"
      suffix="㎏"
      input$pattern="\d+"
    />

    <pre class="status">Value: {valueB}</pre>
  </div>
  <div>
    <Textfield
      variant="outlined"
      bind:value={valueC}
      label="Outlined"
      suffix="㎏"
      input$pattern="\d+"
    />

    <pre class="status">Value: {valueC}</pre>
  </div>
</div>

<script lang="ts">
  import Textfield from '@smui/textfield';

  let valueA = $state('');
  let valueB = $state('');
  let valueC = $state('');
</script>