forked from opentiny/tiny-vue
fix(row): [layout] restore the gutter value, and add gutter demo (#1006)
* fix(row): restore the gutter value, and add gutter demo * fix(row): fix e2e test
This commit is contained in:
parent
2287462499
commit
5cd9c06c71
|
@ -12,6 +12,17 @@
|
|||
<div class="col">gutter {{ gutter }}px</div>
|
||||
</tiny-col>
|
||||
</tiny-row>
|
||||
<tiny-row :gutter="0" noSpace>
|
||||
<tiny-col :span="4">
|
||||
<div class="col">noSpace</div>
|
||||
</tiny-col>
|
||||
<tiny-col :span="4">
|
||||
<div class="col">noSpace</div>
|
||||
</tiny-col>
|
||||
<tiny-col :span="4">
|
||||
<div class="col">noSpace</div>
|
||||
</tiny-col>
|
||||
</tiny-row>
|
||||
</tiny-layout>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
@ -13,4 +13,7 @@ test('gutter栅格间隔', async ({ page }) => {
|
|||
|
||||
const row3 = layout.nth(2)
|
||||
await expect(row3.locator('div').first()).toHaveCSS('padding-left', '10px')
|
||||
|
||||
const row4 = layout.first()
|
||||
await expect(row4).toHaveCSS('margin-left', '0px')
|
||||
})
|
||||
|
|
|
@ -12,6 +12,17 @@
|
|||
<div class="col">gutter {{ gutter }}px</div>
|
||||
</tiny-col>
|
||||
</tiny-row>
|
||||
<tiny-row :gutter="0" noSpace>
|
||||
<tiny-col :span="4">
|
||||
<div class="col">noSpace</div>
|
||||
</tiny-col>
|
||||
<tiny-col :span="4">
|
||||
<div class="col">noSpace</div>
|
||||
</tiny-col>
|
||||
<tiny-col :span="4">
|
||||
<div class="col">noSpace</div>
|
||||
</tiny-col>
|
||||
</tiny-row>
|
||||
</tiny-layout>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
@ -81,8 +81,9 @@ export default {
|
|||
'name': { 'zh-CN': '栅格间隔', 'en-US': 'Gutter' },
|
||||
'desc': {
|
||||
'zh-CN': `
|
||||
通过使用 <code>Row</code> 组件的 <code>gutter</code> 属性实现栅格间隔。
|
||||
不设置 <code>gutter</code> 时,组件会默认为 <code>Col</code> 设置<code> 左右10px </code>的padding值。
|
||||
通过使用 <code>Row</code> 组件的 <code>gutter</code> 属性实现栅格间隔。<br>
|
||||
不设置 <code>gutter</code> 时,组件会默认为 <code>Col</code> 设置<code> 左右10px </code>的padding值<br>
|
||||
通过 <code>noSpace</code> 属性,让子项间没有间距。
|
||||
`,
|
||||
'en-US': `
|
||||
This is done by using the <code>gutter</code> property of the <code>Row</code> component.
|
||||
|
@ -160,6 +161,16 @@ export default {
|
|||
'desc': { 'zh-CN': '子项的间隔的像素', 'en-US': 'The spacing of the child items in pixels' },
|
||||
'demoId': 'gutter'
|
||||
},
|
||||
{
|
||||
'name': 'noSpace',
|
||||
'type': 'boolean',
|
||||
'defaultValue': 'false',
|
||||
'desc': {
|
||||
'zh-CN': '子项没有间隔,相当于强制gutter=0的情况',
|
||||
'en-US': 'Child entries have no spacing, equivalent to forcing gutter=0'
|
||||
},
|
||||
'demoId': 'gutter'
|
||||
},
|
||||
{
|
||||
'name': 'justify',
|
||||
'type': 'string',
|
||||
|
|
|
@ -120,10 +120,15 @@ export const getStyle =
|
|||
const no = props.no
|
||||
const styles = []
|
||||
let gutter = parent ? parent.gutter : null
|
||||
let noSpace = parent ? parent.noSpace : null
|
||||
let order = ''
|
||||
|
||||
gutter = gutter / 2
|
||||
styles.push(`padding-left:${gutter}px;padding-right:${gutter}px;`)
|
||||
if (gutter) {
|
||||
gutter = gutter / 2
|
||||
styles.push(`padding-left:${gutter}px;padding-right:${gutter}px;`)
|
||||
} else if (noSpace) {
|
||||
styles.push('padding-left:0;padding-right:0;')
|
||||
}
|
||||
|
||||
if (parent && parent.flex && parent.order) {
|
||||
/* istanbul ignore next */
|
||||
|
|
|
@ -14,13 +14,12 @@ import { setSubitemAttrValue, setGlobalAttrValue, getClassName, getStyle, row }
|
|||
|
||||
export const api = ['state']
|
||||
|
||||
export const renderless = (props, { computed, reactive, inject }, { parent }) => {
|
||||
export const renderless = (props, { computed, reactive }, { parent }) => {
|
||||
const api = {}
|
||||
const state = reactive({
|
||||
row: computed(() => api.row()),
|
||||
style: computed(() => api.getStyle()),
|
||||
className: computed(() => api.getClassName()),
|
||||
layout: inject('layout')
|
||||
className: computed(() => api.getClassName())
|
||||
})
|
||||
|
||||
Object.assign(api, {
|
||||
|
|
|
@ -20,7 +20,7 @@ export default defineComponent({
|
|||
flex: Boolean,
|
||||
gutter: {
|
||||
type: Number,
|
||||
default: 20,
|
||||
default: 0,
|
||||
validator(value: number) {
|
||||
return value >= 0
|
||||
}
|
||||
|
@ -42,6 +42,10 @@ export default defineComponent({
|
|||
tag: {
|
||||
type: String,
|
||||
default: 'div'
|
||||
},
|
||||
noSpace: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
setup(props, context) {
|
||||
|
|
|
@ -20,7 +20,7 @@ import { renderless, api } from '@opentiny/vue-renderless/row/vue'
|
|||
import { props, setup, defineComponent } from '@opentiny/vue-common'
|
||||
|
||||
export default defineComponent({
|
||||
props: [...props, 'flex', 'gutter', 'justify', 'align', 'order', 'tag'],
|
||||
props: [...props, 'flex', 'gutter', 'justify', 'align', 'order', 'tag', 'noSpace'],
|
||||
setup(props, context) {
|
||||
return setup({ props, context, renderless, api })
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue