Skip to content

右欄:圖片 UI #119

@wendyyuchensun

Description

@wendyyuchensun

目前左欄編輯區支援以下 4 種圖片相關的語法

![image](https://miro.medium.com/v2/resize:fit:770/1*yirDmI8IO62J9ltmE-ovHQ.png)
![imageLink](https://miro.medium.com/v2/resize:fit:770/1*yirDmI8IO62J9ltmE-ovHQ.png)((https://a11yvillage.coseeing.org/zh-TW))
![imageDisplay][[科技新知村報]](https://miro.medium.com/v2/resize:fit:770/1*yirDmI8IO62J9ltmE-ovHQ.png)
![imageDisplayLink][[科技新知村報]](https://miro.medium.com/v2/resize:fit:770/1*yirDmI8IO62J9ltmE-ovHQ.png)((https://a11yvillage.coseeing.org/zh-TW))

請協助更新右欄 preview 區裡圖片的 UI

  1. 當滑鼠 hover 圖片,在圖片上方置中的位置顯示 alt tooltip,可參考或複用既有共用 component(不需要做 Figma 上標示的 focus ring,也不需要做 focus 後縮小圖片,圖片大小維持因為 display: block 所以佔滿整個行寬)。
  2. 圖片若有 target 連結,在圖片右上角顯示外連示意 icon(不需要做 Figma 上標示的 tooltip)。
  3. 圖片若有 capation,在圖的下方置中位置顯示 caption

Metadata

Metadata

Assignees

Labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions