ant-design/components/grid/demo/useBreakpoint.md

39 lines
620 B
Markdown
Raw Normal View History

---
order: 10
title: useBreakpoint Hook
---
## zh-CN
使用 `useBreakpoint` Hook 个性化布局。
## en-US
2020-05-07 23:22:31 +08:00
Use `useBreakpoint` Hook provide personalized layout.
```tsx
import React from 'react';
import { Grid, Tag } from 'antd';
const { useBreakpoint } = Grid;
const App: React.FC = () => {
const screens = useBreakpoint();
return (
<>
Current break point:{' '}
{Object.entries(screens)
.filter(screen => !!screen[1])
.map(screen => (
<Tag color="blue" key={screen[0]}>
{screen[0]}
</Tag>
))}
</>
);
};
export default App;
```