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 は極力使わないようにしよう ご清聴ありがとうございました。