No.9 Skill Tree

---

DEMO

spec

• UI Roadmap

  • 圖形下載
  • Screen Demo
  • Text Data

• Front-end Skill Tree

  • 圖形下載

• Live Demo

  • Source Code
  • memo
    • create react app
    • styled-components
    • react-router-dom
      • 可以透過 router 正反解析

Note

ERROR in ./src/static/img/img_axe.png 1:0 -- Module parse failed: Unexpected character '�' (1:0)

需要設定 url-loader 及 image-webpack-loader 來編譯圖片檔。

• 新手向 Webpack 完全攻略 (7) – 編譯圖片？略懂略懂

npm i -D url-loader image-webpack-loader

// @ webpack.config.js
{
  test: /\.(jpe?g|png|gif|svg)$/,
  use: [{
      loader: 'url-loader',
      options: {
        limit: 40000
      }
    },
    'image-webpack-loader'
  ]
}

在 component 根元素加事件

若要在 componet 的根元素上加事件，有兩種做法：

1. 加 .native

<!-- roadmap.vue -->
map-item(@click.prevent.native="onSelected(item)")

2. 採用 emit

<!-- roadmap.vue -->
map-item(@on-click="onSelected", :item="item")

<!-- roadmap-item.vue -->
<template lang="pug">
  .map-item(@click.prevent="$emit('on-click', item)")
</template>
<script>
export default {
  props: ['item'],
}
</script>

• Listening for Native Events on Components with v-on
• Vue v-on:click does not work on component

CSS濾鏡效果

• CSS filter Property
• CSS濾鏡效果
• CSS 陰影效果的比較：Drop-Shadow 與 Box-Shadow

不同 filter 之間無法用 transition 漸變交替，必須各自設定：

.icon {
  filter: grayscale(1) drop-shadow(0 0 0 $color-white);
  transition: filter .5s ease;

  &--active {
    filter: grayscale(0) drop-shadow(0 0 6px $color-white);
  }
}

SVG & CSS

使用 CSS 控制 SVG 時，必須了解到 SVG 的屬性分為：

• 可以使用 CSS 控制的 properties

• 不能使用 CSS 控制的 attributes

• SVG 研究之路 (14) - 控制 SVG 的注意事項