import React, { Component } from 'react'
import { Space, Tag, Tooltip, Typography } from 'antd'

const { Text } = Typography

export default class style extends Component {
    render() {
        return (
            <Space direction="vertical" className="w-100-p">
                <Text>在标签中使用一些已经定义好的class可以快速调整你想要的样式。</Text>
                <ul>
                    <li className="mb-sm">
                        <Space direction="vertical">
                            <Text>
                                字体大小
                                <Tag color="orange" className="ml-xs">
                                    /lib/font-size.less
                                </Tag>
                            </Text>
                            <Text>
                                <Tooltip title="36像素">
                                    <Tag>.h1</Tag>
                                </Tooltip>
                                <Tooltip title="32像素">
                                    <Tag>.h2</Tag>
                                </Tooltip>
                                <Tooltip title="24像素">
                                    <Tag>.h3</Tag>
                                </Tooltip>
                                ...
                            </Text>
                            <Text>
                                <Tooltip title="12像素(懒得实现)">
                                    <Tag>.f-12</Tag>
                                </Tooltip>
                                <Tooltip title="13像素(懒得实现)">
                                    <Tag>.f-13</Tag>
                                </Tooltip>
                                <Tooltip title="14像素(懒得实现)">
                                    <Tag>.f-14</Tag>
                                </Tooltip>
                                ...
                            </Text>
                        </Space>
                    </li>
                    <li className="mb-sm">
                        <Space direction="vertical">
                            <Text>
                                文字颜色
                                <Tag color="orange" className="ml-xs">
                                    /lib/text-color.less
                                </Tag>
                            </Text>
                            <Text>
                                <Tooltip title="主题色">
                                    <Tag>.text-primary</Tag>
                                </Tooltip>
                                <Tooltip title="蓝色">
                                    <Tag>.text-info</Tag>
                                </Tooltip>
                                <Tooltip title="绿色">
                                    <Tag>.text-success</Tag>
                                </Tooltip>
                                <Tooltip title="红色">
                                    <Tag>.text-error.text-danger</Tag>
                                </Tooltip>
                                <Tooltip title="橙色">
                                    <Tag>.text-warning</Tag>
                                </Tooltip>
                                <Tooltip title="白色">
                                    <Tag>.text-white</Tag>
                                </Tooltip>
                                <Tooltip title="黑色">
                                    <Tag>.text-black</Tag>
                                </Tooltip>
                                <Tooltip title="灰色">
                                    <Tag>.text-gray</Tag>
                                </Tooltip>
                                <Tooltip title="浅灰色">
                                    <Tag>.text-normal</Tag>
                                </Tooltip>
                                ...
                            </Text>
                        </Space>
                    </li>
                    <li className="mb-sm">
                        <Space direction="vertical">
                            <Text>
                                显示
                                <Tag color="orange" className="ml-xs">
                                    /lib/visibility.less
                                </Tag>
                            </Text>
                            <Text>
                                <Tooltip title="占位隐藏">
                                    <Tag>.hide</Tag>
                                </Tooltip>
                                <Tooltip title="不占位隐藏">
                                    <Tag>.hidden</Tag>
                                </Tooltip>
                                <Tooltip title="区块显示">
                                    <Tag>.block</Tag>
                                </Tooltip>
                                <Tooltip title="行块显示">
                                    <Tag>.inline-block</Tag>
                                </Tooltip>
                                <Tooltip title="行内显示">
                                    <Tag>.inline</Tag>
                                </Tooltip>
                                <Tooltip title="flex显示">
                                    <Tag>.flex</Tag>
                                </Tooltip>
                                <Tooltip title="行内flex显示">
                                    <Tag>.inline-flex</Tag>
                                </Tooltip>
                                <Tooltip title="单行内容截取">
                                    <Tag>.ellipsis</Tag>
                                </Tooltip>
                                <Tooltip title="内容截取- 2行">
                                    <Tag>.ellipsis-2</Tag>
                                </Tooltip>
                                <Tooltip title="内容截取- 3行">
                                    <Tag>.ellipsis-3</Tag>
                                </Tooltip>
                                ...
                            </Text>
                        </Space>
                    </li>
                    <li>
                        <Space direction="vertical">
                            <Text>
                                内外边距
                                <Tag color="orange" className="ml-xs">
                                    /lib/margin.less
                                </Tag>
                            </Text>
                            <Text>
                                <Tooltip title="全无外边距">
                                    <Tag>.m-none</Tag>
                                </Tooltip>
                                <Tooltip title="全外边距4像素">
                                    <Tag>.m-xxs</Tag>
                                </Tooltip>
                                <Tooltip title="全外边距8像素">
                                    <Tag>.m-xs</Tag>
                                </Tooltip>
                                <Tooltip title="全外边距12像素">
                                    <Tag>.m-sm</Tag>
                                </Tooltip>
                                <Tooltip title="全外边距16像素">
                                    <Tag>.m-md</Tag>
                                </Tooltip>
                                <Tooltip title="全外边距24像素">
                                    <Tag>.m-lg</Tag>
                                </Tooltip>
                                <Tooltip title="全外边距32像素">
                                    <Tag>.m-xl</Tag>
                                </Tooltip>
                                ...
                            </Text>
                            <Text className="m-xl">
                                <Tooltip title="上外边距16像素">
                                    <Tag>.mt-md</Tag>
                                </Tooltip>
                                ...
                            </Text>
                            <Text>
                                <Tooltip title="右外边距16像素">
                                    <Tag>.mr-md</Tag>
                                </Tooltip>
                                ...
                            </Text>
                            <Text>
                                <Tooltip title="下外边距16像素">
                                    <Tag>.mb-md</Tag>
                                </Tooltip>
                                ...
                            </Text>
                            <Text>
                                <Tooltip title="左外边距16像素">
                                    <Tag>.ml-md</Tag>
                                </Tooltip>
                                ...
                            </Text>
                            <Text>
                                <Tooltip title="全内边距16像素">
                                    <Tag>.p-md</Tag>
                                </Tooltip>
                                ...
                            </Text>
                        </Space>
                    </li>
                </ul>
            </Space>
        )
    }
}
