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
AI コーディングエージェントの時代へ:JetBrains が描く開発の未来
masaruhr
1
200
NPOでのDevinの活用
codeforeveryone
0
870
20250704_教育事業におけるアジャイルなデータ基盤構築
hanon52_
5
880
Agentic Coding: The Future of Software Development with Agents
mitsuhiko
0
120
AI Agent 時代のソフトウェア開発を支える AWS Cloud Development Kit (CDK)
konokenj
4
530
脱Riverpod?fqueryで考える、TanStack Queryライクなアーキテクチャの可能性
ostk0069
0
320
Result型で“失敗”を型にするPHPコードの書き方
kajitack
5
970
「テストは愚直&&網羅的に書くほどよい」という誤解 / Test Smarter, Not Harder
munetoshi
0
190
AI駆動のマルチエージェントによる業務フロー自動化の設計と実践
h_okkah
0
190
LT 2025-06-30: プロダクトエンジニアの役割
yamamotok
0
800
#QiitaBash MCPのセキュリティ
ryosukedtomita
1
1.4k
なんとなくわかった気になるブロックテーマ入門/contents.nagoya 2025 6.28
chiilog
1
280
Featured
See All Featured
Documentation Writing (for coders)
carmenintech
72
4.9k
Unsuck your backbone
ammeep
671
58k
Scaling GitHub
holman
460
140k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.6k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
How to Ace a Technical Interview
jacobian
278
23k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
21k
4 Signs Your Business is Dying
shpigford
184
22k
Mobile First: as difficult as doing things right
swwweet
223
9.7k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Facilitating Awesome Meetings
lara
54
6.5k
Raft: Consensus for Rubyists
vanstee
140
7k
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
は極力使わないようにしよう ご清聴ありがとうございました。