from居中_reactsemanticui grid布局中card组件居中

前言

react这个东西我是业余看看, 想着弄点啥东西, 上班没啥事之后便会拿来自己单干点, 学习学习, 也当练练手. ui框架用的是semantic ui, 刚好也有react版本, 所以也主要是在这个框架上来讲

正文如下

这里讲的是Card在Grid布局中如何居中的问题, 先看代码

import React, { Component } from "react";
import {
    Grid,
} from "semantic-ui-react";
import ItemCardDefault from "../component/itemCard";


function PageIndex({ ...pageProps }) {
    console.log(JSON.stringify(pageProps));

return (
2}>
    );
}

export default PageIndex;

ItemCardDefault只是官网上的的Card模板. 正常像这样写的话, 他的界面如图

显然不符合我需要居中效果, Card不能完全覆盖格子也未居中(换成Segment的那种效果)

翻了下官网, 暂时发现又两种方法

• grid.row中设置column数大于实际数量, 并依旧使用centered=true

• 使用Card.Group的功能, 一行只放置一个Group

下面实例操作, 先看第一种

将Grid代码块中更改如下

<Grid divided>
    <Grid.Row centered columns={3}>
        <Grid.Column>

Grid.Column>

        <Grid.Column>

Grid.Column>
Grid.Row>
Grid>

效果如图

发现不知特别好看, 变将其更改成columns={4}

效果如下

发现也就那样, 通过数值来调控, 感觉总是差那么一点感觉

因为此刻要是把Card换成Segment, 这种写法, 早居中了

如图

于是放弃了这种写法. 不过写法也不是是无效的, 只不过需要多调试一些, 感兴趣可以去看官网 点这里

下面讲第二种方法

开始我是看到官网上的这种写法, 起初是琢磨能不能在一行中写一个column, 慢慢演变成能不能把几个card打包在一起放到同一行, 然后通过自定义style来居中

后面看官网发现有Card.Group这个东西, 便拿过来了

代码如下

import React, { Component } from "react";
import {
    Segment,
    Grid,
} from "semantic-ui-react";
import ItemCardDefault from "../component/itemCard";
import CardItem from "../component/card/cardItem";


let cardInfos = [
    {
        key: 1,
        image: "https://react.semantic-ui.com/images/avatar/large/matthew.png",
        header: "你好歹g",
        meta: "Joined in 2015",
        description: "Matthew is a musician living in Nashville. 1",
    },
    {
        key: 2,
        image: "https://react.semantic-ui.com/images/avatar/large/matthew.png",
        header: "你好歹g",
        meta: "Joined in 2016",
        description: "Matthew is a musician living in Nashville. 2",
    },
    {
        key: 3,
        image: "https://react.semantic-ui.com/images/avatar/large/matthew.png",
        header: "你好歹gdd",
        meta: "Joined in 2015",
        description: "Matthew is a musician living in Nashville. 3",
    },
];

function PageIndex({ ...pageProps }) {
    console.log(JSON.stringify(pageProps));

    return (





4}>

1



2



    );
}

export default PageIndex;

效果如下

那个CardItem是自定义的一个Card.Group, 传入一个CardProps类型的集合数据就可以了

CardItem代码如下

import React from "react";
import { Card, Icon, Image } from "semantic-ui-react";

function CardItem({ cardInfos }) {
    console.log(cardInfos);

    return (

    );
}

export default CardItem;

需要注意的是, CardProps类型的元素中需要传入带key这个属性, 以此作为唯一标识, 不然会用description, 相同会报错

正文结束

以上是自己做的笔记, 欢迎指正与建议

---

author: cg

create time: 2020-11-25 14:59

---