39 lines
No EOL
805 B
Svelte
39 lines
No EOL
805 B
Svelte
<script lang="ts">
|
|
import Mark from "../mark.svelte";
|
|
import AddButton from "../add_button.svelte";
|
|
|
|
let { value = $bindable([]), label = "" } = $props();
|
|
let items: string[] = $state([]);
|
|
</script>
|
|
|
|
<div class="marks-container input rounded">
|
|
<p>{label}</p>
|
|
|
|
{#each items as item}
|
|
<Mark text={item}/>
|
|
{/each}
|
|
<AddButton handler={() => {
|
|
items.push("");
|
|
value = items;
|
|
}} />
|
|
|
|
</div>
|
|
|
|
<style>
|
|
/* Горизонтальный список */
|
|
.marks-container {
|
|
display: flex;
|
|
overflow-x: scroll;
|
|
align-content: center;
|
|
padding: 0.5rem;
|
|
}
|
|
|
|
.marks-container :global(*) {
|
|
margin: 0;
|
|
margin-right: 0.5rem;
|
|
}
|
|
|
|
.marks-container p {
|
|
align-content: center;
|
|
}
|
|
</style> |