in packages-rc/console-base-rc-button/stories/demo-default/index.tsx [52:130]
export default function DemoDefault(): JSX.Element {
const [stateDom, setStateDom] = useState<HTMLElement | null>(null);
const [stateDisabled, setStateDisabled] = useState(false);
return <>
<ThemeSwitcher />
<PkgInfo />
<Button theme={ButtonTheme.BRAND_PRIMARY}>FUCK</Button>
<ComponentTesting<ButtonProps> {...{
componentName: 'Button',
componentPackageName: '@alicloud/console-base-rc-button',
defaultProps: DEFAULT_PROPS,
renderer
}} />
<H2>Ref Works Right</H2>
<Button {...{
ref: setStateDom,
label: 'ref shall work right',
theme: ButtonTheme.PRIMARY,
onClick() {
// eslint-disable-next-line no-console
console.info(stateDom);
}
}} />
<H2>All Themes</H2>
<div>
<InputSwitch {...{
label: 'props.disabled',
value: stateDisabled,
onChange: setStateDisabled
}} />
</div>
{Object.entries(ButtonTheme).map(([k, v]) => <ScButtonThemes {...{
key: k,
theme: v,
label: v,
disabled: stateDisabled
}} />)}
<H2>垂直对齐 IconLeft</H2>
<Button {...{
iconLeft: ' ',
textAlign: 'left',
label: 'icon left NONE'
}} />
<br />
<Button {...{
iconLeft: 'x',
textAlign: 'left',
label: 'icon left x'
}} />
<br />
<Button {...{
iconLeft: 'check',
textAlign: 'left',
label: 'icon left check'
}} />
<br />
<Button {...{
iconLeft: 'config',
textAlign: 'left',
label: 'icon left config'
}} />
<H2>垂直对齐 IconRight</H2>
<Button {...{
iconRight: 'x',
label: 'icon left x'
}} />
<br />
<Button {...{
iconRight: 'check',
label: 'icon left check'
}} />
<br />
<Button {...{
iconRight: 'config',
label: 'icon left config'
}} />
</>;
}