Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(xy-icon and xy-img): modify xy-icon and xy-img #34

Open
wants to merge 2 commits into
base: master
Choose a base branch
from

Conversation

Despair-lj
Copy link

@Despair-lj Despair-lj commented Aug 10, 2019

重构了 xy-icon 和 xy-img 里面的部分代码

icon 部分

  1. 将 icon 的图像文件添加到页面里面, 通过 id 去获取.
  2. 删除了 icon 的 path 属性, 添加 src 属性, 如果是要使用自身的 svg 文件, 直接使用 src="name.svg" 的格式.

img 部分

  1. dom 结构进行了一部分的改造
  2. 在 safari 浏览器中, img 并不支持 ::before 和 ::after 的伪元素, 导致会出现如下情况, 我将伪元素更改了真实的 dom 元素
    image
  3. 在 firefox 浏览器中, 如果存在 alt 和 gallery 属性时, 当 focus 时无法通过 tab 键跳转到下一个可捕获的 dom 元素中, 经过测试是因为展示 alt 的 ::before 存在, 所以我这边也将伪元素转变了 真实的 dom 元素
  4. ratio 的属性我实现的方法是直接修改主元素的高度
  5. 在画廊状态下, XyGallery 要设置 delegatesFocus 为 true, 不然在 safari 中无法 focus 可捕获的元素
  6. 在画廊状态下, 我设置通过 tab 循环在页面内可以捕获的元素

更多细节问题可能没提及

@XboxYan
Copy link
Owner

XboxYan commented Aug 11, 2019

感谢!
safari确实还要一些问题,目前手头上没有mac设备,找别人mac看了一下效果,比如icon渲染有问题,很多focus也有问题,感觉safari也是一个大坑啊
上面的pull我会仔细核对改进。

@Despair-lj
Copy link
Author

checkbox

  1. 修改了 checkbox 的 dom 结构, 现在的样式无法进行图中的分行展示。 添加了选中前和选中后的 active 动画
  2. 添加 checkbox 的 indeterminate 属性
  3. 仿照 ant 的检测样式,现在的 checkbox-group 如果出错是全部选项都变为红色,使用键盘选择的时候不方便知道当前 focus 的是哪一个选项
  4. 当正确选择时的样式
  5. 直接在 checkbox-group 设置 disabled 属性,可以直接控制全部子项为 disabled

image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants