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.2k
Other Decks in Programming
See All in Programming
速いWebフレームワークを作る
yusukebe
5
1.7k
Android 16 × Jetpack Composeで縦書きテキストエディタを作ろう / Vertical Text Editor with Compose on Android 16
cc4966
1
190
Updates on MLS on Ruby (and maybe more)
sylph01
1
180
OSS開発者という働き方
andpad
5
1.7k
デザイナーが Androidエンジニアに 挑戦してみた
874wokiite
0
310
JSONataを使ってみよう Step Functionsが楽しくなる実践テクニック #devio2025
dafujii
1
520
CloudflareのChat Agent Starter Kitで簡単!AIチャットボット構築
syumai
2
480
旅行プランAIエージェント開発の裏側
ippo012
2
890
奥深くて厄介な「改行」と仲良くなる20分
oguemon
1
520
意外と簡単!?フロントエンドでパスキー認証を実現する WebAuthn
teamlab
PRO
2
730
Oracle Database Technology Night 92 Database Connection control FAN-AC
oracle4engineer
PRO
1
440
250830 IaCの選定~AWS SAMのLambdaをECSに乗り換えたときの備忘録~
east_takumi
0
390
Featured
See All Featured
Reflections from 52 weeks, 52 projects
jeffersonlam
352
21k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
Writing Fast Ruby
sferik
628
62k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4k
Rails Girls Zürich Keynote
gr2m
95
14k
jQuery: Nuts, Bolts and Bling
dougneiner
64
7.9k
Art, The Web, and Tiny UX
lynnandtonic
302
21k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
8
520
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
9
810
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
Docker and Python
trallard
45
3.6k
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
は極力使わないようにしよう ご清聴ありがとうございました。