Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
'<strong>Holy guacamole!</strong> Check this info.'
)
}}
/>
);
const popover = (
{content}
);
const placement = select(
'Placement',
['top', 'bottom', 'left', 'right'],
'right'
);
const trigger = select(
'Trigger',
['hover', 'focus', 'hover focus', 'click'],
'click'
);
const rootClose = boolean('Root Close', true);
return (
<div style="{{">
<button>Holy guacamole!</button>
</div>
() => {
const element = select("Element", Object.values(ELEMENT_OPTIONS), ELEMENT_OPTIONS.H2);
const type = select("Type", Object.values(TYPE_OPTIONS), TYPE_OPTIONS.DISPLAY);
const dataTest = text("dataTest", "test");
const id = text("ID", "ID-OF-A-ELEMENT");
const customTitle = text("Title", "Orbit design system");
const dataA11ySection = text("dataA11ySection", "ID-OF-SECTION");
const spaceAfter = select("spaceAfter", [null, ...Object.values(SPACINGS_AFTER)]);
return (
{customTitle}
);
},
{
.add("directions", () => {
const directions = {
column: "column",
row: "row",
columnReverse: "column-reverse",
rowReverse: "row-reverse"
};
const direction = select("directions", directions, "column");
return (
<div>
<p>
Use the Knobs panel to change the direction the flex items get layed
out
</p>
1
2
</div>
.add('Example', () => {
return `
storiesOf('UI5 Web Components | Input', module).add('Generated default story', () => (
<input value="{'generatedString'}" type="{select('type'," readonly="{boolean('readonly'," placeholder="{'generatedString'}" disabled="{boolean('disabled',">
null
));
.add('wide / horizontal / 3', () => {
const size = select('size', Object.keys(CARD_SIZES), CARD_SIZES.WIDE);
return (
<div style="{{">
</div>
.add('自定义', () => (
<div>
<input value="{text('value'," size="{select('size'," width="{number('width'," disabled="{boolean('disabled',"> null}
placeholder={text('placeholder', '待输入...')}
/>
</div>
))
color={text('CustomIconColor', '#ff5831')}
size={number('CustomIconSize', 32)}
component={}
/>
}
size={number('CustomIconSize', 32)}
shape={select('shape', shapes, 'circle')}
style={{
background: '#fcc600',
}}
/>
);
});
onSelect={option => {
alert(option)
}}
buttonStatus={
ComponentStatus[
select('buttonStatus', mapEnumKeys(ComponentStatus), 'Default')
]
}
buttonColor={
ComponentColor[
select('buttonColor', mapEnumKeys(ComponentColor), 'Primary')
]
}
buttonSize={
ComponentSize[
select('buttonSize', mapEnumKeys(ComponentSize), 'Small')
]
}
buttonIcon={
IconFont[
select(
'buttonIcon',
{None: 'none', ...mapEnumKeys(IconFont)},
'BarChart'
)
]
}
emptyText={text('emptyText', 'None selected')}
selectedOptions={array(
'selectedOptions',
defaultMultiSelectSelectedOptions
)}
withInfo('This is the ExpandCollapse component.')(() => (
<div style="{{">
<p>Well done! The component takes 100% width by default and aligns the link to the left or center.</p>
<p>And other text comes here.</p>
</div>
))
);