PM
хз, у меня наверное максимум универсальности для таких штук вот как тут примерно: https://github.com/PaulMaly/optimade.science/blob/master/src/components/Input/Input.svelte
Size: a a a
2020 December 23
КС
мне кажется в контексте свелта профитнее какой-нибудь компонент-форма, в которую передаёшь массив объектов, а она тебе может биндить объект с полями или чето типа того
КС
ну да, чето такое
PM
КС
<script>
export let value = '';
export let desc = '';
export let label = true;
export let margin = true;
</script>
{#if label}
<label class="input" class:margin>
<span>{desc}</span
><input type="text" bind:value on:input />
</label>
{:else}
<input
class="input"
class:margin
type="text"
placeholder={desc}
bind:value
on:input
/>
{/if}
<style lang="scss">
.input {
display: block;
}
input {
@include input;
}
* + .margin {
margin-top: pxrem(8);
}
</style>
это как-то под свелт не заезжает
PM
но опять же, я привык работать с конкретными кастомными дизайнами. даже в этом проекте по сути дизайн был прибитый - выбранный css фреймворк (spectre.css)
КС
а я пытаюсь понять где та золотая середина между использованием тегов и компонентов
PM
Кирилл Спасибович
<script>
export let value = '';
export let desc = '';
export let label = true;
export let margin = true;
</script>
{#if label}
<label class="input" class:margin>
<span>{desc}</span
><input type="text" bind:value on:input />
</label>
{:else}
<input
class="input"
class:margin
type="text"
placeholder={desc}
bind:value
on:input
/>
{/if}
<style lang="scss">
.input {
display: block;
}
input {
@include input;
}
* + .margin {
margin-top: pxrem(8);
}
</style>
это как-то под свелт не заезжает
я тоже жду svelte:element и on:*
PM
по моим компонентам это тоже заметно)
КС
<script>
export let checked = false;
export let desc = '';
export let margin = true;
</script>
<label class="checkbox {$$restProps.class || ''}" class:margin>
<input type="checkbox" bind:checked on:change on:click><span>{desc}</span>
</label>
<style lang="scss">
label {
display: block;
position: relative;
}
* + label.margin {
margin-top: pxrem(8);
}
input {
position: absolute;
z-index: -1;
opacity: 0;
}
input:checked + span {
color: hsl(90, 60%, 35%);
}
input:checked + span::before {
background: hsl(90, 60%, 55%);
}
input:checked + span::after {
left: pxrem(19);
}
span {
padding-left: pxrem(40);
transition: 0.2s;
}
span::before, span::after {
content: '';
position: absolute;
display: inline-block;
}
span::before {
top: pxrem(3);
left: 0;
width: pxrem(36);
height: pxrem(18);
border-radius: pxrem(12);
background: #ccc;
// box-shadow: inset 0 pxrem(1) pxrem(1) #0004;
transition: 0.2s;
}
span::after {
top: pxrem(4);
left: pxrem(1);
width: pxrem(16);
height: pxrem(16);
border-radius: 50%;
background: #fff;
// box-shadow: 0 pxrem(1) pxrem(1) #0003;
transition: 0.2s;
}
</style>
КС
есть еще вот такой чекбокс компонент, но его врядли получится в тег превратить
КС
нравятся чето еще очень эти маржины с глобалом
КС
выставляешь эту простыню в ряд, и она отступы везде пилит
PM
Кирилл Спасибович
нравятся чето еще очень эти маржины с глобалом
я style аттрибут обычно передаю
КС
но не после самого последнего, и не до самого первого
КС
я щас упорюсь с postcss и мне стайл аттрибут будет не очень удобен)
КС
поставлю какой-нибудь pxtorem
PM
ладно, сорян я пойду посплю)
КС
чтобы писать в пикселях, а оно само в ремы конвертило