config.ts 配置信息
{
label: '主对齐方式',
key: 'xAlignment',
default: 'start',
comType: 'select',
options: {
translateItemLabel: true,
items: [
{
label: '@global@.common.alignmentType.start',
value: 'start',
},
{
label: '@global@.common.alignmentType.center',
value: 'center',
},
{
label: '@global@.common.alignmentType.end',
value: 'end',
},
],
},
},
Scorecard.tsx 获取配置项的值
const [show, font, position, alignment,xAlignment] = getStyles(
style,
['label'],
['show', 'font', 'position', 'alignment','xAlignment'],
);
ScorecardAdapter.tsx扩充flex布局样式 align-items: ${p => p.xAlignment};
扩展知识:
align-items 属性定义flex子项在flex容器的当前行的侧轴(纵轴)方向上的对齐方式。
提示:使用每个弹性对象元素的 align-self 属性可重写 align-items 属性。
stretch | 默认。项目被拉伸以适合容器。 |
center | 项目位于容器的中央。 |
flex-start | 项目位于容器的开头。 |
flex-end | 项目位于容器的末端。 |
baseline | 项目被定位到容器的基线。 |
initial | 将此属性设置为其默认值。 |
inherit | 从其父元素继承此属性。 |
justify-content 用于设置或检索弹性盒子元素在主轴(横轴)方向上的对齐方式。
提示:使用 align-content 属性对齐交叉轴上的各项(垂直)。
flex-start | 默认值。项目位于容器的开头。 |
flex-end | 项目位于容器的结尾。 |
center | 项目位于容器中央。 |
space-between | 项目在行与行之间留有间隔。 |
space-around | 项目在行之前、行之间和行之后留有空间。 |
initial | 将此属性设置为其默认值。 |
inherit | 从其父元素继承此属性。 |
<ScorecardBox padding={padding} xAlignment = {nameConfig?.xAlignment || 'center'} onClick={ssp} style={{ background }}>
<AggregateBox
alignment={nameConfig?.alignment || 'center'}
position={nameConfig?.position || 'column'}
>
<ValueBox style={dataConfig?.[0].font} {...event?.[0]}>
{data?.[0]?.value}
</ValueBox>
{nameConfig?.show && (
<NameBox style={nameConfig?.font} {...event?.[0]}>
{data?.[0]?.name}
</NameBox>
)}
</AggregateBox>
</ScorecardBox>
);
},
);
export default ScorecardAdapter;
const ScorecardBox = styled.div<ScorecardBoxProp>`
display: flex;
flex-direction: column;
align-items: ${p => p.xAlignment};
justify-content: center;
width: 100%;
min-width: 0;
height: 100%;
min-height: 0;
padding: ${p => p.padding};
`;