Elementをさくっと拡張したい

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

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

Element とは A Vue.js 2.0 UI Toolkit for Web Vue.jsのコンポーネントライブラリ
GitHub スター数: 35,161（2019/2/20 時点） https://element.eleme.io/#/en-US

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

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

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

Elementをさくっと拡張したい

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

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

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

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

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

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

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

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

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

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

Yoshiaki Itakura

More Decks by Yoshiaki Itakura

Other Decks in Programming

Featured

Transcript