forked from fanruan/fineui
windy
6 years ago
82 changed files with 8944 additions and 5386 deletions
@ -0,0 +1,590 @@
|
||||
/** |
||||
* 整理所有label场景 |
||||
*/ |
||||
Demo.LabelScene = BI.inherit(BI.Widget, { |
||||
props: { |
||||
baseCls: "demo-label" |
||||
}, |
||||
render: function () { |
||||
var items = []; |
||||
|
||||
items.push(this.createExpander("1.1.1 文字居中,有宽度和高度,有文字宽度,whiteSpace为normal", { |
||||
type: "bi.label", |
||||
cls: "layout-bg6", |
||||
text: "设置了textWidth,则一定是嵌套结构,因此需要用center_adapt布局容纳一下.为了实现不足一行时文字水平居中,超出一行时左对齐,需要设置maxWidth.", |
||||
whiteSpace: "normal", |
||||
height: 50, |
||||
width: 500, |
||||
textWidth: 200, |
||||
textAlign: "center" |
||||
})); |
||||
|
||||
items.push(this.createExpander("1.1.2 居中,有宽度和高度,有文字宽度,whiteSpace为nowrap", { |
||||
type: "bi.label", |
||||
cls: "layout-bg6", |
||||
text: "居中,有宽度高度,有文字宽度,whiteSpace为nowrap,maxWidth会限制文字", |
||||
whiteSpace: "nowrap", |
||||
height: 50, |
||||
width: 500, |
||||
textWidth: 350, |
||||
textAlign: "center" |
||||
})); |
||||
|
||||
items.push((this.createExpander("1.2.1 居中,有宽度无高度,有文字宽度,whiteSpace为normal", { |
||||
type: "bi.label", |
||||
cls: "layout-bg6", |
||||
text: "居中,有宽度无高度,有文字宽度,whiteSpace为normal,我凑点字数,凑点字数,凑点字数,凑点字数,凑点字数,凑点字数", |
||||
whiteSpace: "normal", |
||||
width: 500, |
||||
textWidth: 200, |
||||
textAlign: "center" |
||||
}))); |
||||
|
||||
items.push((this.createExpander("1.2.1 居中,有宽度无高度,有文字宽度,whiteSpace为normal,高度被父容器拉满", { |
||||
type: "bi.absolute", |
||||
height: 100, |
||||
items: [ |
||||
{ |
||||
el: { |
||||
type: "bi.label", |
||||
cls: "layout-bg6", |
||||
text: "此时虽然没有对label设置高度,但由于使用了center_adapt布局,依然会垂直方向居中", |
||||
whiteSpace: "normal", |
||||
width: 500, |
||||
textWidth: 200, |
||||
textAlign: "center" |
||||
}, |
||||
top: 0, |
||||
left: 0, |
||||
bottom: 0 |
||||
} |
||||
] |
||||
}))); |
||||
|
||||
items.push((this.createExpander("1.2.2 居中,有宽度无高度,有文字宽度,whiteSpace为nowrap", { |
||||
type: "bi.label", |
||||
cls: "layout-bg6", |
||||
text: "居中,有宽度无高度,有文字宽度,whiteSpace为nowrap,我凑点字数,凑点字数,凑点字数,凑点字数,凑点字数,凑点字数", |
||||
whiteSpace: "nowrap", |
||||
width: 500, |
||||
textWidth: 350, |
||||
textAlign: "center" |
||||
}))); |
||||
|
||||
items.push((this.createExpander("1.3.1 居中,有宽度和高度,无文字宽度,whiteSpace为normal", { |
||||
type: "bi.label", |
||||
cls: "layout-bg3", |
||||
text: "居中,有宽度高度,无文字宽度,whiteSpace为normal,只需用center_adapt布局包一下即可.度,下即可.居中,有宽度,无文字宽度,whiteSpace为normal居中,有宽度,无文字宽度,下即可.居中,有宽度,无文字宽度,whiteSpace为normal居中,有宽度,无文字宽度,下即可.居中,有宽度,无文字宽度,whiteSpace为normal居中,有宽度,无文字宽度,度,无文字宽度,whiteSpace为normal居中,有宽度,无文字宽度,whiteSpace为normal", |
||||
width: 500, |
||||
whiteSpace: "normal", |
||||
textAlign: "center", |
||||
height: 50 |
||||
}))); |
||||
|
||||
items.push((this.createExpander("1.3.2 居中,有宽度无高度,无文字宽度,whiteSpace为normal", { |
||||
type: "bi.absolute", |
||||
height: 100, |
||||
items: [ |
||||
{ |
||||
el: { |
||||
type: "bi.label", |
||||
cls: "layout-bg3", |
||||
text: "居中,有宽度无高度,无文字宽度,whiteSpace为normal,只需用center_adapt布局包一下即可.度,下即可.居中,有宽度,无文字宽度,whiteSpace为normal居中,有宽度,无文字宽度,下即可.居中,有宽度,无文字宽度,whiteSpace为normal居中,有宽度,无文字宽度,下即可.居中,有宽度,无文字宽度,whiteSpace为normal居中,有宽度,无文字宽度,度,无文字宽度,whiteSpace为normal居中,有宽度,无文字宽度,whiteSpace为normal", |
||||
width: 500, |
||||
whiteSpace: "normal", |
||||
textAlign: "center" |
||||
}, |
||||
top: 0, |
||||
left: 0, |
||||
bottom: 0 |
||||
} |
||||
] |
||||
}))); |
||||
|
||||
items.push((this.createExpander("1.4 居中,有宽度和高度,无文字宽度,whiteSpace为nowrap", { |
||||
type: "bi.label", |
||||
cls: "layout-bg3", |
||||
text: "居中,有宽度500有高度50,无文字宽度,whiteSpace为nowrap,此处无需两层div,设置text即可,然后设置line-height为传入高度即可实现垂直方向居中", |
||||
width: 500, |
||||
whiteSpace: "nowrap", |
||||
textAlign: "center", |
||||
height: 50 |
||||
}))); |
||||
|
||||
items.push((this.createExpander("1.5.1 居中,有宽度无高度,无文字宽度,whiteSpace为nowrap", { |
||||
type: "bi.label", |
||||
cls: "layout-bg3", |
||||
text: "居中,有宽度500无高度,无文字宽度,whiteSpace为nowrap,我凑点字数,凑点字数,凑点字数,凑点字数,凑点字数,凑点字数", |
||||
width: 500, |
||||
whiteSpace: "nowrap", |
||||
textAlign: "center" |
||||
}))); |
||||
|
||||
items.push((this.createExpander("1.5.2 居中,有宽度无高度,无文字宽度,whiteSpace为nowrap,高度被父级拉满", { |
||||
type: "bi.absolute", |
||||
height: 50, |
||||
items: [ |
||||
{ |
||||
el: { |
||||
type: "bi.label", |
||||
cls: "layout-bg3", |
||||
text: "居中,有宽度500无高度,无文字宽度,whiteSpace为nowrap,我凑点字数,凑点字数,凑点字数,凑点字数,凑点字数,凑点字数", |
||||
width: 500, |
||||
whiteSpace: "nowrap", |
||||
textAlign: "center" |
||||
}, |
||||
top: 0, |
||||
left: 0, |
||||
bottom: 0 |
||||
} |
||||
] |
||||
}))); |
||||
|
||||
items.push((this.createExpander("1.6.1 居中,无宽度无高度,有文字宽度,whiteSpace为nowrap", { |
||||
type: "bi.label", |
||||
cls: "layout-bg3", |
||||
text: "居中,无宽度,有文字宽度,whiteSpace为nowrap,我凑点字数,凑点字数,凑点字数,凑点字数,凑点字数,凑点字数", |
||||
textWidth: 500, |
||||
whiteSpace: "nowrap", |
||||
textAlign: "center" |
||||
}))); |
||||
|
||||
items.push((this.createExpander("1.6.2 居中,无宽度无高度,有文字宽度,whiteSpace为normal", { |
||||
type: "bi.label", |
||||
cls: "layout-bg3", |
||||
text: "居中,无宽度,有文字宽度,whiteSpace为normal,我凑点字数,凑点字数,凑点字数,凑点字数,凑点字数,凑点字数", |
||||
textWidth: 500, |
||||
whiteSpace: "normal", |
||||
textAlign: "center" |
||||
}))); |
||||
|
||||
items.push((this.createExpander("1.6.3 居中,无宽度无,有文字宽度,whiteSpace为normal,被父级拉满", { |
||||
type: "bi.absolute", |
||||
height: 100, |
||||
items: [ |
||||
{ |
||||
el: { |
||||
type: "bi.label", |
||||
cls: "layout-bg3", |
||||
text: "居中,无宽度,有文字宽度,whiteSpace为normal,我凑点字数,凑点字数,凑点字数,凑点字数,凑点字数,凑点字数", |
||||
textWidth: 500, |
||||
whiteSpace: "normal", |
||||
textAlign: "center" |
||||
}, |
||||
left: 0, |
||||
right: 0, |
||||
top: 0, |
||||
bottom: 0 |
||||
} |
||||
] |
||||
}))); |
||||
|
||||
items.push((this.createExpander("1.7.1 居中,无宽度无高度,无文字宽度,whiteSpace为normal", { |
||||
type: "bi.label", |
||||
cls: "layout-bg3", |
||||
text: "居中,无宽度无高度,无文字宽度,whiteSpace为normal,我凑点字数,凑点字数,凑点字数,凑点字数,凑点字数,凑点字数,凑点字数,凑点字数,凑点字数,凑点字数,凑点字数,凑点字数,凑点字数,凑点字数,凑点字数,凑点字数,凑点字数,凑点字数,凑点字数,凑点字数,凑点字数,凑点字数", |
||||
whiteSpace: "normal", |
||||
textAlign: "center" |
||||
}))); |
||||
|
||||
items.push((this.createExpander("1.7.2 居中,无宽度无高度,无文字宽度,whiteSpace为normal,被父级拉满", { |
||||
type: "bi.absolute", |
||||
height: 100, |
||||
items: [ |
||||
{ |
||||
el: { |
||||
type: "bi.label", |
||||
cls: "layout-bg3", |
||||
text: "居中,无宽度无高度,无文字宽度,whiteSpace为normal,我凑点字数,凑点字数,凑点字数,凑点字数,凑点字数,凑点字数,凑点字数,凑点字数,凑点字数,凑点字数,凑点字数,凑点字数,凑点字数,凑点字数,凑点字数,凑点字数,凑点字数,凑点字数,凑点字数,凑点字数,凑点字数,凑点字数", |
||||
whiteSpace: "normal", |
||||
textAlign: "center" |
||||
}, |
||||
left: 0, |
||||
right: 0, |
||||
top: 0, |
||||
bottom: 0 |
||||
} |
||||
] |
||||
}))); |
||||
|
||||
items.push((this.createExpander("1.7.3 居中,无宽度有高度,无文字宽度,whiteSpace为normal", { |
||||
type: "bi.label", |
||||
cls: "layout-bg3", |
||||
text: "居中,无宽度有高度,无文字宽度,whiteSpace为normal,我凑点字数,凑点字数,凑点字数,凑点字数,凑点字数,凑点字数,凑点字数,凑点字数,凑点字数,数,凑点字数,凑点字数,凑点字数,凑点字数,凑点字数,凑点字数数,凑点字数,凑点字数,凑点字数,凑点字数,凑点字数,凑点字数数,凑点字数,凑点字数,凑点字数,凑点字数,凑点字数,凑点字数凑点字数,凑点字数,凑点字数,凑点字数,凑点字数,凑点字数,凑点字数,凑点字数,凑点字数,凑点字数,凑点字数,凑点字数,凑点字数", |
||||
whiteSpace: "normal", |
||||
height: 50, |
||||
textAlign: "center" |
||||
}))); |
||||
|
||||
items.push((this.createExpander("1.8 居中,无宽度有高度,无文字宽度,whiteSpace为nowrap", { |
||||
type: "bi.label", |
||||
cls: "layout-bg3", |
||||
text: "居中,无宽度有高度,无文字宽度,whiteSpace为nowrap,我凑点字数,凑点字数,凑点字数,凑点字数,凑点字数,凑点字数,凑点字数,凑点字数,凑点字数,凑点字数,凑点字数,凑点字数,凑点字数,凑点字数,凑点字数,凑点字数,凑点字数,凑点字数,凑点字数,凑点字数,凑点字数,凑点字数", |
||||
whiteSpace: "nowrap", |
||||
height: 50, |
||||
textAlign: "center" |
||||
}))); |
||||
|
||||
items.push((this.createExpander("1.9 居中,无宽度无高度,无文字宽度,whiteSpace为nowrap", { |
||||
type: "bi.label", |
||||
cls: "layout-bg3", |
||||
text: "居中,无宽度无高度,无文字宽度,whiteSpace为nowrap,我凑点字数,凑点字数,凑点字数,凑点字数,凑点字数,凑点字数,凑点字数,凑点字数,凑点字数,凑点字数,凑点字数,凑点字数,凑点字数,凑点字数,凑点字数,凑点字数,凑点字数,凑点字数,凑点字数,凑点字数,凑点字数,凑点字数", |
||||
whiteSpace: "nowrap", |
||||
textAlign: "center" |
||||
}))); |
||||
|
||||
items.push((this.createExpander("1.9.1 居中,无宽度无高度,无文字宽度,whiteSpace为nowrap,高度被父级拉满", { |
||||
type: "bi.absolute", |
||||
height: 50, |
||||
items: [ |
||||
{ |
||||
el: { |
||||
type: "bi.label", |
||||
cls: "layout-bg3", |
||||
text: "居中,无宽度无高度,无文字宽度,whiteSpace为nowrap,我凑点字数,凑点字数,凑点字数,凑点字数,凑点字数,凑点字数,凑点字数,凑点字数,凑点字数,凑点字数,凑点字数,凑点字数,凑点字数,凑点字数,凑点字数,凑点字数,凑点字数,凑点字数,凑点字数,凑点字数,凑点字数,凑点字数", |
||||
whiteSpace: "nowrap", |
||||
textAlign: "center" |
||||
}, |
||||
top: 0, |
||||
left: 0, |
||||
right: 0, |
||||
bottom: 0 |
||||
} |
||||
] |
||||
}))); |
||||
|
||||
items.push((this.createExpander("2.1.1 居左,有宽度有高度,有文字宽度,whiteSpace为normal", { |
||||
type: "bi.label", |
||||
cls: "layout-bg2", |
||||
text: "居左,有宽度有高度,有文字宽度,whiteSpace为normal,为了演示这个是真的是normal的我凑点字数,凑点字数,凑点字数,凑点字数,凑点字数,凑点字数,凑点字数", |
||||
whiteSpace: "normal", |
||||
textAlign: "left", |
||||
textWidth: 300, |
||||
height: 50, |
||||
width: 500 |
||||
}))); |
||||
|
||||
items.push((this.createExpander("2.1.2 居左,有宽度有高度,有文字宽度,whiteSpace为nowrap", { |
||||
type: "bi.label", |
||||
cls: "layout-bg2", |
||||
text: "居左,有宽度有高度,有文字宽度,whiteSpace为normal,为了演示这个是真的是normal的我凑点字数,凑点字数,凑点字数,凑点字数,凑点字数,凑点字数,凑点字数", |
||||
whiteSpace: "nowrap", |
||||
textAlign: "left", |
||||
textWidth: 300, |
||||
height: 50, |
||||
width: 500 |
||||
}))); |
||||
|
||||
items.push((this.createExpander("2.2.1 居左,有宽度无高度,有文字宽度,whiteSpace为normal", { |
||||
type: "bi.label", |
||||
cls: "layout-bg2", |
||||
text: "居左,有宽度无高度,有文字宽度,whiteSpace为normal,不设置高度,为了演示这个是真的是normal的我凑点字数,凑点字数,凑点字数,凑点字数,凑点字数,凑点字数,凑点字数", |
||||
whiteSpace: "normal", |
||||
textAlign: "left", |
||||
textWidth: 300, |
||||
width: 500 |
||||
}))); |
||||
|
||||
items.push((this.createExpander("2.2.2 居左,有宽度无高度,有文字宽度,whiteSpace为normal,高度被父级拉满", { |
||||
type: "bi.absolute", |
||||
height: 100, |
||||
items: [ |
||||
{ |
||||
el: { |
||||
type: "bi.label", |
||||
cls: "layout-bg2", |
||||
text: "居左,有宽度无高度,有文字宽度,whiteSpace为normal,不设置高度,为了演示这个是真的是normal的我凑点字数,凑点字数,凑点字数,凑点字数,凑点字数,凑点字数,凑点字数", |
||||
whiteSpace: "normal", |
||||
textAlign: "left", |
||||
textWidth: 300, |
||||
width: 500 |
||||
}, |
||||
top: 0, |
||||
bottom: 0, |
||||
left: 0 |
||||
} |
||||
] |
||||
}))); |
||||
|
||||
items.push((this.createExpander("2.2.3 居左,有宽度无高度,有文字宽度,whiteSpace为nowrap", { |
||||
type: "bi.label", |
||||
cls: "layout-bg2", |
||||
text: "居左,有宽度无高度,有文字宽度,whiteSpace为nowrap,不设置高度,为了演示这个是真的是normal的我凑点字数,凑点字数,凑点字数,凑点字数,凑点字数,凑点字数,凑点字数", |
||||
whiteSpace: "nowrap", |
||||
textAlign: "left", |
||||
textWidth: 300, |
||||
width: 500 |
||||
}))); |
||||
|
||||
items.push((this.createExpander("2.2.4 居左,有宽度无高度,有文字宽度,whiteSpace为nowrap,高度被父级拉满", { |
||||
type: "bi.absolute", |
||||
height: 100, |
||||
items: [ |
||||
{ |
||||
el: { |
||||
type: "bi.label", |
||||
cls: "layout-bg2", |
||||
text: "居左,有宽度无高度,有文字宽度,whiteSpace为nowrap,不设置高度,为了演示这个是真的是normal的我凑点字数,凑点字数,凑点字数,凑点字数,凑点字数,凑点字数,凑点字数", |
||||
whiteSpace: "nowrap", |
||||
textAlign: "left", |
||||
textWidth: 300, |
||||
width: 500 |
||||
}, |
||||
top: 0, |
||||
bottom: 0, |
||||
left: 0 |
||||
} |
||||
] |
||||
}))); |
||||
|
||||
items.push((this.createExpander("2.3.1 居左,有宽度有高度,无文字宽度,whiteSpace为nowrap", { |
||||
type: "bi.label", |
||||
cls: "layout-bg2", |
||||
text: "居左,有宽度有高度,无文字宽度,whiteSpace为nowrap,我凑点字数,凑点字数,凑点字数,凑点字数,凑点字数,凑点字数,凑点字数", |
||||
whiteSpace: "nowrap", |
||||
textAlign: "left", |
||||
height: 50, |
||||
vgap: 5, |
||||
width: 500 |
||||
}))); |
||||
|
||||
items.push((this.createExpander("2.3.2 居左,有宽度有高度,无文字宽度,whiteSpace为normal", { |
||||
type: "bi.label", |
||||
cls: "layout-bg2", |
||||
text: "居左,有宽度有高度,无文字宽度,whiteSpace为normal,我凑点字数,凑点字数,凑点字数,凑点字数,凑点字数,凑点字数,凑点字数", |
||||
whiteSpace: "normal", |
||||
textAlign: "left", |
||||
height: 50, |
||||
width: 500 |
||||
}))); |
||||
|
||||
items.push((this.createExpander("2.4.1 居左,有宽度无高度,无文字宽度,whiteSpace为normal", { |
||||
type: "bi.label", |
||||
cls: "layout-bg2", |
||||
text: "居左,有宽度无高度,无文字宽度,whiteSpace为normal,我凑点字数,凑点字数,凑点字数,凑点字数,凑点字数,凑点字数,凑点字数", |
||||
whiteSpace: "normal", |
||||
textAlign: "left", |
||||
width: 500 |
||||
}))); |
||||
|
||||
items.push((this.createExpander("2.4.2 居左,有宽度无高度,无文字宽度,whiteSpace为normal,高度被父级拉满", { |
||||
type: "bi.absolute", |
||||
height: 100, |
||||
items: [ |
||||
{ |
||||
el: { |
||||
type: "bi.label", |
||||
cls: "layout-bg1", |
||||
text: "居左,有宽度无高度,无文字宽度,whiteSpace为normal,我凑点字数,凑点字数,凑点字数,凑点字数,凑点字数,凑点字数,凑点字数", |
||||
whiteSpace: "normal", |
||||
textAlign: "left", |
||||
width: 500 |
||||
}, |
||||
top: 0, |
||||
left: 0, |
||||
bottom: 0 |
||||
} |
||||
] |
||||
}))); |
||||
|
||||
items.push((this.createExpander("2.5.1 居左,无宽度无高度,有文字宽度,whiteSpace为normal", { |
||||
type: "bi.label", |
||||
cls: "layout-bg2", |
||||
text: "居左,无宽度无高度,有文字宽度,whiteSpace为normal,我凑点字数,凑点字数,凑点字数,凑点字数,凑点字数,凑点字数,凑点字数", |
||||
whiteSpace: "normal", |
||||
textAlign: "left", |
||||
textWidth: 300 |
||||
}))); |
||||
|
||||
items.push((this.createExpander("2.5.2 居左,无宽度无高度,有文字宽度,whiteSpace为normal,高度被父级拉满", { |
||||
type: "bi.absolute", |
||||
height: 100, |
||||
items: [ |
||||
{ |
||||
el: { |
||||
type: "bi.label", |
||||
cls: "layout-bg2", |
||||
text: "居左,无宽度无高度,有文字宽度,whiteSpace为normal,我凑点字数,凑点字数,凑点字数,凑点字数,凑点字数,凑点字数,凑点字数", |
||||
whiteSpace: "normal", |
||||
textAlign: "left", |
||||
textWidth: 300 |
||||
}, |
||||
top: 0, |
||||
left: 0, |
||||
bottom: 0, |
||||
right: 0 |
||||
} |
||||
] |
||||
}))); |
||||
|
||||
items.push((this.createExpander("2.5.3 居左,无宽度无高度,有文字宽度,whiteSpace为nowrap", { |
||||
type: "bi.label", |
||||
cls: "layout-bg2", |
||||
text: "居左,无宽度无高度,有文字宽度,whiteSpace为normal,我凑点字数,凑点字数,凑点字数,凑点字数,凑点字数,凑点字数,凑点字数", |
||||
whiteSpace: "nowrap", |
||||
textAlign: "left", |
||||
textWidth: 300 |
||||
}))); |
||||
|
||||
items.push((this.createExpander("2.5.4 居左,无宽度无高度,有文字宽度,whiteSpace为nowrap,高度被父级拉满", { |
||||
type: "bi.absolute", |
||||
height: 100, |
||||
items: [ |
||||
{ |
||||
el: { |
||||
type: "bi.label", |
||||
cls: "layout-bg2", |
||||
text: "居左,无宽度无高度,有文字宽度,whiteSpace为normal,我凑点字数,凑点字数,凑点字数,凑点字数,凑点字数,凑点字数,凑点字数", |
||||
whiteSpace: "nowrap", |
||||
textAlign: "left", |
||||
textWidth: 300 |
||||
}, |
||||
top: 0, |
||||
left: 0, |
||||
bottom: 0, |
||||
right: 0 |
||||
} |
||||
] |
||||
}))); |
||||
|
||||
items.push((this.createExpander("2.6.1 居左,无宽度有高度,无文字宽度,whiteSpace为nowrap", { |
||||
type: "bi.label", |
||||
cls: "layout-bg2", |
||||
text: "居左,无宽度有高度,无文字宽度,whiteSpace为nowrap,注意这个是设置了vgap的,为了实现居中,lineHeight要做计算,才能准确的垂直居中", |
||||
whiteSpace: "nowrap", |
||||
textAlign: "left", |
||||
vgap: 10, |
||||
height: 50 |
||||
}))); |
||||
|
||||
items.push((this.createExpander("2.6.2 居左,无宽度有高度,无文字宽度,whiteSpace为normal", { |
||||
type: "bi.label", |
||||
cls: "layout-bg2", |
||||
text: "居左,无宽度有高度,无文字宽度,whiteSpace为normal,我凑点字数,凑点字数,凑点字数,凑点字数,凑点字数,凑点字数,凑点字数,我凑点字数,凑点字数,凑点字数,凑点字数,凑点字数,凑点字数,凑点字数,我凑点字数,凑点字数,凑点字数,凑点字数,凑点字数,凑点字数,凑点字数,我凑点字数,凑点字数,凑点字数,凑点字数,凑点字数,凑点字数,凑点字数,我凑点字数,凑点字数,凑点字数,凑点字数,凑点字数,凑点字数,凑点字数,我凑点字数,凑点字数,凑点字数,凑点字数,凑点字数,凑点字数,凑点字数", |
||||
whiteSpace: "normal", |
||||
textAlign: "left", |
||||
height: 50 |
||||
}))); |
||||
|
||||
items.push((this.createExpander("2.7.1 居左,无宽度无高度,无文字宽度,whiteSpace为normal", { |
||||
type: "bi.label", |
||||
cls: "layout-bg2", |
||||
text: "居左,无宽度无高度,无文字宽度,whiteSpace为normal,我凑点字数,凑点字数,凑点字数,凑点字数,凑点字数,凑点字数,凑点字数,我凑点字数,凑点字数,凑点字数,字数,我凑点字数,凑点字数,凑点字数,凑点字数,凑点字数,凑点字数,凑点字数,我凑点字数,凑点字数,凑点字数,凑点字数,凑点字数,凑点字数,凑点字数", |
||||
whiteSpace: "normal", |
||||
textAlign: "left" |
||||
}))); |
||||
|
||||
items.push((this.createExpander("2.7.2 居左,无宽度无高度,无文字宽度,whiteSpace为normal,高度被父级拉满", { |
||||
type: "bi.absolute", |
||||
height: 100, |
||||
items: [ |
||||
{ |
||||
el: { |
||||
type: "bi.label", |
||||
cls: "layout-bg2", |
||||
text: "居左,无宽度无高度,无文字宽度,whiteSpace为normal,我凑点字数,凑点字数,凑点字数,凑点字数,凑点字数,凑点字数,凑点字数,我凑点字数,凑点字数,凑点字数,字数,我凑点字数,凑点字数,凑点字数,凑点字数,凑点字数,凑点字数,凑点字数,我凑点字数,凑点字数,凑点字数,凑点字数,凑点字数,凑点字数,凑点字数", |
||||
whiteSpace: "normal", |
||||
textAlign: "left" |
||||
}, |
||||
top: 0, |
||||
left: 0, |
||||
bottom: 0, |
||||
right: 0 |
||||
} |
||||
] |
||||
}))); |
||||
|
||||
items.push((this.createExpander("2.7.3 居左,无宽度无高度,无文字宽度,whiteSpace为nowrap", { |
||||
type: "bi.label", |
||||
cls: "layout-bg2", |
||||
text: "居左,无宽度无高度,无文字宽度,whiteSpace为nowrap,我凑点字数,凑点字数,凑点字数,凑点字数,凑点字数,凑点字数,凑点字数,我凑点字数,凑点字数,凑点字数,字数,我凑点字数,凑点字数,凑点字数,凑点字数,凑点字数,凑点字数,凑点字数,我凑点字数,凑点字数,凑点字数,凑点字数,凑点字数,凑点字数,凑点字数", |
||||
whiteSpace: "nowrap", |
||||
textAlign: "left" |
||||
}))); |
||||
|
||||
items.push((this.createExpander("2.7.4 居左,无宽度无高度,无文字宽度,whiteSpace为nowrap,高度被父级拉满", { |
||||
type: "bi.absolute", |
||||
height: 100, |
||||
items: [ |
||||
{ |
||||
el: { |
||||
type: "bi.label", |
||||
cls: "layout-bg2", |
||||
text: "居左,无宽度无高度,无文字宽度,whiteSpace为nowrap,我凑点字数,凑点字数,凑点字数,凑点字数,凑点字数,凑点字数,凑点字数,我凑点字数,凑点字数,凑点字数,字数,我凑点字数,凑点字数,凑点字数,凑点字数,凑点字数,凑点字数,凑点字数,我凑点字数,凑点字数,凑点字数,凑点字数,凑点字数,凑点字数,凑点字数", |
||||
whiteSpace: "nowrap", |
||||
textAlign: "left" |
||||
}, |
||||
top: 0, |
||||
left: 0, |
||||
bottom: 0, |
||||
right: 0 |
||||
} |
||||
] |
||||
}))); |
||||
|
||||
items.push((this.createExpander("2.8 居左,无宽度无高度,无文字宽度,whiteSpace为nowrap,高度被父级拉满", { |
||||
type: "bi.absolute", |
||||
height: 100, |
||||
items: [ |
||||
{ |
||||
el: { |
||||
type: "bi.label", |
||||
cls: "layout-bg2", |
||||
text: "居左,无宽度无高度,无文字宽度,whiteSpace为nowrap,我凑点字数,凑点字数,凑点字数,凑点字数,凑点字数,凑点字数,凑点字数,我凑点字数,凑点字数,凑点字数,字数,我凑点字数,凑点字数,凑点字数,凑点字数,凑点字数,凑点字数,凑点字数,我凑点字数,凑点字数,凑点字数,凑点字数,凑点字数,凑点字数,凑点字数", |
||||
whiteSpace: "nowrap", |
||||
textAlign: "left" |
||||
}, |
||||
top: 0, |
||||
left: 0, |
||||
bottom: 0, |
||||
right: 0 |
||||
} |
||||
] |
||||
}))); |
||||
|
||||
items.push((this.createExpander("2.8.2 居左,无宽度无高度,无文字宽度,whiteSpace为normal,高度被父级拉满", { |
||||
type: "bi.absolute", |
||||
height: 100, |
||||
items: [ |
||||
{ |
||||
el: { |
||||
type: "bi.label", |
||||
cls: "layout-bg2", |
||||
text: "居左,无宽度无高度,无文字宽度,whiteSpace为normal,我凑点字数,凑点字数,凑点字数,凑点字数,凑点字数,凑点字数,凑点字数,我凑点字数,凑点字数,凑点字数,字数,我凑点字数,凑点字数,凑点字数,凑点字数,凑点字数,凑点字数,凑点字数,我凑点字数,凑点字数,凑点字数,凑点字数,凑点字数,凑点字数,凑点字数", |
||||
whiteSpace: "normal", |
||||
textAlign: "left" |
||||
}, |
||||
top: 0, |
||||
left: 0, |
||||
bottom: 0, |
||||
right: 0 |
||||
} |
||||
] |
||||
}))); |
||||
|
||||
return { |
||||
type: "bi.vertical", |
||||
items: items, |
||||
hgap: 300, |
||||
vgap: 20 |
||||
}; |
||||
}, |
||||
|
||||
createExpander: function (text, popup) { |
||||
return { |
||||
type: "bi.vertical", |
||||
items: [ |
||||
{ |
||||
type: "bi.label", |
||||
cls: "demo-font-weight-bold", |
||||
textAlign: "left", |
||||
text: text, |
||||
height: 30 |
||||
}, { |
||||
el: popup |
||||
} |
||||
] |
||||
}; |
||||
} |
||||
}); |
||||
BI.shortcut("demo.label_scene", Demo.LabelScene); |
@ -0,0 +1,48 @@
|
||||
/** |
||||
* Created by Dailer on 2017/7/13. |
||||
*/ |
||||
Demo.TimeCombo = BI.inherit(BI.Widget, { |
||||
props: { |
||||
baseCls: "" |
||||
}, |
||||
|
||||
render: function () { |
||||
var self = this; |
||||
return { |
||||
type: "bi.horizontal_auto", |
||||
items: [{ |
||||
type: "bi.time_combo", |
||||
ref: function (_ref) { |
||||
self.timeCombo = _ref; |
||||
}, |
||||
// allowEdit: true,
|
||||
// format: "%H:%M:%S", // HH:mm:ss
|
||||
// format: "%I:%M:%S", // hh:mm:ss
|
||||
// format: "%l:%M:%S", // h:mm:ss
|
||||
// format: "%k:%M:%S", // H:mm:ss
|
||||
// format: "%l:%M:%S %p", // h:mm:ss a
|
||||
// format: "%l:%M", // h:mm
|
||||
// format: "%k:%M", // H:mm
|
||||
// format: "%I:%M", // hh:mm
|
||||
// format: "%H:%M", // HH:mm
|
||||
// format: "%M:%S", // mm:ss
|
||||
value: { |
||||
hour: 12, |
||||
minute: 0, |
||||
second: 0 |
||||
}, |
||||
width: 300 |
||||
}, { |
||||
type: "bi.button", |
||||
text: "getValue", |
||||
handler: function () { |
||||
BI.Msg.toast(JSON.stringify(self.timeCombo.getValue())); |
||||
}, |
||||
width: 300 |
||||
}], |
||||
vgap: 20 |
||||
}; |
||||
} |
||||
}); |
||||
|
||||
BI.shortcut("demo.time_combo", Demo.TimeCombo); |
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
@ -0,0 +1,4 @@
|
||||
.bi-time-trigger .show-text { |
||||
background-color: rgba(255, 255, 255, 0); |
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00ffffff,endColorstr=#00ffffff); |
||||
} |
@ -0,0 +1,8 @@
|
||||
@import "../../index"; |
||||
|
||||
.bi-time-trigger{ |
||||
& .show-text { |
||||
// ie10一下无背景色会鼠标穿透 |
||||
.background-color(@background-color-default, 0); |
||||
} |
||||
} |
Loading…
Reference in new issue