Elementをさくっと拡張したい - @【ラクスル×KCF】FrontendNight

Transcript

1. Elementをさくっと拡張したい 板倉 義晃（@ita_3y） @【ラクスル×KCF】FrontendNight

2. 本日のお品書き 1. Element とは（1分） 2. 基本的な拡張の仕方（1〜2分） 3. デモ（2〜3分） 4. 自己紹介（余った時間）

   5. まとめ

3. Element とは A Vue.js 2.0 UI Toolkit for Web Vue.jsのコンポーネントライブラリ

   GitHub スター数: 35,161（2019/2/20 時点） https://element.eleme.io/#/en-US

4. Element とは こういうの（button）とか こういうの（popover）とか いろいろ用意されていて簡単に使える便利なやつです https://element.eleme.io/#/en-US/component/button https://element.eleme.io/#/en-US/component/popover

5. が

6. Element とは こういうの（button）とか こういうの（popover）とか https://element.eleme.io/#/en-US/component/button https://element.eleme.io/#/en-US/component/popover もっと大きいボタンを 使いたい 違う色の吹き出しを 使いたい

7. なんて思ったことありませんか？

8. Elementをさくっと拡張したい

9. 基本的な拡張の仕方 1. Element のコンポーネントをラップする 2. スタイルを上書き、もしくは追加する

10. e.g. ）ボタンのサイズを追加する（抜粋） template直下の要素 el-button-- + size (props) element-ui/packages/button/src/button.vue

11. e.g. ）ボタンのサイズを追加する（抜粋） コンポーネントを ラップ scoped でも大丈夫 el-button-- + 追加したいサイズ を定義する

12. e.g. ）ポップオーバーの色を追加する（抜粋） この辺にスタイルを適 用したい element-ui/packages/popover/src/main.vue

13. e.g. ）ポップオーバーの色を追加する（抜粋） コンポーネントを ラップ scoped だとダメ .el-popover を起点にスタイ ルを追加していく

14. デモ https://github.com/negibouze/element-easy-expansion

15. 自己紹介 ・板倉 義晃（いたくら よしあき） ・（株）マーキュリー エンジニア ・Twitter: @ita_3y ・GitHub: negibouze

16. まとめ Element をちょっとだけ拡張したいときは... ・コンポーネントをラップしよう ・Element のクラス名を確認して、いい感じにスタイルを追加しよう ・スタイルがうまく当たらないときは scoped をはずしてみよう ・!important

    は極力使わないようにしよう ご清聴ありがとうございました。