feat: update icon
tangjinzhou
parent
2ff52a4e11
commit
8c91e3696e
|
|
@ -4,8 +4,8 @@
|
|||
</cn>
|
||||
|
||||
<us>
|
||||
#### Basic
|
||||
Create a reusable Vue component by using `<Icon component={...} />`. The property `component` takes a Vue component that renders to `svg` element.
|
||||
#### Custom Icon
|
||||
Create a reusable Vue component by using `<a-icon :component="{...}" />`. The property `component` takes a Vue component that renders to `svg` element.
|
||||
</us>
|
||||
|
||||
```html
|
||||
|
|
|
|||
|
|
@ -11,9 +11,9 @@ If you are using [iconfont.cn](http://iconfont.cn/), you can use the icons in yo
|
|||
```html
|
||||
<template>
|
||||
<div class="icons-list">
|
||||
<IconFont type="icon-tuichu" />
|
||||
<IconFont type="icon-facebook" />
|
||||
<IconFont type="icon-twitter" />
|
||||
<icon-font type="icon-tuichu" />
|
||||
<icon-font type="icon-facebook" />
|
||||
<icon-font type="icon-twitter" />
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -1,42 +1,26 @@
|
|||
<script>
|
||||
import IconSet from '@/site/components/IconSet/index'
|
||||
import IconDisplay from '@/site/theme/template/IconDisplay'
|
||||
import Basic from './basic.md'
|
||||
import Custom from './custom.md'
|
||||
import Iconfont from './iconfont.md'
|
||||
import Twotone from './two-tone.md'
|
||||
|
||||
import CN from '../index.zh-CN.md'
|
||||
import US from '../index.en-US.md'
|
||||
const md = {
|
||||
cn: `# 图标 Icon
|
||||
语义化的矢量图形。
|
||||
## 图标的命名规范
|
||||
我们为每个图标赋予了语义化的命名，命名规则如下:
|
||||
- 实心和描线图标保持同名，用 \` - o\` 来区分，比如 \`question-circle\`（实心） 和 \`question-circle-o\`（描线）；
|
||||
- 命名顺序：\`[图标名]-[形状?]-[描线?]-[方向?]\`。
|
||||
> \`?\` 为可选。
|
||||
|
||||
完整的图标设计规范请访问 [图标规范](/docs/spec/icon)。
|
||||
## 如何使用
|
||||
使用 \`<a-icon />\` 标签声明组件，指定图标对应的 type 属性，示例代码如下:
|
||||
\`\`\`html
|
||||
<a-icon type="link" />
|
||||
\`\`\`
|
||||
## 本地部署
|
||||
图标默认托管在 [iconfont.cn](http://iconfont.cn)，默认公网可访问。如需本地部署，可参考 [示例](https://github.com/ant-design/antd-init/tree/master/examples/local-iconfont)。
|
||||
## 图标列表
|
||||
> 点击图标复制代码。
|
||||
## 设计师专属
|
||||
安装 [Kitchen Sketch 插件 <EFBFBD>](https://kitchen.alipay.com)，就可以一键拖拽使用 Ant Design 和 Iconfont 的海量图标，还可以关联自有项目。
|
||||
## 图标列表
|
||||
> 点击图标即可复制代码。
|
||||
新版图标可能略有缺失，我们还在持续补充中。
|
||||
`,
|
||||
us: `# Icon
|
||||
Semantic vector graphics.
|
||||
## Icons naming convention
|
||||
We provide semantic name for every icon, and naming rules are as follows:
|
||||
- Scanning line icon has the similar name with its solid one，but it's distinguished by \`-o\`, for example, \`question-circle\` (a full circle) and \`question-circle-o\` (an empty circle);
|
||||
- Naming sequence：\`[name]-[shape?]-[outline?]-[direction?]\`.
|
||||
> \`?\` means is optional.
|
||||
See more design detail at [here](/docs/spec/icon).
|
||||
## How To Use
|
||||
Use tag <a-icon /> to create an icon and set its type in the type prop, for example:
|
||||
\`\`\`html
|
||||
<a-icon type="link" />
|
||||
\`\`\`
|
||||
## Local deployment
|
||||
By default, icons are deployed at [iconfont.cn](http://iconfont.cn), publicly available repository of a huge set of icons. In case you need to use a locally deployed version of the icon font, you can refer to [this example](https://github.com/ant-design/antd-init/tree/master/examples/local-iconfont)。
|
||||
## List of icons
|
||||
> Click the icon and copy the code。
|
||||
## List of icons
|
||||
> Click the icon and copy the code.
|
||||
We are still adding two-tone icons right now.
|
||||
`,
|
||||
}
|
||||
export default {
|
||||
|
|
@ -49,15 +33,15 @@ export default {
|
|||
return (
|
||||
<div>
|
||||
<md class='api-container' cn={md.cn} us={md.us}/>
|
||||
<md cn='### 方向性图标' us='### Directional Icons'/>
|
||||
<IconSet class='icons' catigory='direction' />
|
||||
<md cn='### 提示建议性图标' us='### Suggested Icons'/>
|
||||
<IconSet class='icons' catigory='suggestion' />
|
||||
<md cn='### 网站通用图标' us='### Application Icons'/>
|
||||
<IconSet class='icons' catigory='other' />
|
||||
<md cn='### 品牌和标识' us='### Brand and Logos'/>
|
||||
<IconSet class='icons' catigory='logo' />
|
||||
|
||||
<IconDisplay />
|
||||
<Basic />
|
||||
<Custom />
|
||||
<Iconfont />
|
||||
<Twotone />
|
||||
<api>
|
||||
<CN slot='cn' />
|
||||
<US/>
|
||||
</api>
|
||||
</div>
|
||||
)
|
||||
},
|
||||
|
|
|
|||
|
|
@ -1,13 +1,125 @@
|
|||
## API
|
||||
|
||||
You can set `style` and `className` for size and color of icons because they are still fonts in essence.
|
||||
| Property | Description | Type | Default |
|
||||
| --- | --- | --- | --- |
|
||||
| type | Type of the ant design icon | string | - |
|
||||
| style | Style properties of icon, like `fontSize` and `color` | CSSProperties | - |
|
||||
| theme | Theme of the ant design icon | 'filled' \| 'outlined' \| 'twoTone' | 'outlined' |
|
||||
| spin | Rotate icon with animation | boolean | false |
|
||||
| component | The component used for the root node. This will override the **`type`** property. | ComponentType<CustomIconComponentProps\> | - |
|
||||
| twoToneColor | Only support the two-tone icon. Specific the primary color. | string (hex color) | - |
|
||||
|
||||
```jsx
|
||||
<a-icon type="question" style="font-size: 16px, color: #08c" />
|
||||
### SVG icons
|
||||
|
||||
We introduced SVG icons in `1.2.0` version replacing font icons which brings benefits below:
|
||||
|
||||
- Complete offline usage of icon, no dependency of CDN font icon file and no more empty square during downloading than no need to deploy icon font files locally either.
|
||||
- Much more display accuracy in lower-level screens.
|
||||
- Support multiple colors for icon.
|
||||
- No need to change built-in icons with overriding styles by providing more props in component.
|
||||
|
||||
More discussion of SVG icon reference to [#10353](https://github.com/ant-design/ant-design/issues/10353).
|
||||
|
||||
> ⚠️ About the extra bundle size brought by all SVG icons we imported in 1.2.0, we will provide new API to allow developers importing icons as your need, you can trace [#12011](https://github.com/ant-design/ant-design/issues/12011) for further progress.
|
||||
|
||||
The properties `theme`, `component` and `twoToneColor` are added in `1.2.0`. The best practice is to pass the property `theme` to every `<Icon />` components.
|
||||
|
||||
```html
|
||||
<a-icon type="star" theme="filled" />
|
||||
```
|
||||
|
||||
All the icons will render to `<svg>`. You can still set `style` and `class` for size and color of icons.
|
||||
|
||||
```html
|
||||
<a-icon type="message" :style="{ fontSize: '16px', color: '#08c' }" />
|
||||
```
|
||||
|
||||
### Set TwoTone Color
|
||||
|
||||
When using the two-tone icons, you can use the static methods `Icon.getTwoToneColor()` and `Icon.setTwoToneColor(colorString)` to spicify the primary color.
|
||||
|
||||
```jsx
|
||||
import { Icon } from 'ant-design-vue'
|
||||
|
||||
Icon.setTwoToneColor('#eb2f96');
|
||||
Icon.getTwoToneColor(); // #eb2f96
|
||||
```
|
||||
|
||||
### Custom Font Icon
|
||||
|
||||
We added a `createFromIconfontCN` function to help developer using their own icons deployed at [iconfont.cn](http://iconfont.cn/) in a convenient way.
|
||||
|
||||
> This method is specified for [iconfont.cn](http://iconfont.cn/).
|
||||
|
||||
```js
|
||||
const MyIcon = Icon.createFromIconfontCN({
|
||||
scriptUrl: '//at.alicdn.com/t/font_8d5l8fzk5b87iudi.js', // generated by iconfont.cn
|
||||
});
|
||||
|
||||
new Vue({
|
||||
el: '#app',
|
||||
template: '<my-icon type="icon-example" />',
|
||||
components: {
|
||||
'my-icon': MyIcon,
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
It create a component that uses SVG sprites in essence.
|
||||
|
||||
The following options are available:
|
||||
|
||||
| Property | Description | Type | Default |
|
||||
| -------- | ----------- | ---- | ------- |
|
||||
| spin | Rotate icon with animation | boolean | false |
|
||||
| style | style properties of icon, like fontSize and color | object | - |
|
||||
| type | Type of ant design icon | string | - |
|
||||
| --- | --- | --- | --- |
|
||||
| scriptUrl | The URL generated by [iconfont.cn](http://iconfont.cn/) project. | string | - |
|
||||
| extraCommonProps | Define extra properties to the component | `{ [key: string]: any }` | {} |
|
||||
|
||||
The property `scriptUrl` should be set to import the SVG sprite symbols.
|
||||
|
||||
See [iconfont.cn documents](http://iconfont.cn/help/detail?spm=a313x.7781069.1998910419.15&helptype=code) to learn about how to generate `scriptUrl`.
|
||||
|
||||
### Custom SVG Icon
|
||||
|
||||
You can import SVG icon as an react component by using `webpack` and [`@svgr/webpack`](https://www.npmjs.com/package/@svgr/webpack). `@svgr/webpack`'s `options` [reference](https://github.com/smooth-code/svgr#options).
|
||||
|
||||
```js
|
||||
// webpack.config.js
|
||||
{
|
||||
test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
|
||||
use: [
|
||||
{
|
||||
loader: 'babel-loader',
|
||||
},
|
||||
{
|
||||
loader: '@svgr/webpack',
|
||||
options: {
|
||||
babel: false,
|
||||
icon: true,
|
||||
},
|
||||
},
|
||||
],
|
||||
}
|
||||
```
|
||||
|
||||
```jsx
|
||||
import { Icon } from 'antd';
|
||||
import MessageSvg from 'path/to/message.svg'; // path to your '*.svg' file.
|
||||
|
||||
new Vue({
|
||||
el: '#app',
|
||||
template: '<a-icon :component="MessageSvg" />',
|
||||
components: {
|
||||
'my-icon': MyIcon,
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
The following properties are available for the component:
|
||||
|
||||
| Property | Description | Type | Default |
|
||||
| --- | --- | --- | --- |
|
||||
| width | The width of the `svg` element | string \| number | '1em' |
|
||||
| height | The height of the `svg` element | string \| number | '1em' |
|
||||
| fill | Define the color used to paint the `svg` element | string | 'currentColor' |
|
||||
| class | The computed class name of the `svg` element | string | - |
|
||||
| style | The computed style of the `svg` element | CSSProperties | - |
|
||||
|
|
|
|||
|
|
@ -1,7 +1,8 @@
|
|||
|
||||
import classNames from 'classnames'
|
||||
import * as allIcons from '@ant-design/icons/lib/dist'
|
||||
import * as allIcons from '@ant-design/icons/lib/dist.js'
|
||||
import VueIcon from '@ant-design/icons-vue'
|
||||
import PropTypes from '../_util/vue-types'
|
||||
import createFromIconfontCN from './IconFont'
|
||||
import {
|
||||
svgBaseProps, withThemeSuffix,
|
||||
|
|
@ -18,43 +19,17 @@ setTwoToneColor('#1890ff')
|
|||
const defaultTheme = 'outlined'
|
||||
let dangerousTheme
|
||||
|
||||
// export interface CustomIconComponentProps {
|
||||
// width: string | number;
|
||||
// height: string | number;
|
||||
// fill: string;
|
||||
// viewBox?: string;
|
||||
// className?: string;
|
||||
// style?: React.CSSProperties;
|
||||
// ['aria-hidden']?: string;
|
||||
// }
|
||||
|
||||
// export type ThemeType = 'filled' | 'outlined' | 'twoTone';
|
||||
|
||||
// export interface IconProps {
|
||||
// type?: string;
|
||||
// className?: string;
|
||||
// theme?: ThemeType;
|
||||
// title?: string;
|
||||
// onClick?: React.MouseEventHandler<HTMLElement>;
|
||||
// component?: React.ComponentType<CustomIconComponentProps>;
|
||||
// twoToneColor?: string;
|
||||
// viewBox?: string;
|
||||
// spin?: boolean;
|
||||
// style?: React.CSSProperties;
|
||||
// prefixCls?: string;
|
||||
// }
|
||||
|
||||
// export interface IconComponent<P> extends React.SFC<P> {
|
||||
// createFromIconfontCN: typeof createFromIconfontCN;
|
||||
// getTwoToneColor: typeof getTwoToneColor;
|
||||
// setTwoToneColor: typeof setTwoToneColor;
|
||||
// unstable_ChangeThemeOfIconsDangerously?: typeof unstable_ChangeThemeOfIconsDangerously;
|
||||
// unstable_ChangeDefaultThemeOfIcons?: typeof unstable_ChangeDefaultThemeOfIcons;
|
||||
// }
|
||||
|
||||
const Icon = {
|
||||
functional: true,
|
||||
name: 'AIcon',
|
||||
props: {
|
||||
type: PropTypes.string,
|
||||
component: PropTypes.any,
|
||||
viewBox: PropTypes.any,
|
||||
spin: PropTypes.bool.def(false),
|
||||
theme: PropTypes.oneOf(['filled', 'outlined', 'twoTone']),
|
||||
twoToneColor: PropTypes.string,
|
||||
},
|
||||
render (h, context) {
|
||||
const { props, slots, listeners } = context
|
||||
const {
|
||||
|
|
|
|||
|
|
@ -1,14 +1,122 @@
|
|||
|
||||
## API
|
||||
|
||||
由于图标字体本质上还是文字，可以使用 `style` 和 `class` 设置图标的大小和颜色。
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| --- | --- | --- | --- |
|
||||
| type | 图标类型。遵循图标的命名规范 | string | - |
|
||||
| style | 设置图标的样式，例如 `fontSize` 和 `color` | CSSProperties | - |
|
||||
| theme | 图标主题风格。可选实心、描线、双色等主题风格，适用于官方图标 | 'filled' \| 'outlined' \| 'twoTone' | 'outlined' |
|
||||
| spin | 是否有旋转动画 | boolean | false |
|
||||
| component | 控制如何渲染图标，通常是一个渲染根标签为 `<svg>` 的 `Vue` 组件，**会使 `type` 属性失效** | ComponentType<CustomIconComponentProps\> | - |
|
||||
| twoToneColor | 仅适用双色图标。设置双色图标的主要颜色 | string (十六进制颜色) | - |
|
||||
|
||||
````html
|
||||
<a-icon type="question" style="font-size: 16px, color: #08c" />
|
||||
````
|
||||
### SVG 图标
|
||||
|
||||
在 `1.2.0` 之后，我们使用了 SVG 图标替换了原先的 font 图标，从而带来了以下优势：
|
||||
|
||||
- 完全离线化使用，不需要从 CDN 下载字体文件，图标不会因为网络问题呈现方块，也无需字体文件本地部署。
|
||||
- 在低端设备上 SVG 有更好的清晰度。
|
||||
- 支持多色图标。
|
||||
- 对于内建图标的更换可以提供更多 API，而不需要进行样式覆盖。
|
||||
|
||||
更多讨论可参考：[#10353](https://github.com/ant-design/ant-design/issues/10353)。
|
||||
|
||||
> ⚠️ 1.2.0 之后我们全量引入了所有图标，导致 antd 默认的包体积有一定增加，我们会在不远的未来增加新的 API 来实现图标的按需使用，更多相关讨论可关注：[#12011](https://github.com/ant-design/ant-design/issues/12011)。
|
||||
|
||||
其中 `theme`, `component`, `twoToneColor` 是 `1.2.x` 版本新增加的属性。最佳实践是给使用的 `<Icon />` 组件传入属性 `theme` 以明确图标的主题风格。例如：
|
||||
|
||||
```html
|
||||
<a-icon type="star" theme="filled" />
|
||||
```
|
||||
|
||||
所有的图标都会以 `<svg>` 标签渲染，可以使用 `style` 和 `class` 设置图标的大小和单色图标的颜色。例如：
|
||||
|
||||
```html
|
||||
<a-icon type="message" :style="{ fontSize: '16px', color: '#08c' }" />
|
||||
```
|
||||
|
||||
### 双色图标主色
|
||||
|
||||
对于双色图标，可以通过使用 `Icon.getTwoToneColor()` 和 `Icon.setTwoToneColor(colorString)` 来全局设置图标主色。
|
||||
|
||||
```jsx
|
||||
import { Icon } from 'ant-design-vue'
|
||||
|
||||
Icon.setTwoToneColor('#eb2f96');
|
||||
Icon.getTwoToneColor(); // #eb2f96
|
||||
```
|
||||
|
||||
### 自定义 font 图标
|
||||
|
||||
在 `1.2.0` 之后，我们提供了一个 `createFromIconfontCN` 方法，方便开发者调用在 [iconfont.cn](http://iconfont.cn/) 上自行管理的图标。
|
||||
|
||||
```js
|
||||
const MyIcon = Icon.createFromIconfontCN({
|
||||
scriptUrl: '//at.alicdn.com/t/font_8d5l8fzk5b87iudi.js', // 在 iconfont.cn 上生成
|
||||
});
|
||||
new Vue({
|
||||
el: '#app',
|
||||
template: '<my-icon type="icon-example" />',
|
||||
components: {
|
||||
'my-icon': MyIcon,
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
其本质上是创建了一个使用 `<use>` 标签来渲染图标的组件。
|
||||
|
||||
`options` 的配置项如下：
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| --- | --- | --- | --- |
|
||||
| spin | 是否有旋转动画 | boolean | false |
|
||||
| style | 设置图标的样式，例如 fontSize 和 color | object | - |
|
||||
| type | 图标类型 | string | - |
|
||||
| scriptUrl | [iconfont.cn](http://iconfont.cn/) 项目在线生成的 `js` 地址 | string | - |
|
||||
| extraCommonProps | 给所有的 `svg` 图标 `<Icon />` 组件设置额外的属性 | `{ [key: string]: any }` | {} |
|
||||
|
||||
在 `scriptUrl` 都设置有效的情况下，组件在渲染前会自动引入 [iconfont.cn](http://iconfont.cn/) 项目中的图标符号集，无需手动引入。
|
||||
|
||||
见 [iconfont.cn 使用帮助](http://iconfont.cn/help/detail?spm=a313x.7781069.1998910419.15&helptype=code) 查看如何生成 `js` 地址。
|
||||
|
||||
### 自定义 SVG 图标
|
||||
|
||||
如果使用 `webpack`，可以通过配置 [@svgr/webpack](https://www.npmjs.com/package/@svgr/webpack) 来将 `svg` 图标作为 `React` 组件导入。`@svgr/webpack` 的 `options` 选项请参阅 [svgr文档](https://github.com/smooth-code/svgr#options)。
|
||||
|
||||
```js
|
||||
// webpack.config.js
|
||||
{
|
||||
test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
|
||||
use: [
|
||||
{
|
||||
loader: 'babel-loader',
|
||||
},
|
||||
{
|
||||
loader: '@svgr/webpack',
|
||||
options: {
|
||||
babel: false,
|
||||
icon: true,
|
||||
},
|
||||
},
|
||||
],
|
||||
}
|
||||
```
|
||||
|
||||
```jsx
|
||||
import MessageSvg from 'path/to/message.svg'; // path to your '*.svg' file.
|
||||
|
||||
new Vue({
|
||||
el: '#app',
|
||||
template: '<a-icon :component="MessageSvg" />',
|
||||
components: {
|
||||
'my-icon': MyIcon,
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
`Icon` 中的 `component` 组件的接受的属性如下：
|
||||
|
||||
| 字段 | 说明 | 类型 | 只读值 |
|
||||
| --- | --- | --- | --- |
|
||||
| width | `svg` 元素宽度 | string \| number | '1em' |
|
||||
| height | `svg` 元素高度 | string \| number | '1em' |
|
||||
| fill | `svg` 元素填充的颜色 | string | 'currentColor' |
|
||||
| class | 计算后的 `svg` 类名 | string | - |
|
||||
| style | 计算后的 `svg` 元素样式 | CSSProperties | - |
|
||||
|
|
|
|||
|
|
@ -143,6 +143,7 @@
|
|||
"vue": "^2.5.16",
|
||||
"vue-antd-md-loader": "^1.0.3",
|
||||
"vue-clipboard2": "0.0.8",
|
||||
"vue-i18n": "^8.3.2",
|
||||
"vue-infinite-scroll": "^2.0.2",
|
||||
"vue-jest": "^2.5.0",
|
||||
"vue-loader": "^13.0.5",
|
||||
|
|
|
|||
|
|
@ -21,6 +21,7 @@ export default {
|
|||
this.$router.push({
|
||||
path: path.replace(name, newName),
|
||||
})
|
||||
this.$i18n.locale = isZhCN(name) ? 'en-US' : 'zh-CN'
|
||||
},
|
||||
onSelect (val) {
|
||||
this.$router.push(val)
|
||||
|
|
|
|||
|
|
@ -239,7 +239,7 @@ export default {
|
|||
<a-icon type='bars'/>
|
||||
</div>
|
||||
<a-col class='main-container' xxl={20} xl={19} lg={19} md={18} sm={24} xs={24}>
|
||||
<div class='content'>
|
||||
<div class='content markdown'>
|
||||
<div class='toc-affix' style='width: 120px;'>
|
||||
{this.getSubMenu(isCN)}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@ import '../components/style.js'
|
|||
import './index.less'
|
||||
import 'highlight.js/styles/solarized-light.css'
|
||||
import Vue from 'vue'
|
||||
import VueI18n from 'vue-i18n'
|
||||
import VueRouter from 'vue-router'
|
||||
import VueClipboard from 'vue-clipboard2'
|
||||
import routes from './routes'
|
||||
|
|
@ -11,6 +12,9 @@ import Api from './components/api'
|
|||
import './components'
|
||||
import demoBox from './components/demoBox'
|
||||
import demoContainer from './components/demoContainer'
|
||||
import zhCN from './theme/zh-CN'
|
||||
import enUS from './theme/en-US'
|
||||
import { isZhCN } from './util'
|
||||
|
||||
const mountedCallback = {
|
||||
install: (Vue, options) => {
|
||||
|
|
@ -25,11 +29,20 @@ const mountedCallback = {
|
|||
Vue.use(mountedCallback)
|
||||
Vue.use(VueClipboard)
|
||||
Vue.use(VueRouter)
|
||||
Vue.use(VueI18n)
|
||||
Vue.component(Md.name, Md)
|
||||
Vue.component(Api.name, Api)
|
||||
Vue.component('demo-box', demoBox)
|
||||
Vue.component('demo-container', demoContainer)
|
||||
|
||||
const i18n = new VueI18n({
|
||||
locale: isZhCN(location.pathname) ? zhCN.locale : enUS.locale,
|
||||
messages: {
|
||||
[enUS.locale]: { message: enUS.messages },
|
||||
[zhCN.locale]: { message: zhCN.messages },
|
||||
},
|
||||
})
|
||||
|
||||
const router = new VueRouter({
|
||||
mode: 'history',
|
||||
fallback: false,
|
||||
|
|
@ -37,5 +50,6 @@ const router = new VueRouter({
|
|||
})
|
||||
new Vue({
|
||||
el: '#app',
|
||||
i18n,
|
||||
router,
|
||||
})
|
||||
|
|
|
|||
|
|
@ -0,0 +1,106 @@
|
|||
module.exports = {
|
||||
locale: 'en-US',
|
||||
messages: {
|
||||
'app.header.search': 'Search...',
|
||||
'app.header.menu.home': 'Home',
|
||||
'app.header.menu.practice': 'Practice',
|
||||
'app.header.menu.pattern': 'Patterns',
|
||||
'app.header.menu.components': 'Components',
|
||||
'app.header.menu.spec': 'Guidelines',
|
||||
'app.header.menu.resource': 'Resources',
|
||||
'app.header.menu.mobile': 'Mobile',
|
||||
'app.header.menu.pro': 'PRO',
|
||||
'app.header.lang': '中文',
|
||||
'app.content.edit-page': 'Edit this page on GitHub!',
|
||||
'app.content.edit-demo': 'Edit this demo on GitHub!',
|
||||
'app.component.examples': 'Examples',
|
||||
'app.component.examples.expand': 'Expand all code',
|
||||
'app.component.examples.collpse': 'Collpse all code',
|
||||
'app.demo.copy': 'Copy code',
|
||||
'app.demo.copied': 'Copied!',
|
||||
'app.demo.codepen': 'Open in CodePen',
|
||||
'app.demo.codesandbox': 'Open in CodeSandbox',
|
||||
'app.demo.riddle': 'Open in Riddle',
|
||||
'app.home.slogan': 'The world\'s second most popular React UI framework',
|
||||
'app.home.introduce': 'A design system with values of Nature and Determinacy for better user experience of enterprise applications',
|
||||
'app.home.design-language': 'Design Language',
|
||||
'app.home.solution': 'Solution',
|
||||
'app.home.components-explain': 'Based on the Ant Design language, we have provided a suite of out-of-the-box with high quality for developing and serving enterprise background applications,including the official React implementation and Angular, Vue implementations',
|
||||
'app.home.product-pro-slogan': 'Out-of-the-box front-end / Design solution',
|
||||
'app.home.product-mobile-slogan': 'antd-mobile is the implementation of Ant Design\'s mobile specification',
|
||||
'app.home.product-landing-slogan': 'Landing Pages templates and specifications based of Ant Design language',
|
||||
'app.home.product-antv-slogan': 'Simple, professional, with unlimited possibilities for data visualization solutions',
|
||||
'app.home.tool-title': 'Tools & Resources',
|
||||
'app.home.tool-package-title': 'Ant Design Resources',
|
||||
'app.home.tool-package-content': 'Ant Design Resources Download',
|
||||
'app.home.tool-library-title': 'Axure Library',
|
||||
'app.home.tool-library-content': 'Beautifully visual Axure library',
|
||||
'app.home.tool-kitchen-title': 'Kitchen',
|
||||
'app.home.tool-kitchen-content': 'A Sketch tools for designers',
|
||||
'app.home.getting-started': 'Getting Started',
|
||||
'app.home.more': 'Learn more',
|
||||
'app.home.more-mobile-react': 'Ant Design Mobile of React',
|
||||
'app.home.more-mobile-angular': 'Ant Design Mobile of Angular',
|
||||
'app.footer.repo': 'GitHub Repository',
|
||||
'app.footer.awesome': 'Awesome Ant Design',
|
||||
'app.footer.course': 'Ant Design Practical Tutorial',
|
||||
'app.footer.chinamirror': 'China Mirror <20><>',
|
||||
'app.footer.primary-color-changed': 'Change primary color successfully!',
|
||||
'app.footer.scaffold': 'Scaffold',
|
||||
'app.footer.kitchen': 'Sketch Toolkit',
|
||||
'app.footer.landing': 'Landing Templates',
|
||||
'app.footer.scaffolds': 'Scaffold Market',
|
||||
'app.footer.dev-tools': 'Developer Tools',
|
||||
'app.footer.umi': 'React Application Framework',
|
||||
'app.footer.dva': 'Data Flow Framework',
|
||||
'app.footer.resources': 'Resources',
|
||||
'app.footer.data-vis': 'Data Visualization',
|
||||
'app.footer.eggjs': 'Enterprise Node Framework',
|
||||
'app.footer.motion': 'Motion Solution',
|
||||
'app.footer.design-resources': 'Design Resources',
|
||||
'app.footer.antd-library': 'Axure library',
|
||||
'app.footer.antux': 'Sitemap Template',
|
||||
'app.footer.community': 'Community',
|
||||
'app.footer.help': 'Help',
|
||||
'app.footer.change-log': 'Change Log',
|
||||
'app.footer.faq': 'FAQ',
|
||||
'app.footer.feedback': 'Feedback',
|
||||
'app.footer.stackoverflow': 'StackOverflow',
|
||||
'app.footer.segmentfault': 'SegmentFault',
|
||||
'app.footer.discuss-en': 'Chat Room (English)',
|
||||
'app.footer.discuss-cn': 'Chat Room (中文)',
|
||||
'app.footer.bug-report': 'Bug Report',
|
||||
'app.footer.issues': 'Issues',
|
||||
'app.footer.version': 'Version: ',
|
||||
'app.footer.author': 'Created by AFX',
|
||||
'app.footer.work_with_us': 'Work with Us',
|
||||
'app.footer.more-product': 'More Products',
|
||||
'app.footer.company': 'AFX',
|
||||
'app.footer.ant-design': 'UI Design Language',
|
||||
'app.footer.yuque': 'YuQue',
|
||||
'app.footer.yuque.slogan': 'Write your document as a team',
|
||||
'app.footer.fengdie': 'FengDie',
|
||||
'app.footer.fengdie.slogan': 'Mobile web app builder',
|
||||
'app.footer.zhihu': 'Ant Design Blog',
|
||||
'app.footer.zhihu.xtech': 'Experience Cloud Blog',
|
||||
'app.footer.seeconf': 'Seeking Experience & Engineering Conference',
|
||||
'app.footer.xtech': 'Ant Financial Experience Tech',
|
||||
'app.footer.xtech.slogan': 'Experience The Beauty',
|
||||
'app.publish.title': 'antd@3.0.0 has been released! <20> <20> <20>',
|
||||
'app.publish.greeting': 'Hello, ',
|
||||
'app.publish.intro': ' has been released, and please upgrade. ',
|
||||
'app.publish.old-version-guide': 'If you need documentation of older version, please visit ',
|
||||
'app.publish.old-version-tips': ', or switch version with the select at header navigation.',
|
||||
'app.docs.color.pick-primary': 'Pick your primary color',
|
||||
'app.docs.components.icon.pick-theme': 'Select the Icon Theme',
|
||||
'app.docs.components.icon.outlined': 'Outlined',
|
||||
'app.docs.components.icon.filled': 'Filled',
|
||||
'app.docs.components.icon.two-tone': 'Two Tone',
|
||||
'app.docs.components.icon.category.direction': 'Directional Icons',
|
||||
'app.docs.components.icon.category.suggestion': 'Suggested Icons',
|
||||
'app.docs.components.icon.category.edit': 'Editor Icons',
|
||||
'app.docs.components.icon.category.data': 'Data Icons',
|
||||
'app.docs.components.icon.category.other': 'Application Icons',
|
||||
'app.docs.components.icon.category.logo': 'Brand and Logos',
|
||||
},
|
||||
}
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
ul.anticons-list {
|
||||
margin: 40px 0;
|
||||
margin: 10px 0;
|
||||
list-style: none;
|
||||
overflow: hidden;
|
||||
li {
|
||||
|
|
@ -10,18 +10,18 @@ ul.anticons-list {
|
|||
cursor: pointer;
|
||||
height: 100px;
|
||||
color: #555;
|
||||
transition: all .3s;
|
||||
transition: color .3s ease-in-out, background-color .3s ease-in-out;
|
||||
position: relative;
|
||||
margin: 3px 0;
|
||||
border-radius: 4px;
|
||||
background-color: #fff;
|
||||
overflow: hidden;
|
||||
padding: 10px 0 0;
|
||||
|
||||
.anticon {
|
||||
font-size: 24px;
|
||||
margin: 12px 0 16px;
|
||||
transition: all .3s;
|
||||
font-size: 36px;
|
||||
margin: 12px 0 8px;
|
||||
transition: transform .3s ease-in-out;
|
||||
will-change: transform;
|
||||
}
|
||||
|
||||
.anticon-class {
|
||||
|
|
@ -30,6 +30,9 @@ ul.anticons-list {
|
|||
transform: scale(0.83);
|
||||
font-family: "Lucida Console", Consolas;
|
||||
white-space: nowrap;
|
||||
.ant-badge {
|
||||
transition: color .3s ease-in-out;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
|
|
@ -38,6 +41,9 @@ ul.anticons-list {
|
|||
.anticon {
|
||||
transform: scale(1.4);
|
||||
}
|
||||
.ant-badge {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
&.copied:hover {
|
||||
|
|
@ -64,3 +70,10 @@ ul.anticons-list {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.copied-code {
|
||||
font-size: 12px;
|
||||
background: #f5f5f5;
|
||||
border-radius: 2px;
|
||||
padding: 2px 4px 2px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,50 @@
|
|||
|
||||
import { message } from 'ant-design-vue'
|
||||
import CopyableIcon from './CopyableIcon'
|
||||
|
||||
const Category = {
|
||||
props: ['icons', 'title', 'newIcons', 'theme'],
|
||||
data () {
|
||||
return {
|
||||
justCopied: null,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onCopied (type, text) {
|
||||
message.success(<span><code class='copied-code'>{text}</code> copied 🎉</span>)
|
||||
this.justCopied = type
|
||||
setTimeout(() => {
|
||||
this.justCopied = null
|
||||
}, 2000)
|
||||
},
|
||||
},
|
||||
render () {
|
||||
const {
|
||||
icons, title,
|
||||
theme, newIcons,
|
||||
} = this.$props
|
||||
const items = icons.map((name) => {
|
||||
return (
|
||||
<CopyableIcon
|
||||
key={name}
|
||||
type={name}
|
||||
theme={theme}
|
||||
isNew={newIcons.indexOf(name) >= 0}
|
||||
justCopied={this.justCopied}
|
||||
onCopied={this.onCopied}
|
||||
/>
|
||||
)
|
||||
})
|
||||
const message = this.$t('message')
|
||||
return (
|
||||
<div>
|
||||
<h3>{message[`app.docs.components.icon.category.${title}`]}</h3>
|
||||
<ul class={'anticons-list'}>
|
||||
{items}
|
||||
</ul>
|
||||
</div>
|
||||
)
|
||||
},
|
||||
}
|
||||
|
||||
export default Category
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
<template>
|
||||
<li
|
||||
:class="justCopied ? 'copied' : ''"
|
||||
v-clipboard:copy="text"
|
||||
v-clipboard:success="onCopied">
|
||||
<a-icon :type="type" :theme="theme"/>
|
||||
<span class='anticon-class'>
|
||||
<a-badge :dot="isNew">
|
||||
{{type}}
|
||||
</a-badge>
|
||||
</span>
|
||||
</li>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: ['type', 'isNew', 'theme', 'justCopied'],
|
||||
data () {
|
||||
const { type, theme } = this
|
||||
return {
|
||||
text: theme === 'outlined' ? `<a-icon type="${type}" />` : `<a-icon type="${type}" theme="${theme}" />`,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onCopied () {
|
||||
this.$emit('copied', this.type, this.text)
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
@ -0,0 +1,99 @@
|
|||
export const categories = {
|
||||
direction: [
|
||||
'step-backward', 'step-forward', 'fast-backward',
|
||||
'fast-forward', 'shrink', 'arrows-alt', 'down', 'up', 'left',
|
||||
'right', 'caret-up', 'caret-down', 'caret-left', 'caret-right',
|
||||
'up-circle', 'down-circle', 'left-circle', 'right-circle',
|
||||
'double-right', 'double-left', 'vertical-left', 'vertical-right',
|
||||
'forward', 'backward', 'rollback', 'enter', 'retweet',
|
||||
'swap', 'swap-left', 'swap-right', 'arrow-up', 'arrow-down',
|
||||
'arrow-left', 'arrow-right', 'play-circle',
|
||||
'up-square', 'down-square', 'left-square', 'right-square',
|
||||
'login', 'logout', 'menu-fold', 'menu-unfold',
|
||||
'border-bottom', 'border-horizontal', 'border-inner',
|
||||
'border-outter', 'border-left', 'border-right', 'border-top',
|
||||
'border-verticle', 'pic-center', 'pic-left', 'pic-right',
|
||||
'radius-bottomleft', 'radius-bottomright', 'radius-upleft',
|
||||
'fullscreen', 'fullscreen-exit',
|
||||
],
|
||||
suggestion: [
|
||||
'question', 'question-circle',
|
||||
'plus', 'plus-circle', 'pause',
|
||||
'pause-circle', 'minus',
|
||||
'minus-circle', 'plus-square', 'minus-square',
|
||||
'info', 'info-circle',
|
||||
'exclamation', 'exclamation-circle',
|
||||
'close', 'close-circle', 'close-square',
|
||||
'check', 'check-circle',
|
||||
'check-square',
|
||||
'clock-circle', 'warning',
|
||||
'issues-close', 'stop',
|
||||
],
|
||||
edit: [
|
||||
'edit', 'form', 'copy', 'scissor', 'delete', 'snippets', 'diff', 'highlight',
|
||||
'align-center', 'align-left', 'align-right', 'bg-colors',
|
||||
'bold', 'italic', 'underline',
|
||||
'strikethrough', 'redo', 'undo', 'zoom-in', 'zoom-out',
|
||||
'font-colors', 'font-size', 'line-height', 'colum-height', 'colum-width',
|
||||
'dash', 'small-dash', 'sort-ascending', 'sort-descending',
|
||||
'drag', 'ordered-list', 'radius-setting',
|
||||
],
|
||||
data: [
|
||||
'area-chart', 'pie-chart', 'bar-chart', 'dot-chart', 'line-chart',
|
||||
'radar-chart', 'heat-map', 'fall', 'rise', 'stock', 'box-plot', 'fund',
|
||||
'sliders',
|
||||
],
|
||||
other: [
|
||||
'lock', 'unlock', 'bars', 'book', 'calendar', 'cloud', 'cloud-download',
|
||||
'code', 'copy', 'credit-card', 'delete', 'desktop',
|
||||
'download', 'ellipsis', 'file', 'file-text',
|
||||
'file-unknown', 'file-pdf', 'file-word', 'file-excel',
|
||||
'file-jpg', 'file-ppt', 'file-markdown', 'file-add',
|
||||
'folder', 'folder-open', 'folder-add', 'hdd', 'frown',
|
||||
'meh', 'smile', 'inbox',
|
||||
'laptop', 'appstore', 'link',
|
||||
'mail', 'mobile', 'notification', 'paper-clip', 'picture',
|
||||
'poweroff', 'reload', 'search', 'setting', 'share-alt',
|
||||
'shopping-cart', 'tablet', 'tag', 'tags',
|
||||
'to-top', 'upload', 'user', 'video-camera',
|
||||
'home', 'loading', 'loading-3-quarters',
|
||||
'cloud-upload',
|
||||
'star', 'heart', 'environment',
|
||||
'eye', 'camera', 'save', 'team',
|
||||
'solution', 'phone', 'filter', 'exception', 'export',
|
||||
'customer-service', 'qrcode', 'scan', 'like',
|
||||
'dislike', 'message', 'pay-circle',
|
||||
'calculator', 'pushpin',
|
||||
'bulb', 'select', 'switcher', 'rocket', 'bell', 'disconnect',
|
||||
'database', 'compass', 'barcode', 'hourglass', 'key',
|
||||
'flag', 'layout', 'printer', 'sound', 'usb', 'skin', 'tool',
|
||||
'sync', 'wifi', 'car', 'schedule', 'user-add', 'user-delete',
|
||||
'usergroup-add', 'usergroup-delete', 'man', 'woman', 'shop',
|
||||
'gift', 'idcard', 'medicine-box', 'red-envelope', 'coffee',
|
||||
'copyright', 'trademark', 'safety', 'wallet', 'bank', 'trophy',
|
||||
'contacts', 'global', 'shake', 'api', 'fork', 'dashboard',
|
||||
'table', 'profile',
|
||||
'alert', 'audit', 'batch-folding', 'branches',
|
||||
'build', 'border', 'crown',
|
||||
'experiment', 'fire',
|
||||
'money-collect', 'property-safety', 'read', 'reconciliation',
|
||||
'rest', 'security-scan', 'insurance', 'interation', 'safety-certificate',
|
||||
'project', 'thunderbolt', 'block', 'cluster', 'deployment-unit',
|
||||
'dollar', 'euro', 'pound', 'file-done', 'file-exclamation', 'file-protect',
|
||||
'file-search', 'file-sync', 'gateway', 'gold', 'robot', 'shopping',
|
||||
],
|
||||
logo: [
|
||||
'android', 'apple', 'windows',
|
||||
'ie', 'chrome', 'github', 'aliwangwang',
|
||||
'dingding',
|
||||
'weibo-square', 'weibo-circle', 'taobao-circle', 'html5',
|
||||
'weibo', 'twitter', 'wechat', 'youtube', 'alipay-circle',
|
||||
'taobao', 'skype', 'qq', 'medium-workmark', 'gitlab', 'medium',
|
||||
'linkedin', 'google-plus', 'dropbox', 'facebook', 'codepen', 'code-sandbox', 'code-sandbox-circle',
|
||||
'amazon', 'google', 'codepen-circle', 'alipay', 'ant-design',
|
||||
'aliyun', 'zhihu', 'slack', 'slack-square', 'behance',
|
||||
'behance-square', 'dribbble', 'dribbble-square',
|
||||
'instagram', 'yuque',
|
||||
'alibaba', 'yahoo',
|
||||
],
|
||||
}
|
||||
|
|
@ -0,0 +1,110 @@
|
|||
import manifest from '@ant-design/icons/lib/manifest'
|
||||
import Category from './Category'
|
||||
import { FilledIcon, OutlinedIcon, TwoToneIcon } from './themeIcons'
|
||||
import { categories } from './fields'
|
||||
|
||||
const IconDisplay = {
|
||||
cagetories: categories,
|
||||
newIconNames: [
|
||||
// direction
|
||||
'border-bottom', 'border-horizontal', 'border-inner',
|
||||
'border-outter', 'border-left', 'border-right', 'border-top',
|
||||
'border-verticle', 'pic-center', 'pic-left', 'pic-right',
|
||||
'radius-bottomleft', 'radius-bottomright', 'radius-upleft', 'radius-upleft',
|
||||
'fullscreen', 'fullscreen-exit',
|
||||
// suggestion
|
||||
'issues-close', 'stop',
|
||||
|
||||
// edit
|
||||
'scissor', 'snippets', 'diff', 'highlight',
|
||||
'align-center', 'align-left', 'align-right', 'bg-colors',
|
||||
'bold', 'italic', 'underline', 'redo', 'undo', 'zoom-in', 'zoom-out',
|
||||
'font-colors', 'font-size', 'line-height', 'colum-height', 'colum-width',
|
||||
'dash', 'small-dash', 'sort-ascending', 'sort-descending',
|
||||
'drag', 'ordered-list', 'radius-setting',
|
||||
|
||||
// data
|
||||
'radar-chart', 'heat-map', 'fall', 'rise', 'stock', 'box-plot', 'fund',
|
||||
'sliders',
|
||||
|
||||
// other
|
||||
'alert', 'audit', 'batch-folding', 'branches',
|
||||
'build', 'border', 'crown',
|
||||
'experiment', 'fire',
|
||||
'money-collect', 'property-safety', 'read', 'reconciliation',
|
||||
'rest', 'security-scan', 'insurance', 'interation', 'safety-certificate',
|
||||
'project', 'thunderbolt', 'block', 'cluster', 'deployment-unit',
|
||||
'dollar', 'euro', 'pound', 'file-done', 'file-exclamation', 'file-protect',
|
||||
'file-search', 'file-sync', 'gateway', 'gold', 'robot',
|
||||
'strikethrough', 'shopping',
|
||||
|
||||
// logo
|
||||
'alibaba', 'yahoo',
|
||||
],
|
||||
|
||||
themeTypeMapper: {
|
||||
filled: 'fill',
|
||||
outlined: 'outline',
|
||||
twoTone: 'twotone',
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
theme: 'outlined',
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getComputedDisplayList () {
|
||||
return Object.keys(IconDisplay.cagetories)
|
||||
.map(
|
||||
(category) => ({
|
||||
category,
|
||||
icons: IconDisplay.cagetories[category]
|
||||
.filter((name) => manifest[IconDisplay.themeTypeMapper[this.theme]].indexOf(name) !== -1),
|
||||
}),
|
||||
)
|
||||
.filter(({ icons }) => Boolean(icons.length))
|
||||
},
|
||||
|
||||
handleChangeTheme (e) {
|
||||
this.theme = e.target.value
|
||||
},
|
||||
|
||||
renderCategories (list) {
|
||||
return list.map(({ category, icons }) => {
|
||||
return (
|
||||
<Category
|
||||
key={category}
|
||||
title={category}
|
||||
icons={icons}
|
||||
theme={this.theme}
|
||||
newIcons={IconDisplay.newIconNames}
|
||||
/>
|
||||
)
|
||||
})
|
||||
},
|
||||
},
|
||||
|
||||
render () {
|
||||
const list = this.getComputedDisplayList()
|
||||
const message = this.$t('message')
|
||||
return (
|
||||
<div>
|
||||
<h3>{message['app.docs.components.icon.pick-theme']}</h3>
|
||||
<a-radio-group value={this.theme} onChange={this.handleChangeTheme}>
|
||||
<a-radio-button value='outlined'>
|
||||
<a-icon component={OutlinedIcon} /> {message['app.docs.components.icon.outlined']}
|
||||
</a-radio-button>
|
||||
<a-radio-button value='filled'>
|
||||
<a-icon component={FilledIcon} /> {message['app.docs.components.icon.filled']}
|
||||
</a-radio-button>
|
||||
<a-radio-button value='twoTone'>
|
||||
<a-icon component={TwoToneIcon} /> {message['app.docs.components.icon.two-tone']}
|
||||
</a-radio-button>
|
||||
</a-radio-group>
|
||||
{this.renderCategories(list)}
|
||||
</div>
|
||||
)
|
||||
},
|
||||
}
|
||||
|
||||
export default IconDisplay
|
||||
|
|
@ -0,0 +1,47 @@
|
|||
export const FilledIcon = {
|
||||
render () {
|
||||
const path = 'M864 64H160C107 64 64 107 64 160v' +
|
||||
'704c0 53 43 96 96 96h704c53 0 96-43 96-96V16' +
|
||||
'0c0-53-43-96-96-96z'
|
||||
return (
|
||||
<svg
|
||||
viewBox='0 0 1024 1024'
|
||||
>
|
||||
<path d={path} />
|
||||
</svg>
|
||||
)
|
||||
},
|
||||
}
|
||||
|
||||
export const OutlinedIcon = {
|
||||
render () {
|
||||
const path = 'M864 64H160C107 64 64 107 64 160v7' +
|
||||
'04c0 53 43 96 96 96h704c53 0 96-43 96-96V160c' +
|
||||
'0-53-43-96-96-96z m-12 800H172c-6.6 0-12-5.4-' +
|
||||
'12-12V172c0-6.6 5.4-12 12-12h680c6.6 0 12 5.4' +
|
||||
' 12 12v680c0 6.6-5.4 12-12 12z'
|
||||
return (
|
||||
<svg
|
||||
viewBox='0 0 1024 1024'
|
||||
>
|
||||
<path d={path} />
|
||||
</svg>
|
||||
)
|
||||
},
|
||||
}
|
||||
|
||||
export const TwoToneIcon = {
|
||||
render () {
|
||||
const path = 'M16 512c0 273.932 222.066 496 496 49' +
|
||||
'6s496-222.068 496-496S785.932 16 512 16 16 238.' +
|
||||
'066 16 512z m496 368V144c203.41 0 368 164.622 3' +
|
||||
'68 368 0 203.41-164.622 368-368 368z'
|
||||
return (
|
||||
<svg
|
||||
viewBox='0 0 1024 1024'
|
||||
>
|
||||
<path d={path} />
|
||||
</svg>
|
||||
)
|
||||
},
|
||||
}
|
||||
|
|
@ -0,0 +1,106 @@
|
|||
module.exports = {
|
||||
locale: 'zh-CN',
|
||||
messages: {
|
||||
'app.header.search': '全文本搜索...',
|
||||
'app.header.menu.home': '首页',
|
||||
'app.header.menu.practice': '实践',
|
||||
'app.header.menu.pattern': '模式',
|
||||
'app.header.menu.components': '组件',
|
||||
'app.header.menu.spec': '设计语言',
|
||||
'app.header.menu.resource': '资源',
|
||||
'app.header.menu.mobile': '移动版',
|
||||
'app.header.menu.pro': 'PRO',
|
||||
'app.header.lang': 'English',
|
||||
'app.content.edit-page': '在 Github 上编辑此页！',
|
||||
'app.content.edit-demo': '在 Github 上编辑此示例！',
|
||||
'app.component.examples': '代码演示',
|
||||
'app.component.examples.expand': '展开全部代码',
|
||||
'app.component.examples.collpse': '收起全部代码',
|
||||
'app.demo.copy': '复制代码',
|
||||
'app.demo.copied': '复制成功',
|
||||
'app.demo.codepen': '在 CodePen 中打开',
|
||||
'app.demo.codesandbox': '在 CodeSandbox 中打开',
|
||||
'app.demo.riddle': '在 Riddle 中打开',
|
||||
'app.home.slogan': '一个 UI 设计语言',
|
||||
'app.home.introduce': '服务于企业级产品的设计体系，基于确定和自然的设计价值观上的模块化解决方案，让设计者和开发者专注于更好的用户体验。',
|
||||
'app.home.design-language': '设计语言',
|
||||
'app.home.solution': '解决方案',
|
||||
'app.home.components-explain': '基于 Ant Design 设计语言，我们提供了开箱即用的高质量 React 和 Angular 组件实现，用于开发和服务于企业级中后台产品。',
|
||||
'app.home.product-pro-slogan': '开箱即用的中台前端/设计解决方案',
|
||||
'app.home.product-mobile-slogan': 'antd-mobile 是 Ant Design 移动规范的实现',
|
||||
'app.home.product-antv-slogan': '简单、专业、拥有无限可能的数据可视化解决方案',
|
||||
'app.home.product-landing-slogan': '基于 Ant Design 设计语言的 Landing 模板与规范',
|
||||
'app.home.tool-title': '工具和资源',
|
||||
'app.home.tool-package-title': 'Ant Design 资源包',
|
||||
'app.home.tool-package-content': 'Ant Design 相关设计资源下载',
|
||||
'app.home.tool-library-title': 'Axure Library',
|
||||
'app.home.tool-library-content': '一套精美得像视觉稿的 Axure 组件库',
|
||||
'app.home.tool-kitchen-title': 'Kitchen',
|
||||
'app.home.tool-kitchen-content': '一个为设计师提效的 Sketch 工具集',
|
||||
'app.home.getting-started': '开始使用',
|
||||
'app.home.more': '查看更多',
|
||||
'app.home.more-mobile-react': 'Ant Design Mobile of React',
|
||||
'app.home.more-mobile-angular': 'Ant Design Mobile of Angular',
|
||||
'app.footer.repo': 'GitHub 仓库',
|
||||
'app.footer.awesome': 'Awesome Ant Design',
|
||||
'app.footer.course': 'Ant Design 实战教程',
|
||||
'app.footer.chinamirror': '国内镜像站点 <20><>',
|
||||
'app.footer.primary-color-changed': '修改主题色成功！',
|
||||
'app.footer.kitchen': 'Sketch 工具集',
|
||||
'app.footer.landing': 'Landing 模板集',
|
||||
'app.footer.scaffold': '脚手架',
|
||||
'app.footer.scaffolds': '脚手架市场',
|
||||
'app.footer.dev-tools': '开发工具',
|
||||
'app.footer.umi': 'React 应用开发框架',
|
||||
'app.footer.dva': '数据流前端框架',
|
||||
'app.footer.resources': '相关资源',
|
||||
'app.footer.data-vis': '数据可视化',
|
||||
'app.footer.eggjs': '企业级 Node 开发框架',
|
||||
'app.footer.motion': '设计动效',
|
||||
'app.footer.antd-library': 'Axure 部件库',
|
||||
'app.footer.design-resources': '设计资源下载',
|
||||
'app.footer.antux': '页面逻辑素材',
|
||||
'app.footer.community': '社区',
|
||||
'app.footer.help': '帮助',
|
||||
'app.footer.change-log': '更新日志',
|
||||
'app.footer.faq': '常见问题',
|
||||
'app.footer.feedback': '反馈和建议',
|
||||
'app.footer.stackoverflow': 'StackOverflow',
|
||||
'app.footer.segmentfault': 'SegmentFault',
|
||||
'app.footer.discuss-en': '在线讨论 (English)',
|
||||
'app.footer.discuss-cn': '在线讨论 (中文)',
|
||||
'app.footer.bug-report': '报告 Bug',
|
||||
'app.footer.issues': '讨论列表',
|
||||
'app.footer.version': '文档版本：',
|
||||
'app.footer.author': '蚂蚁金服体验技术部出品 @ AFX',
|
||||
'app.footer.work_with_us': '加入我们',
|
||||
'app.footer.more-product': '更多产品',
|
||||
'app.footer.company': 'AFX',
|
||||
'app.footer.ant-design': '蚂蚁 UI 体系',
|
||||
'app.footer.yuque': '语雀',
|
||||
'app.footer.yuque.slogan': '知识创作与分享工具',
|
||||
'app.footer.fengdie': '云凤蝶',
|
||||
'app.footer.fengdie.slogan': '移动建站平台',
|
||||
'app.footer.zhihu': 'Ant Design 专栏',
|
||||
'app.footer.zhihu.xtech': '体验科技专栏',
|
||||
'app.footer.seeconf': '蚂蚁体验科技大会',
|
||||
'app.footer.xtech': '蚂蚁体验科技',
|
||||
'app.footer.xtech.slogan': '让用户体验美好',
|
||||
'app.publish.title': 'antd@3.0.0 发布！<E5B883> <20> <20>',
|
||||
'app.publish.greeting': '你好，',
|
||||
'app.publish.intro': ' 已正式发布，欢迎升级。',
|
||||
'app.publish.old-version-guide': '如果您还需要使用旧版，请查阅 ',
|
||||
'app.publish.old-version-tips': '，也可通过页面右上角的文档版本选择框进行切换。',
|
||||
'app.docs.color.pick-primary': '选择你的主色',
|
||||
'app.docs.components.icon.pick-theme': '选择图标主题风格',
|
||||
'app.docs.components.icon.outlined': '线框风格',
|
||||
'app.docs.components.icon.filled': '实底风格',
|
||||
'app.docs.components.icon.two-tone': '双色风格',
|
||||
'app.docs.components.icon.category.direction': '方向性图标',
|
||||
'app.docs.components.icon.category.suggestion': '提示建议性图标',
|
||||
'app.docs.components.icon.category.edit': '编辑类图标',
|
||||
'app.docs.components.icon.category.data': '数据类图标',
|
||||
'app.docs.components.icon.category.other': '网站通用图标',
|
||||
'app.docs.components.icon.category.logo': '品牌和标识',
|
||||
},
|
||||
}
|
||||
Loading…
Reference in New Issue