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
550
Elementをさくっと拡張したい - @【ラクスル×KCF】FrontendNight
Yoshiaki Itakura
February 20, 2019
Tweet
Share
More Decks by Yoshiaki Itakura
See All by Yoshiaki Itakura
再帰関数を使ってみよう
negibouze
1
6.1k
Other Decks in Programming
See All in Programming
5つのアンチパターンから学ぶLT設計
narihara
1
130
#QiitaBash MCPのセキュリティ
ryosukedtomita
0
250
Create a website using Spatial Web
akkeylab
0
310
型付きアクターモデルがもたらす分散シミュレーションの未来
piyo7
0
810
エラーって何種類あるの?
kajitack
5
320
ソフトウェア品質を数字で捉える技術。事業成長を支えるシステム品質の マネジメント
takuya542
0
130
システム成長を止めない!本番無停止テーブル移行の全貌
sakawe_ee
1
150
「Cursor/Devin全社導入の理想と現実」のその後
saitoryc
0
530
ASP.NETアプリケーションのモダナイズ インフラ編
tomokusaba
1
420
WebViewの現在地 - SwiftUI時代のWebKit - / The Current State Of WebView
marcy731
0
100
Blazing Fast UI Development with Compose Hot Reload (droidcon New York 2025)
zsmb
1
260
Code as Context 〜 1にコードで 2にリンタ 34がなくて 5にルール? 〜
yodakeisuke
0
110
Featured
See All Featured
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
800
How GitHub (no longer) Works
holman
314
140k
Build The Right Thing And Hit Your Dates
maggiecrowley
36
2.8k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.4k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.5k
4 Signs Your Business is Dying
shpigford
184
22k
Making the Leap to Tech Lead
cromwellryan
134
9.4k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
20
1.3k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
138
34k
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
は極力使わないようにしよう ご清聴ありがとうございました。