Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Elementをさくっと拡張したい - @【ラクスル×KCF】FrontendNight
Search
Yoshiaki Itakura
February 20, 2019
Programming
0
490
Elementをさくっと拡張したい - @【ラクスル×KCF】FrontendNight
Yoshiaki Itakura
February 20, 2019
Tweet
Share
More Decks by Yoshiaki Itakura
See All by Yoshiaki Itakura
再帰関数を使ってみよう
negibouze
1
5.7k
Other Decks in Programming
See All in Programming
FigmaとPHPで作る1ミリたりとも表示崩れしない最強の帳票印刷ソリューション
ttskch
37
17k
TYPO3 v13 – The road to LTS: What's new and new APIs
luisasofie_xoxo
0
180
HUIT新歓2024「競技プログラミング、やってみませんか?」
slephy2784
1
250
本格ローグライク制作にEbitengineを選んでみた
nagainaganawa
0
280
Doctrine ORMでValue Objectを扱う方法4選 #phpstudy / 4 ways to handle Value Objects with Doctrine ORM
77web
4
110
CQRS/ES avec Symfony, c’est (trop) bien !
jeremyfreeagent
1
620
今、知っておきたい! 生成AIエージェントの世界
elith
3
330
Zero Waste, Radical Magic, and Italian Graft – Quarkus Efficiency Secrets
hollycummins
0
200
What We Can Learn From OSS
inouehi
0
380
0→1と1→10の狭間で Javaという技術選定を振り返る/Reflecting on the Decision to Choose Java Between Scaling from 0 to 1 and 1 to 10
jaguar_imo
2
350
Javaエンジニアのための Nodejs/Nuxt3入門
hidekatsu_izuno
0
250
try!Swift Tokyo 2024 参加報告 LT
akidon0000
1
180
Featured
See All Featured
Dealing with People You Can't Stand - Big Design 2015
cassininazir
355
22k
Code Review Best Practice
trishagee
54
15k
Done Done
chrislema
178
15k
Build The Right Thing And Hit Your Dates
maggiecrowley
23
2k
Into the Great Unknown - MozCon
thekraken
10
980
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
18
1.7k
Writing Fast Ruby
sferik
619
60k
Art, The Web, and Tiny UX
lynnandtonic
288
19k
Practical Orchestrator
shlominoach
180
9.7k
Intergalactic Javascript Robots from Outer Space
tanoku
266
26k
A Philosophy of Restraint
colly
195
16k
Designing for humans not robots
tammielis
247
25k
Transcript
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
は極力使わないようにしよう ご清聴ありがとうございました。