Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

8eca2a4c2c8c77c5d0000435037f55f1?s=128

Yoshiaki Itakura

February 20, 2019
Tweet

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. Element とは こういうの(button)とか こういうの(popover)とか https://element.eleme.io/#/en-US/component/button https://element.eleme.io/#/en-US/component/popover もっと大きいボタンを 使いたい 違う色の吹き出しを 使いたい

  6. なんて思ったことありませんか?

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

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

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

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

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

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

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

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

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

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