Getting started

🚀 起飞！

Code

简单的代码展示，使用 Github 风格

```tsx
<Button variant="contained" color="primary">
  Here is a Button from Material UI.
</Button>
```

<Button variant="contained" color="primary">
  Here is a Button from Material UI.
</Button>

Props

使用特殊的 <Props /> 标签，展示组件的接口定义

<Props of="CharacterCounter" />

Props	Type	Default	Description
maxLength*	number		最大长度
value?	string \| number	''	字符串或字符串的长度

Live Code

在线编辑代码，并实时预览效果

```tsx live [hideCode] [disabled]
<Button variant="contained" color="primary">
  Here is a Button from Material UI.
</Button>
```

<Button variant="contained" color="primary">
  Here is a Button from Material UI.
</Button>

<Button variant="contained" color="primary">
  Here is a Button from Material UI.
</Button>

隐藏代码

<Button variant="contained" color="primary">
  Here is a Button from Material UI.
</Button>
<Divider style={{marginTop: 10, marginBottom: 10}} />
<Button variant="contained" color="primary">
  Here is a Button from Material UI.
</Button>

<Button variant="contained" color="primary">
  Here is a Button from Material UI.
</Button>
<Divider style={{marginTop: 10, marginBottom: 10}} />
<Button variant="contained" color="primary">
  Here is a Button from Material UI.
</Button>

禁用编辑

const [value, setValue] = React.useState('Material');

return (
  <Button variant="contained" color="primary" onClick={() => {
    setValue(['Material', 'IoT', 'IDE', 'Studio'][-1-~(Math.random() * 4)]);
  }}>
    Here is a Demo from {value} UI.
  </Button>
);

const [value, setValue] = React.useState('Material');
return (
  <Button variant="contained" color="primary" onClick={() => {
    setValue(['Material', 'IoT', 'IDE', 'Studio'][-1-~(Math.random() * 4)]);
  }}>
    Here is a Demo from {value} UI.
  </Button>
);