https://habr.com/post/418679/

• Разработка веб-сайтов
• JavaScript
• HTML

Вдохновившись статьями 1, 2, 3, про «исчезающий» фреймворк Svelte (читается «свелт», а то мало ли), я захотел его попробовать. И для начала решил написать небольшой компонентик с кнопками из Materialize.

Стартовый шаблон Svelte предлагается в двух вариантах: с Webpack или с Rollup. Я использовал Webpack, поскольку он мне привычнее. Установка, запуск — все как обычно.

Устанавливаем Materialize и иконочки:

npm install materialize-css@next
npm install material-design-icons

В подключаем все это в src/main.js:

import 'material-design-icons/iconfont/material-icons.css';
import 'materialize-css/dist/css/materialize.min.css';

Установим file-loader, чтобы обрабатывать шрифты (и не только):

npm install file-loader --save-dev

И добавим настройки в webpack.config.js:

{
  test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
    use: [{
      loader: 'file-loader',
      options: {
      name: '[name].[ext]',
      outputPath: 'fonts/'
    }
  }]
}

Создаем файл src/components/Buttons.html — собственно, это и будет компонент. В Materialize для кнопок почему-то используется тег <a>, поэтому, для семантичности, было решено сделать два вида кнопок: <button> — если ссылки нет, и <a> — если ссылка есть.

Пишем два шаблона:

{#if href}

<a on:click class="{classes}" {href} {title} >
  {#if icon}
  <i class="material-icons {iconAlign}">{icon}</i>
  {/if}
  <slot>button</slot>
</a>

{:else}

<button on:click class="{classes}" {type} {name} {disabled} >
  {#if icon}
  <i class="material-icons {iconAlign}">{icon}</i>
  {/if}
  <slot>button</slot>
</button>

{/if}

А on:click нужен чтобы можно было клики по кнопочкам ловить. Пример будет ниже.

Дальше, в секции <script> описываем данные по-умолчанию и методы добавления классов:

  export default {
    data() {
      return {
        color: '', // прописываем классы, которые используются в Materialize
        size: '',
        iconAlign: 'left',
        floating: false,
        flat: false,
        waves: false,
        wavesColor: 'light',
        icon: '', // название иконки
        type: '',// и нужные атрибуты
        href: '',
        name: '',
        disabled: false,
        title: ''
      };
    },
    computed: { // здесь описываем добавление классов
      classes: ({
        color,
        size,
        floating,
        flat,
        disabled,
        waves,
        wavesColor
      }) => {
        const classes = [];
        flat ? classes.push(`btn-flat`) : classes.push(`btn`);
        floating && classes.push(`btn-floating`);
        disabled && classes.push(`disabled`);
        waves && classes.push(`waves-effect`);
        wavesColor && classes.push(`waves-${wavesColor}`);
        size && classes.push(`btn-${size}`);
        color && classes.push(`${color}`);
        return classes.join(' ');
      }
    }
  };

Собственно, компонент готов. В src/App.html подключаем его:

<script>
  import Button from './components/Buttons.html';

  export default {
    components: {
      Button
    }
  };
</script>

И можем собирать кнопки:

  <Button waves></Button>
  <Button waves icon="cloud" iconAlign="left"></Button>
  <Button floating  waves size="large" color="red" icon="add"></Button>

Или ссылки:

  <Button href="#foo" waves> Link_0 </Button>
  <Button href="#bar" waves icon="cloud"> Link_1 </Button>
  <Button href="#qux" waves flat> Link_2 </Button>
  <Button href="#baz" waves icon="cloud" iconAlign="right"> Link_3 </Button>
  <Button href="#foo" waves floating size="large" color="red" icon="add" />

События

С помощью on:click можно ловить клики по кнопке, например так:

<Button on:click="set({ count: count + 1 })" waves>Button++</Button>
<Button on:click="set({ count: count - 1 })" waves icon="cloud" iconAlign="left">Button--</Button>

Для этого в нужно добавить код в export default:

data() {
      return {
        count: 3
      };
    },

И где-нибудь этот счетчик вывести:

<p>Count: {count}</p>

Код на GitHub и демка.