Svelte: укажите несколько атрибутов условного класса - PullRequest
Новая
       15

Svelte: укажите несколько атрибутов условного класса

0 голосов
/ 28 января 2020

Я бы хотел, чтобы что-то подобное стало возможным: 

<div 
   class="overflow-scroll h-screen antialiased ..."
   class:whiteTheme="bg-gray-100 text-gray-800 ..."
   class:darkTheme="bg-blue-900 ..."
>
...
</div>

Итак, один набор классов, который всегда будет применяться. Один набор, только если whiteTheme истинно, а другой, только если darkTheme верно.

Я знаю, что могу определить класс whiteTheme и darkTheme css и заставить его просто работать как что 

<div 
   class="overflow-scroll h-screen antialiased ..."
   class:whiteTheme
   class:darkTheme
>

Но дело в том, что я хочу разработать каждый элемент индивидуально (особенно на начальной стадии моего приложения). И необходимость определять мой набор классов для каждого элемента в другом классе ... бросает мне вызов в использовании Tailwind. css и экспериментировать с указанными c элементами (без перехода назад и вперед между css определениями). и определения элементов).

Другой способ, который я мог бы выбрать, это: 

<div 
   class="overflow-scroll h-screen antialiased ... {whiteTheme?'bg-gray-100 text-gray-800 ...':'bg-blue-900 ...'}">

Это нормально, но я бы хотел повысить удобочитаемость и удобство обслуживания, определяя вещи в отдельных атрибутах. ..

Так что мне интересно, есть ли способ заставить его работать так, как я хочу ... Например, могу ли я легко расширить компилятор Svelte для этого?

best Johannes

Ответы [ 3 ]

1 голос
/ 02 февраля 2020

Вы можете поместить список классов для светлых и темных в строковые переменные и переключаться между теми, у кого есть троичные значения, основываясь на достоверности переменной darkTheme в магазине, чтобы она обновляла все компоненты при изменении.

Это позволяет Вы можете индивидуально стилизовать каждый компонент для светлых и темных тем, что значительно увеличивает читабельность, поскольку разделенная пробелами строка похожа на ту, которую мы привыкли видеть с css, и вы можете вывести список классов вверх каждого элемента. компонент для обеспечения видимости / простоты доступа. 

<script>
    let light = 'bg-gray-100 text-gray-800 shadow-xl';
    let dark = 'bg-blue-900 text-white';

    import { darkTheme } from './store.js';
</script>

<div class="overflow-scroll h-screen p-3 {$darkTheme? dark : light}" >
...
</div>

Вот рабочий пример в REPL

1 голос
/ 28 января 2020

Вы близки к одному из ваших предложений, но оно противоположно тому, что вы хотите: class:something={condition}

Это будет применять класс что-то , когда условие встречается.

Так что в вашем случае вам придется сделать 

class:bg-gray-100={whiteTheme}
class:text-gray-800={whiteTheme}

В качестве альтернативы вы могли бы сделать 

<script>
 $: whiteThemeClasses = whiteTheme ? "gray text..." : "";
 ...
...class=" fixedclasses {whiteThemeClasses} {blackThemeClasses}
0 голосов
/ 07 февраля 2020

Хорошо, после еще нескольких копаний я решил go со следующими шаблонами:

  • Используйте плагин Tailwind https://github.com/ChanceArthur/tailwindcss-dark-mode. Такое решение удерживает вещи на уровне попутного ветра (с этой точки зрения это хорошо). Код выглядит как 
<div 
   class="overflow-scroll 
          h-screen 
          antialiased 
          ... 
          bg-gray-100 
          text-gray-800
          ...
          dark:bg-blue-900
          dark:text-yellow-200
          ..."
>
...
</div>
  • Это очень хорошо для всех стати стати c. С Dynami c такими вещами, как active/selected элемент, я решил использовать стили: 
import { darkTheme } from '../stores.js';
...
<div
    class:selected
    class:$darkTheme
...
<style>
.selected {
    // all common styles
    @apply cursor-default;

    // all light styles
    @apply text-blue-600;
    @apply border-blue-600;
}

.selected.\$darkTheme {
    // all dark styles
    @apply text-yellow-700;
    @apply border-yellow-700;
}
</style>

Я подумал, что для небольших компонентов использование стилей не так уж плохо. Однако я все же нашел бы возможность определения пользовательской задачи в интригующей Svelte ... или измененного синтаксиса, такого как class:true/false={my classes ...}

Некоторые дополнительные примечания:

  • По аналогии с плагин https://github.com/ChanceArthur/tailwindcss-dark-mode Я нашел хороший пост в блоге, который дает такие же результаты, просто используя пользовательское определение screen: https://stefanzweifel.io/posts/support-mojave-dark-mode-with-tailwind-css/.

    • Однако это зависит исключительно от медиа-запроса, поэтому, если вы хотите иметь в своем приложении настраиваемый переключатель света / темноты ... я не нашел для этого никакого способа.

    • Преимущество использования этого подхода, однако, заключается в том, что вы можете использовать @apply в сочетании с ним, что вы не можете использовать плагин ... в настоящее время (https://github.com/ChanceArthur/tailwindcss-dark-mode/issues/3).

...