{"id":287885,"date":"2018-08-16T14:18:34","date_gmt":"2018-08-16T10:18:34","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=287885"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=287885","title":{"rendered":"\u041f\u0438\u0448\u0435\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0441 \u00ab\u043c\u0430\u0442\u0435\u0440\u0438\u0430\u043b\u044c\u043d\u044b\u043c\u0438\u00bb \u043a\u043d\u043e\u043f\u043a\u0430\u043c\u0438 \u0434\u043b\u044f Svelte"},"content":{"rendered":"\n
\u0412\u0434\u043e\u0445\u043d\u043e\u0432\u0438\u0432\u0448\u0438\u0441\u044c \u0441\u0442\u0430\u0442\u044c\u044f\u043c\u0438 SvelteJS: \u0420\u0435\u043b\u0438\u0437 \u0432\u0442\u043e\u0440\u043e\u0439 \u0432\u0435\u0440\u0441\u0438\u0438<\/a>, \u0418\u0441\u0447\u0435\u0437\u0430\u044e\u0449\u0438\u0435 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0438<\/a> \u0438 Re: \u00ab\u0421\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u0435 JS-\u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u043e\u0432: React, Vue \u0438 Hyperapp\u00bb<\/a>, \u043f\u0440\u043e \u00ab\u0438\u0441\u0447\u0435\u0437\u0430\u044e\u0449\u0438\u0439\u00bb \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a Svelte (\u0447\u0438\u0442\u0430\u0435\u0442\u0441\u044f \u00ab\u0441\u0432\u0435\u043b\u0442\u00bb, \u0430 \u0442\u043e \u043c\u0430\u043b\u043e \u043b\u0438<\/a>), \u044f \u0437\u0430\u0445\u043e\u0442\u0435\u043b \u0435\u0433\u043e \u043f\u043e\u043f\u0440\u043e\u0431\u043e\u0432\u0430\u0442\u044c. \u0418 \u0434\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430 \u0440\u0435\u0448\u0438\u043b \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u043e\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0438\u043a \u0441 \u043a\u043d\u043e\u043f\u043a\u0430\u043c\u0438 \u0438\u0437 Materialize<\/a>.
<\/a> <\/p>\n

\u0421\u043f\u043e\u0441\u043e\u0431 \u043f\u0435\u0440\u0432\u044b\u0439: \u043a\u043b\u0430\u0441\u0441\u0438\u0447\u0435\u0441\u043a\u0438\u0439<\/h2>\n

\u0421\u0442\u0430\u0440\u0442\u043e\u0432\u044b\u0439 \u0448\u0430\u0431\u043b\u043e\u043d Svelte \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u0435\u0442\u0441\u044f \u0432 \u0434\u0432\u0443\u0445 \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u0430\u0445: \u0441 Webpack \u0438\u043b\u0438 \u0441 Rollup. \u042f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b Webpack, \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u043e\u043d \u043c\u043d\u0435 \u043f\u0440\u0438\u0432\u044b\u0447\u043d\u0435\u0435. \u0423\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0430, \u0437\u0430\u043f\u0443\u0441\u043a \u2014 \u0432\u0441\u0435 \u043a\u0430\u043a \u043e\u0431\u044b\u0447\u043d\u043e<\/a>.<\/p>\n

\u0423\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c Materialize \u0438 \u0438\u043a\u043e\u043d\u043e\u0447\u043a\u0438:<\/p>\n

npm install materialize-css@next npm install material-design-icons<\/code><\/pre>\n
  \u0412 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0435\u043c \u0432\u0441\u0435 \u044d\u0442\u043e \u0432 src\/main.js:<\/p>\n
import 'material-design-icons\/iconfont\/material-icons.css'; import 'materialize-css\/dist\/css\/materialize.min.css';<\/code><\/pre>\n
  \u0423\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043c file-loader, \u0447\u0442\u043e\u0431\u044b \u043e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0442\u044c \u0448\u0440\u0438\u0444\u0442\u044b (\u0438 \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e):<\/p>\n
npm install file-loader --save-dev<\/code><\/pre>\n
  \u0418 \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u0432 webpack.config.js:<\/p>\n
{   test: \/\\.(woff(2)?|ttf|eot|svg)(\\?v=\\d+\\.\\d+\\.\\d+)?$\/,     use: [{       loader: 'file-loader',       options: {       name: '[name].[ext]',       outputPath: 'fonts\/'     }   }] }<\/code><\/pre>\n
\u041f\u0438\u0448\u0435\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442<\/h3>\n
  \u0421\u043e\u0437\u0434\u0430\u0435\u043c \u0444\u0430\u0439\u043b src\/components\/Buttons.html \u2014 \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u043e, \u044d\u0442\u043e \u0438 \u0431\u0443\u0434\u0435\u0442 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442. \u0412 Materialize \u0434\u043b\u044f \u043a\u043d\u043e\u043f\u043e\u043a \u043f\u043e\u0447\u0435\u043c\u0443-\u0442\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0442\u0435\u0433 <a>, \u043f\u043e\u044d\u0442\u043e\u043c\u0443, \u0434\u043b\u044f \u0441\u0435\u043c\u0430\u043d\u0442\u0438\u0447\u043d\u043e\u0441\u0442\u0438, \u0431\u044b\u043b\u043e \u0440\u0435\u0448\u0435\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0434\u0432\u0430 \u0432\u0438\u0434\u0430 \u043a\u043d\u043e\u043f\u043e\u043a: <button> \u2014 \u0435\u0441\u043b\u0438 \u0441\u0441\u044b\u043b\u043a\u0438 \u043d\u0435\u0442, \u0438 <a> \u2014 \u0435\u0441\u043b\u0438 \u0441\u0441\u044b\u043b\u043a\u0430 \u0435\u0441\u0442\u044c. <\/p>\n
  \u041f\u0438\u0448\u0435\u043c \u0434\u0432\u0430 \u0448\u0430\u0431\u043b\u043e\u043d\u0430:<\/p>\n
{#if href} \/\/ \u041f\u0440\u043e\u0432\u0435\u0440\u043a\u0430 \u043d\u0430 \u043d\u0430\u043b\u0438\u0447\u0438\u0435 \u0441\u0441\u044b\u043b\u043a\u0438  <a on:click class=\"{classes}\" {href} {title} >   {#if icon} \/\/ \u0418 \u043d\u0430 \u043d\u0430\u043b\u0438\u0447\u0438\u0435 \u0438\u043a\u043e\u043d\u043a\u0438   <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}<\/code><\/pre>\n
  \u0417\u0434\u0435\u0441\u044c {classes} \u2014 \u0441\u043f\u0438\u0441\u043e\u043a \u043a\u043b\u0430\u0441\u0441\u043e\u0432, {href}, {title}, {type}, {name}, {disabled} \u2014 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0435 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u044b, \u0430 {iconAlign} \u0438 {icon} \u2014 \u043f\u043e\u0437\u0438\u0446\u0438\u044f \u0438 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u0438\u043a\u043e\u043d\u043a\u0438. \u0410\u0442\u0440\u0438\u0431\u0443\u0442\u044b \u043c\u043e\u0436\u043d\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0438 \u0434\u0440\u0443\u0433\u0438\u0435 (\u0442\u0430\u043c, \u0432 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u043c, \u044d\u043a\u0437\u043e\u0442\u0438\u043a\u0430 \u043e\u0441\u0442\u0430\u043b\u0430\u0441\u044c), \u043d\u043e \u0434\u043b\u044f \u043f\u0440\u0438\u043c\u0435\u0440\u0430 \u044d\u0442\u043e\u0433\u043e \u0434\u043e\u043b\u0436\u043d\u043e \u0431\u044b\u0442\u044c \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e.<\/p>\n
  \u0410 on:click \u0434\u043e\u0431\u0430\u0432\u0438\u043c, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u0442\u043e\u043c \u043a\u043b\u0438\u043a\u0438 \u043f\u043e \u043a\u043d\u043e\u043f\u043e\u0447\u043a\u0430\u043c \u043b\u043e\u0432\u0438\u0442\u044c. \u041f\u0440\u0438\u043c\u0435\u0440 \u0431\u0443\u0434\u0435\u0442 \u043d\u0438\u0436\u0435.<\/p>\n
  \u0414\u0430\u043b\u044c\u0448\u0435, \u0432 \u0441\u0435\u043a\u0446\u0438\u0438 <script> \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u043c \u0434\u0430\u043d\u043d\u044b\u0435 \u043f\u043e-\u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u043a\u043b\u0430\u0441\u0441\u043e\u0432 (computed):<\/p>\n
  export default {     data() {       return {         color: '',         size: '',         iconAlign: 'left',         floating: false,         flat: false,         waves: false,         wavesColor: 'light',         icon: '', \/\/ \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u0438\u043a\u043e\u043d\u043a\u0438         type: '',\/\/ \u0438 \u043d\u0443\u0436\u043d\u044b\u0435 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u044b         href: '',         name: '',         disabled: false,         title: ''       };     },     computed: { \/\/ \u0437\u0434\u0435\u0441\u044c \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u043c \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u043a\u043b\u0430\u0441\u0441\u043e\u0432       classes: ({ \/\/ \u043f\u0435\u0440\u0435\u0447\u0438\u0441\u043b\u044f\u0435\u043c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u043f\u0440\u0438 \u0432\u044b\u0437\u043e\u0432\u0435 \u043a\u043d\u043e\u043f\u043a\u0438         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(' ');       }     }   }; <\/code><\/pre>\n
  \u0412 \u0440\u0430\u0437\u0434\u0435\u043b\u0435 data()<\/b> \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u043c \u0434\u0430\u043d\u043d\u044b\u0435 \u043f\u043e-\u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e, \u0430 \u0432 computed<\/b> \u2014 \u0437\u0430\u043f\u043e\u043b\u043d\u044f\u0435\u0442\u0441\u044f \u043c\u0430\u0441\u0441\u0438\u0432 \u043a\u043b\u0430\u0441\u0441\u043e\u0432 \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u0442\u044c \u043f\u0440\u0438 \u0432\u044b\u0437\u043e\u0432\u0435 \u043a\u043d\u043e\u043f\u043a\u0438. \u041f\u0440\u0438\u0447\u0435\u043c \u043f\u0440\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0438 \u044d\u0442\u0438\u0445 \u0441\u0432\u043e\u0439\u0441\u0442\u0432 \u0432\u0441\u0435 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043f\u0435\u0440\u0435\u0441\u0447\u0438\u0442\u0430\u0435\u0442\u0441\u044f. \u0420 \u2014 \u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u044c.<\/p>\n
  \u0421\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u043e, \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0433\u043e\u0442\u043e\u0432. \u0412 src\/App.html \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0435\u043c \u0435\u0433\u043e:<\/p>\n
<script>   import Button from '.\/components\/Buttons.html';    export default {     components: {       Button     }   }; <\/script><\/code><\/pre>\n
\u0421\u043e\u0431\u0438\u0440\u0430\u0435\u043c\/\u0432\u044b\u0437\u044b\u0432\u0430\u0435\u043c \u043a\u043d\u043e\u043f\u043a\u0438<\/h3>\n
  <Button waves><\/Button>   <Button waves icon=\"cloud\" iconAlign=\"left\"><\/Button>   <Button floating  waves size=\"large\" color=\"red\" icon=\"add\"><\/Button> <\/code><\/pre>\n
  <\/p>\n
  \u0418\u043b\u0438 \u0441\u0441\u044b\u043b\u043a\u0438:<\/p>\n
  <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\" \/> <\/code><\/pre>\n
  <\/p>\n
\u0421\u043e\u0431\u044b\u0442\u0438\u044f: \u043b\u043e\u0432\u0438\u043c \u043a\u043b\u0438\u043a<\/h3>\n
  \u0421 \u043f\u043e\u043c\u043e\u0449\u044c\u044e on:click \u043c\u043e\u0436\u043d\u043e \u043b\u043e\u0432\u0438\u0442\u044c \u043a\u043b\u0438\u043a\u0438 \u043f\u043e \u043a\u043d\u043e\u043f\u043a\u0435, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 \u0442\u0430\u043a:<\/p>\n
<Button on:click=\"set({ count: count + 1 })\" waves>Button++<\/Button> <Button on:click=\"set({ count: count - 1 })\" waves icon=\"cloud\" iconAlign=\"left\">Button--<\/Button><\/code><\/pre>\n
  \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0432 \u043d\u0443\u0436\u043d\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043a\u043e\u0434 \u0432 export default:<\/p>\n
data() {       return {         count: 3       };     },<\/code><\/pre>\n
  \u0418 \u0433\u0434\u0435-\u043d\u0438\u0431\u0443\u0434\u044c \u044d\u0442\u043e\u0442 \u0441\u0447\u0435\u0442\u0447\u0438\u043a \u0432\u044b\u0432\u0435\u0441\u0442\u0438:<\/p>\n
<p>Count: {count}<\/p><\/code><\/pre>\n
  \u041a\u043e\u0434 \u043d\u0430 GitHub<\/a> \u0438 \u0434\u0435\u043c\u043a\u0430<\/a>.<\/p>\n
\u0421\u043f\u043e\u0441\u043e\u0431 \u0432\u0442\u043e\u0440\u043e\u0439: REPL \u2014 \u043f\u043e\u043f\u0440\u043e\u0449\u0435 \u0438 \u043f\u043e\u0431\u044b\u0441\u0442\u0440\u0435\u0435<\/h2>\n
  \u041d\u0430 \u0441\u0430\u0439\u0442\u0435 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430 \u0435\u0441\u0442\u044c \u043a\u0440\u0443\u0442\u0430\u044f \u00ab\u043f\u0435\u0441\u043e\u0447\u043d\u0438\u0446\u0430\u00bb \u2014 REPL, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u0443\u0436\u0435 \u0435\u0441\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0434\u0435\u0441\u044f\u0442\u043a\u043e\u0432 \u043f\u0440\u0438\u043c\u0435\u0440\u043e\u0432. \u0410 \u0435\u0449\u0435 \u0442\u0430\u043c \u043c\u043e\u0436\u043d\u043e \u0444\u043e\u0440\u043a\u043d\u0443\u0442\u044c \u0433\u043e\u0442\u043e\u0432\u044b\u0439 \u043a\u043e\u0434, \u0434\u043e\u043f\u0438\u0441\u0430\u0442\u044c\/\u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u0447\u0442\u043e-\u0442\u043e \u0441\u0432\u043e\u0451 \u0438 \u043f\u043e\u0434\u0435\u043b\u0438\u0442\u044c\u0441\u044f.
  \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0432\u044b\u0448\u0435\u043e\u043f\u0438\u0441\u0430\u043d\u043d\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0442\u0430\u043c \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0442\u0430\u043a<\/a>.<\/div>\n