@storybook/react/types-6-0#Meta TypeScript Examples

The following examples show how to use @storybook/react/types-6-0#Meta. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: Card.stories.tsx    From gio-design with Apache License 2.0 6 votes vote down vote up 
BoxShadow = () => (
  <Card boxShadow style={{ width: '320px' }}>
    <Card.Meta
      title="卡片标题"
      description="卡片副标题卡片副标题卡片副标题卡片副标题卡片副标题卡片副标题卡片副标题卡片副标题卡片副标题卡片副标题卡片副标题卡片副标题卡片副标题"
      action={
        <Button.IconButton size="small" type="text">
          <MoreVerticalOutlined />
        </Button.IconButton>
      }
    />
    <div style={{ marginTop: '16px' }}>
      这里是卡片的描述，可以有很多很多字。这里是卡片的描述，可以有很多很多字。这里是卡片的描述，可以有很多很多字。
    </div>
    <SkeletonImage
      style={{
        width: '100%',
        height: '200px',
        marginTop: '16px',
      }}
    />
  </Card>
)
Example #2
Source File: Card.stories.tsx    From gio-design with Apache License 2.0 6 votes vote down vote up 
WithoutContent = () => (
  <Card style={{ width: '320px' }}>
    <Card.Meta
      image={
        <Avatar src="https://joeschmoe.io/api/v1/random" size="large" mode="square">
          L
        </Avatar>
      }
      title="卡片标题"
      description="卡片副标题"
      action={
        <Button.IconButton size="small" type="text">
          <MoreVerticalOutlined />
        </Button.IconButton>
      }
    />
  </Card>
)
Example #3
Source File: Card.stories.tsx    From gio-design with Apache License 2.0 6 votes vote down vote up 
Disabled = () => (
  <Card disabled style={{ width: '320px' }}>
    <Card.Meta
      image={
        <Avatar src="https://joeschmoe.io/api/v1/random" size="large" mode="square">
          L
        </Avatar>
      }
      title="卡片标题"
      description="卡片副标题"
      action={
        <Button.IconButton size="small" type="text" onClick={() => alert('action click')}>
          <MoreVerticalOutlined />
        </Button.IconButton>
      }
    />
  </Card>
)
Example #4
Source File: Card.stories.tsx    From gio-design with Apache License 2.0 6 votes vote down vote up 
FullWidthContent = () => (
  <Card fullWidthContent style={{ width: '400px' }}>
    <Card.Meta
      image={
        <Avatar src="https://joeschmoe.io/api/v1/random" size="large" mode="square">
          L
        </Avatar>
      }
      title="卡片标题"
      description="卡片副标题"
      action={
        <Button.IconButton size="small" type="text">
          <MoreVerticalOutlined />
        </Button.IconButton>
      }
    />
    <SkeletonImage style={{ width: '100%', marginTop: '16px' }} />
  </Card>
)
Example #5
Source File: Card.stories.tsx    From gio-design with Apache License 2.0 6 votes vote down vote up 
Clickable = () => {
  const [clickable, setClickable] = useState(true);
  return (
    <div style={{ width: '400px' }}>
      <Toggle
        on={clickable}
        onChange={(e) => setClickable(e.target.checked)}
        checkedChildren={<span>可点击</span>}
        uncheckedChildren={<span>不可点击</span>}
      />
      <Divider />
      <Card style={{ width: '280px' }} boxShadow clickable={clickable}>
        <Card.Meta
          image={<Avatar src="https://joeschmoe.io/api/v1/random">z</Avatar>}
          title="卡片标题"
          description="卡片副标题"
          action={
            <Button.IconButton size="small" type="text">
              <MoreVerticalOutlined />
            </Button.IconButton>
          }
        />
        <Skeleton active={false} paragraph={{ row: 2 }} />
        <div
          style={{
            marginTop: 'auto',
            paddingTop: '16px',
            color: '#313e75',
            lineHeight: '20px',
            borderTop: '1px solid #ebedf5',
            width: '100%',
          }}
        >
          <UserOutlined /> 张三
        </div>
      </Card>
    </div>
  );
}
Example #6
Source File: Card.stories.tsx    From gio-design with Apache License 2.0 6 votes vote down vote up 
Default.args = {
  style: { width: 320 },
  children: (
    <>
      <Card.Meta
        image={<Avatar>L</Avatar>}
        title="卡片标题"
        description="卡片副标题卡片副标题卡片副标题卡片副标题卡片副标题卡片副标题卡片副标题卡片副标题卡片副标题卡片副标题卡片副标题卡片副标题卡片副标题"
        action={
          <Button.IconButton size="small" type="text">
            <MoreVerticalOutlined />
          </Button.IconButton>
        }
      />
      <div style={{ marginTop: '16px' }}>
        这里是卡片的描述，可以有很多很多字。这里是卡片的描述，可以有很多很多字。这里是卡片的描述，可以有很多很多字。
      </div>
      <SkeletonImage
        style={{
          width: '100%',
          height: '200px',
          marginTop: '16px',
        }}
      />
    </>
  ),
};
Example #7
Source File: List-picker.stories.tsx    From gio-design with Apache License 2.0 6 votes vote down vote up 
renderWrapper = (o: Tmesurements) => (element: React.ReactElement) =>
(
  <Popover
    allowArrow
    placement="right"
    strategy="fixed"
    triggerStyle={{ display: 'block' }}
    content={
      <Card style={{ width: '320px' }}>
        <Card.Meta title={o.name} description={o.id} />
        <p>{`${o.id}${o.name}${o.type}`}</p>
        <Skeleton.Image style={{ width: '100%' }} />
        <Table
          title="事件属性"
          pagination={false}
          columns={[
            {
              dataIndex: 'id',
              title: 'Id',
            },
            {
              dataIndex: 'name',
              title: 'Name',
            },
          ]}
          dataSource={Array(2)
            .fill('')
            .map((_, index) => ({
              id: `${index + 1 * 1000}`,
              name: `Name ${index + 1}`,
            }))}
        />
      </Card>
    }
  >
    {element}
  </Popover>
)
Example #8
Source File: List-picker.stories.tsx    From gio-design with Apache License 2.0 6 votes vote down vote up 
renderWrapper2 = (o: Tmesurements) => (element: React.ReactElement) =>
(
  <Popover
    allowArrow
    strategy="fixed"
    placement="right"
    content={
      <Card style={{ width: 320 }}>
        <Card.Meta
          title={
            <div>
              {o.name}
              <Tag status="draft" style={{ marginLeft: 8 }}>
                {o.type}
              </Tag>
            </div>
          }
          description={o.id}
        />
        <Divider style={{ width: '100%' }} />
        <div>{o.type}</div>
      </Card>
    }
    triggerStyle={{ display: 'block' }}
  >
    {element}
  </Popover>
)
Example #9
Source File: Card.stories.tsx    From gio-design with Apache License 2.0 5 votes vote down vote up 
GridCard = () => (
  <div style={{ minWidth: '800px', maxWidth: '1200px' }}>
    <Row alignContent="stretch" alignItems="stretch" direction="row" gutter={[8, 8]}>
      <Col span={4}>
        <Card style={{ height: '280px' }} boxShadow>
          <Card.Meta
            image={<Avatar src="https://joeschmoe.io/api/v1/random">z</Avatar>}
            title="卡片标题"
            description="卡片副标题"
            action={
              <Button.IconButton size="small" type="text">
                <MoreVerticalOutlined />
              </Button.IconButton>
            }
          />
          <Skeleton active={false} paragraph={{ row: 2 }} />
          <div
            style={{
              marginTop: 'auto',
              paddingTop: '16px',
              color: '#313e75',
              lineHeight: '20px',
              borderTop: '1px solid #ebedf5',
              width: '100%',
            }}
          >
            <UserOutlined /> 张三
          </div>
        </Card>
      </Col>
      <Col span={4}>
        <Card style={{ height: '280px' }} boxShadow clickable={false}>
          <Card.Meta
            title="卡片标题"
            description="卡片副标题"
            action={
              <Button.IconButton size="small" type="text">
                <MoreVerticalOutlined />
              </Button.IconButton>
            }
          />
          <Table
            style={{ marginTop: '16px' }}
            pagination={false}
            dataSource={[
              { a: 1, b: 1 },
              { a: 2, b: 2 },
            ]}
            rowKey="a"
            columns={[
              { dataIndex: 'a', title: 'A' },
              { dataIndex: 'b', title: 'B' },
            ]}
          />
        </Card>
      </Col>
      <Col span={4}>
        <Card style={{ height: '280px' }} boxShadow>
          <Card.Meta
            image={<Avatar src="https://joeschmoe.io/api/v1/random">z</Avatar>}
            title="卡片标题"
            description="卡片副标题"
            action={
              <Button.IconButton size="small" type="text">
                <MoreVerticalOutlined />
              </Button.IconButton>
            }
          />
          <SkeletonImage style={{ width: '100%', marginTop: '16px' }} />
        </Card>
      </Col>
    </Row>
  </div>
)
Example #10
Source File: Card.stories.tsx    From gio-design with Apache License 2.0 5 votes vote down vote up 
T = () => <Card.Meta title="title" description="description" />
Example #11
Source File: Card.stories.tsx    From gio-design with Apache License 2.0 4 votes vote down vote up 
ComplexCard = () => {
  const memberTotal = 44;
  const dataSource = useMemo(
    () =>
      Array.from({ length: memberTotal }).map((_, index) => ({
        id: `${index + 1 * 1000}`,
        age: index + 1,
        name: `Name ${index + 1}`,
        address: `北京市朝阳公园`,
      })),
    []
  );
  const members = () => (
    <Table
      columns={[
        {
          dataIndex: 'id',
          title: 'Id',
          info: 'description',
        },
        {
          dataIndex: 'name',
          title: '姓名',
        },
        {
          dataIndex: 'age',
          title: '年龄',
        },
        {
          dataIndex: 'address',
          title: '住址',
        },
      ]}
      dataSource={dataSource}
      rowKey="id"
    />
  );
  return (
    <Card fullWidthContent clickable={false} boxShadow>
      <Card.Meta
        image={
          <Avatar src="https://joeschmoe.io/api/v1/random" size="large" mode="square">
            L
          </Avatar>
        }
        title={
          <span
            style={{
              fontSize: '18px',
              lineHeight: '28px',
            }}
          >
            企业成员({memberTotal})
          </span>
        }
        description="可查看企业管理相关权限，无法访问客户数据平台，推荐给各业务人员，或无需做数据管理的同事设置此角色。"
        action={
          <>
            <Button size="small" prefix={<PlusCircleFilled />} style={{ marginRight: '8px' }}>
              主要按钮
            </Button>
            <Button size="small" type="secondary" style={{ marginRight: '8px' }}>
              次要按钮
            </Button>
            <Dropdown
              placement="bottomRight"
              content={
                <List>
                  <Item value="edit">编辑</Item>
                  <Item value="delete">删除</Item>
                </List>
              }
            >
              <Button.IconButton size="small" type="secondary">
                <MoreVerticalOutlined />
              </Button.IconButton>
            </Dropdown>
          </>
        }
      />
      <Tabs
        tabListStyle={{
          borderBottom: '1px solid #dfe4ee',
          borderRadius: '0px',
          padding: '0 20px',
        }}
        defaultValue="1"
      >
        <Tab label="成员" value="1">
          {members()}
        </Tab>
        <Tab label="权限" value="2">
          <Table
            columns={[
              { dataIndex: 'moduleKey', key: 'moduleKey', title: '功能' },
              { dataIndex: 'permission', key: 'permission', title: '权限' },
            ]}
          />
        </Tab>
      </Tabs>
    </Card>
  );
}
Example #12
Source File: Card.stories.tsx    From gio-design with Apache License 2.0 4 votes vote down vote up 
ComplexCardPanel = () => {
  const memberTotal = 44;
  const dataSource = useMemo(
    () =>
      Array.from({ length: memberTotal }).map((_, index) => ({
        id: `${index + 1 * 1000}`,
        age: 21 + index,
        name: `Name ${index + 1}`,
        address: `北京市朝阳公园`,
      })),
    []
  );
  const [selectedRowKeys, setSelectedRowKeys] = useState<string[]>([]);
  const renderToolbar = () => (
    <div style={{ padding: '20px 14px', display: 'flex', justifyContent: 'space-between' }}>
      <div>
        <SearchBar style={{ width: '320px' }} placeholder="按姓名搜索" />
      </div>
      <div>
        {selectedRowKeys?.length > 0 && (
          <div style={{ display: 'inline-block' }}>
            已选择 {selectedRowKeys?.length} 项
            <Button.IconButton type="text" size="small" onClick={() => setSelectedRowKeys([])}>
              <CloseOutlined />
            </Button.IconButton>
            <Divider orientation="vertical" />
            <Button>全部删除</Button>
          </div>
        )}
        {selectedRowKeys?.length === 0 && (
          <>
            <Button style={{ marginRight: '8px' }} prefix={<PlusCircleFilled />}>
              主要操作
            </Button>
            <Button type="secondary">次要操作</Button>
          </>
        )}
      </div>
    </div>
  );
  return (
    <Card boxShadow fullWidthContent clickable={false} style={{ display: 'block' }}>
      <Card.Meta
        style={{ borderBottom: '1px solid #dfe4ee', padding: '20px' }}
        title={
          <span
            style={{
              fontSize: '18px',
              lineHeight: '28px',
            }}
          >
            全部成员 (233)
          </span>
        }
      />
      {renderToolbar()}
      <div>
        <Table
          columns={[
            {
              dataIndex: 'id',
              title: 'Id',
              info: 'description',
            },
            {
              dataIndex: 'name',
              title: '姓名',
            },
            {
              dataIndex: 'age',
              title: '年龄',
            },
            {
              dataIndex: 'address',
              title: '住址',
            },
          ]}
          scroll={{ y: 600 }}
          rowSelection={{
            selectedRowKeys,
            onChange: (selectedKeys) => {
              setSelectedRowKeys(selectedKeys as string[]);
            },
            columnWidth: 60,
          }}
          dataSource={dataSource}
          rowKey="id"
        />
      </div>
    </Card>
  );
}