0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

wysiwygエディタ『Quill』の角を丸くする

Posted at

#概要
Quillを素の状態で実装すると四つ角が直角になっている。
レイアウトを柔らかい印象にするため、角張ったデザインではなく、丸い形(角丸)にしたくなったので検証開始!

#環境
公式に丁度いい遊び場があるので利用する。[https://quilljs.com/playground/]
image.png

#検証
今回はChromeのデベロッパーツールを利用して、角丸にしたい部分のクラスを確認する。
image.png

まずはじめにツールバーの上部だけ丸くしたいのでCSSに下記を追加する。

.ql-toolbar {
  border-radius: 10px 10px 0 0;
 }

いい感じの角丸に!
image.png

ツールバー下の記入部分(editor)もツールバーと同様にクラスを確認して、CSSを追加していく。
今回は下の部分だけ角丸にして、ツールバーと一体として認識させるようにする。![image.png](https://qiita

#quill-editor {
    border-radius: 0 0 10px 10px;
  }

いい感じの角丸に!(2度目)
image.png

#まとめ
書き残すほどではない内容ですが、一応備忘録として。
最初ツールバーだけ丸くならなくて「なんで!?」ってなったのは内緒。しっかり見ないとダメですね

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?