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

feat: add grid #800

Merged
merged 1 commit into from
Aug 21, 2023
Merged

feat: add grid #800

merged 1 commit into from
Aug 21, 2023

Conversation

GuYith
Copy link
Contributor

@GuYith GuYith commented Aug 21, 2023

初步完成grid代码,未生效样式还待研究

参考tdesign-react实现过程遇到的问题:

  • 由于<t-col>也会作为一个dom元素出现在html中,相当于内部div的父元素,因此内部div的flex没有办法按预期展示
    image

直接把类名赋值给可以解决flex未生效问题,但感觉这样实现不够合理
image

  • 通过style传递的样式,会先在<t-col>上作用
  • 无法在组件外部通过声明class修改样式

@GuYith GuYith mentioned this pull request Aug 21, 2023
72 tasks
@dntzhang dntzhang merged commit 61f1ee4 into Tencent:master Aug 21, 2023
1 check passed
@GuYith
Copy link
Contributor Author

GuYith commented Aug 22, 2023

想请教导师 @dntzhang @ChelesteWang

omi渲染的时候组件本身也会作为一个dom元素,导致内部div的父元素是<t-col>,flex没法按预期生效,这种情况是不是只能够把样式作用给组件本身的dom上去实现。

在React中grid的组件的dom结构如图:
image

渲染效果
image

在omi中dom结构如图:
image

渲染效果
image

将class赋值给<t-col>后可以实现预期效果
image

image

@GuYith
Copy link
Contributor Author

GuYith commented Aug 22, 2023

想请教导师 @dntzhang @ChelesteWang

omi渲染的时候组件本身也会作为一个dom元素,导致内部div的父元素是,flex没法按预期生效,这种情况是不是只能够把样式作用给组件本身的dom上去实现。

在React中grid的组件的dom结构如图: image

渲染效果 image

在omi中dom结构如图: image

渲染效果 image

将class赋值给后可以实现预期效果 image

image

但是这样的实现又存在问题,组件的style是只读属性,没有办法把计算得到的style赋值给<t-col>,还是无法实现期望的效果

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.

None yet

2 participants