002 nextuiアバター
2113 ワード
import { Grid, Avatar } from '@nextui-org/react';
export default function App() {
return (
<Grid.Container gap={2}>
<Grid>
<Avatar
squared
src="https://i.pravatar.cc/150?u=a042581f4e29026024d" />
</Grid>
<Grid>
<Avatar
squared
text="Junior" />
</Grid>
<Grid>
<Avatar
squared
src="https://i.pravatar.cc/150?u=a042581f4e29026704d" />
</Grid>
<Grid>
<Avatar
squared
text="Jane" />
</Grid>
<Grid>
<Avatar
squared
src="https://i.pravatar.cc/150?u=a04258114e29026702d" />
</Grid>
<Grid>
<Avatar
squared
text="Joe" />
</Grid>
<Grid>
<Avatar text="JR" size="xs" />
</Grid>
<Grid>
<Avatar
src="https://i.pravatar.cc/150?u=a042581f4e29026024d"
size="sm"
/>
</Grid>
<Grid>
<Avatar text="Joe" size="md" />
</Grid>
<Grid>
<Avatar
src="https://i.pravatar.cc/150?u=a042581f4e29026704d"
size="lg"
/>
</Grid>
<Grid>
<Avatar text="John" size="xl" />
</Grid>
<Grid>
<Avatar
src="https://i.pravatar.cc/150?u=a04258114e29026702d"
css={{ size: "$20" }}
/>
</Grid>
</Grid.Container>
);
}
Reference
この問題について(002 nextuiアバター), 我々は、より多くの情報をここで見つけました https://dev.to/liliang8858/001-nextui-avatar-515mテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol