mirror of
https://github.com/ant-design/ant-design.git
synced 2025-01-18 14:13:37 +08:00
docs: use style tag
This commit is contained in:
MadCcc
parent
32dd8c6c86
commit
1f75a99f8c
@ -6,7 +6,8 @@
|
||||
|
||||
Demonstration of [Lookup Patterns: Certain Category](https://ant.design/docs/spec/reaction#Lookup-Patterns). Basic Usage, set options of autocomplete with `options` property.
|
||||
|
||||
```css
|
||||
<style>
|
||||
|
||||
.certain-category-search-dropdown .ant-select-dropdown-menu-item-group-title {
|
||||
color: #666;
|
||||
font-weight: bold;
|
||||
@ -28,4 +29,4 @@ Demonstration of [Lookup Patterns: Certain Category](https://ant.design/docs/spe
|
||||
.certain-category-search-dropdown .ant-select-dropdown-menu {
|
||||
max-height: 300px;
|
||||
}
|
||||
```
|
||||
</style>
|
||||
|
||||
@ -6,7 +6,8 @@
|
||||
|
||||
Usually used for reminders and notifications.
|
||||
|
||||
```css
|
||||
<style>
|
||||
|
||||
/* tile uploaded pictures */
|
||||
.avatar-item {
|
||||
margin-right: 24px;
|
||||
@ -16,4 +17,4 @@ Usually used for reminders and notifications.
|
||||
margin-right: 0;
|
||||
margin-left: 24px;
|
||||
}
|
||||
```
|
||||
</style>
|
||||
|
||||
@ -6,11 +6,12 @@
|
||||
|
||||
The most basic usage.
|
||||
|
||||
```css
|
||||
<style>
|
||||
|
||||
.site-back-top-basic {
|
||||
color: rgba(64, 64, 64, 0.6);
|
||||
}
|
||||
```
|
||||
</style>
|
||||
|
||||
<style>
|
||||
[data-theme="dark"] .site-back-top-basic {
|
||||
|
||||
@ -6,8 +6,9 @@
|
||||
|
||||
support `count` when use colorful badge
|
||||
|
||||
```css
|
||||
<style>
|
||||
|
||||
.ant-tag {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
```
|
||||
</style>
|
||||
|
||||
@ -6,8 +6,9 @@
|
||||
|
||||
Use ribbon badge.
|
||||
|
||||
```css
|
||||
<style>
|
||||
|
||||
#components-badge-demo-ribbbon .ant-card {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
```
|
||||
</style>
|
||||
|
||||
@ -6,7 +6,8 @@
|
||||
|
||||
Used together with `react-router@6+`.
|
||||
|
||||
```css
|
||||
<style>
|
||||
|
||||
.demo {
|
||||
margin: 16px;
|
||||
}
|
||||
@ -23,7 +24,7 @@ Used together with `react-router@6+`.
|
||||
.app-list {
|
||||
margin-top: 16px;
|
||||
}
|
||||
```
|
||||
</style>
|
||||
|
||||
<style>
|
||||
[data-theme="dark"] .demo-nav {
|
||||
|
||||
@ -6,9 +6,10 @@
|
||||
|
||||
To mark a button as disabled, add the `disabled` property to the `Button`.
|
||||
|
||||
```css
|
||||
<style>
|
||||
|
||||
.site-button-ghost-wrapper {
|
||||
padding: 8px 8px 0 8px;
|
||||
background: rgb(190, 200, 200);
|
||||
}
|
||||
```
|
||||
</style>
|
||||
|
||||
@ -6,9 +6,9 @@
|
||||
|
||||
`ghost` property will make button's background transparent, it is commonly used in colored background.
|
||||
|
||||
```css
|
||||
<style>
|
||||
.site-button-ghost-wrapper {
|
||||
padding: 26px 16px 16px;
|
||||
background: rgb(190, 200, 200);
|
||||
}
|
||||
```
|
||||
</style>
|
||||
|
||||
@ -6,13 +6,13 @@
|
||||
|
||||
Nested inside a container element for rendering in limited space.
|
||||
|
||||
```css
|
||||
<style>
|
||||
.site-calendar-demo-card {
|
||||
width: 300px;
|
||||
border: 1px solid #f0f0f0;
|
||||
border-radius: 8px;
|
||||
}
|
||||
```
|
||||
</style>
|
||||
|
||||
<style>
|
||||
[data-theme="dark"] .site-calendar-demo-card {
|
||||
|
||||
@ -6,13 +6,13 @@
|
||||
|
||||
Customize Calendar header content.
|
||||
|
||||
```css
|
||||
<style>
|
||||
.site-calendar-customize-header-wrapper {
|
||||
width: 300px;
|
||||
border: 1px solid #f0f0f0;
|
||||
border-radius: 2px;
|
||||
}
|
||||
```
|
||||
</style>
|
||||
|
||||
<style>
|
||||
[data-theme="dark"] .site-calendar-customize-header-wrapper {
|
||||
|
||||
@ -6,7 +6,7 @@
|
||||
|
||||
This component can be rendered by using `dateCellRender` and `monthCellRender` with the data you need.
|
||||
|
||||
```css
|
||||
<style>
|
||||
.events {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
@ -26,4 +26,4 @@ This component can be rendered by using `dateCellRender` and `monthCellRender` w
|
||||
.notes-month section {
|
||||
font-size: 28px;
|
||||
}
|
||||
```
|
||||
</style>
|
||||
|
||||
@ -6,12 +6,12 @@
|
||||
|
||||
A borderless card on a gray background.
|
||||
|
||||
```css
|
||||
<style>
|
||||
.site-card-border-less-wrapper {
|
||||
padding: 30px;
|
||||
background: #ececec;
|
||||
}
|
||||
```
|
||||
</style>
|
||||
|
||||
<style>
|
||||
[data-theme="dark"] .site-card-border-less-wrapper {
|
||||
|
||||
@ -6,7 +6,7 @@
|
||||
|
||||
Customize the background, border, margin styles and icon for each panel.
|
||||
|
||||
```css
|
||||
<style>
|
||||
[data-theme='compact'] .site-collapse-custom-collapse .site-collapse-custom-panel,
|
||||
.site-collapse-custom-collapse .site-collapse-custom-panel {
|
||||
margin-bottom: 24px;
|
||||
@ -15,7 +15,7 @@ Customize the background, border, margin styles and icon for each panel.
|
||||
border: 0px !important;
|
||||
border-radius: 2px;
|
||||
}
|
||||
```
|
||||
</style>
|
||||
|
||||
<style>
|
||||
[data-theme="dark"] .site-collapse-custom-collapse .site-collapse-custom-panel {
|
||||
|
||||
@ -6,7 +6,7 @@
|
||||
|
||||
Components which support rtl direction are listed here, you can toggle the direction in the demo.
|
||||
|
||||
```css
|
||||
<style>
|
||||
.button-demo .ant-btn,
|
||||
.button-demo .ant-btn-group {
|
||||
margin-right: 8px;
|
||||
@ -34,7 +34,7 @@ Components which support rtl direction are listed here, you can toggle the direc
|
||||
margin-right: 0;
|
||||
margin-left: 20px;
|
||||
}
|
||||
```
|
||||
</style>
|
||||
|
||||
<style>
|
||||
[data-theme="dark"] .head-example {
|
||||
|
||||
@ -6,7 +6,7 @@
|
||||
|
||||
Components which need localization support are listed here, you can toggle the language in the demo.
|
||||
|
||||
```css
|
||||
<style>
|
||||
.site-config-provider-calendar-wrapper {
|
||||
width: 319px;
|
||||
border: 1px solid #d9d9d9;
|
||||
@ -29,7 +29,7 @@ Components which need localization support are listed here, you can toggle the l
|
||||
.change-locale {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
```
|
||||
</style>
|
||||
|
||||
<style>
|
||||
[data-theme="dark"] .locale-components {
|
||||
|
||||
@ -6,7 +6,7 @@
|
||||
|
||||
Use a form in Drawer with a submit button.
|
||||
|
||||
```css
|
||||
<style>
|
||||
.site-form-in-drawer-wrapper {
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
@ -17,7 +17,7 @@ Use a form in Drawer with a submit button.
|
||||
background: #fff;
|
||||
border-top: 1px solid #e9e9e9;
|
||||
}
|
||||
```
|
||||
</style>
|
||||
|
||||
<style>
|
||||
[data-theme="dark"] .site-form-in-drawer-wrapper {
|
||||
|
||||
@ -6,7 +6,7 @@
|
||||
|
||||
Render in current dom. custom container, check `getContainer`.
|
||||
|
||||
```css
|
||||
<style>
|
||||
.site-drawer-render-in-current-wrapper {
|
||||
position: relative;
|
||||
height: 200px;
|
||||
@ -17,7 +17,7 @@ Render in current dom. custom container, check `getContainer`.
|
||||
border: 1px solid #ebedf0;
|
||||
border-radius: 2px;
|
||||
}
|
||||
```
|
||||
</style>
|
||||
|
||||
<style>
|
||||
[data-theme="dark"] .site-drawer-render-in-current-wrapper {
|
||||
|
||||
@ -6,7 +6,7 @@
|
||||
|
||||
Use Drawer to quickly preview details of an object, such as those in a list.
|
||||
|
||||
```css
|
||||
<style>
|
||||
.site-description-item-profile-wrapper {
|
||||
margin-bottom: 7px;
|
||||
color: rgba(0, 0, 0, 0.65);
|
||||
@ -37,7 +37,7 @@ Use Drawer to quickly preview details of an object, such as those in a list.
|
||||
margin-right: 8px;
|
||||
color: rgba(0, 0, 0, 0.85);
|
||||
}
|
||||
```
|
||||
</style>
|
||||
|
||||
<style>
|
||||
[data-theme="dark"] .site-description-item-profile-p {
|
||||
|
||||
@ -6,7 +6,7 @@
|
||||
|
||||
By specifying `arrow` prop with `{ pointAtCenter: true }`, the arrow will point to the center of the target element.
|
||||
|
||||
```css
|
||||
<style>
|
||||
#components-dropdown-demo-arrow-center .ant-btn {
|
||||
margin-right: 8px;
|
||||
margin-bottom: 8px;
|
||||
@ -16,4 +16,4 @@ By specifying `arrow` prop with `{ pointAtCenter: true }`, the arrow will point
|
||||
margin-bottom: 8px;
|
||||
margin-left: 8px;
|
||||
}
|
||||
```
|
||||
</style>
|
||||
|
||||
@ -6,7 +6,7 @@
|
||||
|
||||
You could display an arrow.
|
||||
|
||||
```css
|
||||
<style>
|
||||
#components-dropdown-demo-arrow .ant-btn {
|
||||
margin-right: 8px;
|
||||
margin-bottom: 8px;
|
||||
@ -16,4 +16,4 @@ You could display an arrow.
|
||||
margin-bottom: 8px;
|
||||
margin-left: 8px;
|
||||
}
|
||||
```
|
||||
</style>
|
||||
|
||||
@ -6,12 +6,12 @@
|
||||
|
||||
The default trigger mode is `hover`, you can change it to `contextMenu`.
|
||||
|
||||
```css
|
||||
<style>
|
||||
.site-dropdown-context-menu {
|
||||
color: #777;
|
||||
background: #f7f7f7;
|
||||
}
|
||||
```
|
||||
</style>
|
||||
|
||||
<style>
|
||||
[data-theme="dark"] .site-dropdown-context-menu {
|
||||
|
||||
@ -6,7 +6,7 @@
|
||||
|
||||
Customize the dropdown menu via `dropdownRender`. If you don't need the Menu content, use the Popover component directly.
|
||||
|
||||
```css
|
||||
<style>
|
||||
.dropdown-content {
|
||||
background: #fff;
|
||||
box-shadow: 0 3px 6px -4px rgb(0 0 0 / 12%), 0 6px 16px 0 rgb(0 0 0 / 8%),
|
||||
@ -15,7 +15,7 @@ Customize the dropdown menu via `dropdownRender`. If you don't need the Menu con
|
||||
.dropdown-content .ant-dropdown-menu {
|
||||
box-shadow: none;
|
||||
}
|
||||
```
|
||||
</style>
|
||||
|
||||
<style>
|
||||
[data-theme="dark"] .head-example {
|
||||
|
||||
@ -12,7 +12,7 @@ Three columns layout is often used for advanced searching of data table.
|
||||
|
||||
Because the width of label is not fixed, you may need to adjust it by customizing its style.
|
||||
|
||||
```css
|
||||
<style>
|
||||
[data-theme='compact'] .ant-advanced-search-form,
|
||||
.ant-advanced-search-form {
|
||||
padding: 24px !important;
|
||||
@ -30,7 +30,7 @@ Because the width of label is not fixed, you may need to adjust it by customizin
|
||||
.ant-advanced-search-form .ant-form-item-control-wrapper {
|
||||
flex: 1;
|
||||
}
|
||||
```
|
||||
</style>
|
||||
|
||||
<style>
|
||||
#components-form-demo-advanced-search .ant-form {
|
||||
|
||||
@ -10,8 +10,8 @@ Call form method with `Form.useForm`.
|
||||
|
||||
> Note that `useForm` is a [React Hooks](https://reactjs.org/docs/hooks-intro.html) that only works in functional component.
|
||||
|
||||
```css
|
||||
<style>
|
||||
#components-form-demo-control-hooks .ant-btn {
|
||||
margin-right: 8px;
|
||||
}
|
||||
```
|
||||
</style>
|
||||
|
||||
@ -6,8 +6,8 @@
|
||||
|
||||
We recommend use `Form.useForm` to create data control. If you are using class component, you can get it by `ref`.
|
||||
|
||||
```css
|
||||
<style>
|
||||
#components-form-demo-control-ref .ant-btn {
|
||||
margin-right: 8px;
|
||||
}
|
||||
```
|
||||
</style>
|
||||
|
||||
@ -6,7 +6,7 @@
|
||||
|
||||
Add or remove form items dynamically. `add` function support config initial value.
|
||||
|
||||
```css
|
||||
<style>
|
||||
.dynamic-delete-button {
|
||||
position: relative;
|
||||
top: 4px;
|
||||
@ -23,7 +23,7 @@ Add or remove form items dynamically. `add` function support config initial valu
|
||||
cursor: not-allowed;
|
||||
opacity: 0.5;
|
||||
}
|
||||
```
|
||||
</style>
|
||||
|
||||
<style>
|
||||
[data-theme="dark"] .dynamic-delete-button {
|
||||
|
||||
@ -6,7 +6,7 @@
|
||||
|
||||
Use `Form.Provider` to process data between forms. In this case, submit button is in the Modal which is out of Form. You can use `form.submit` to submit form. Besides, we recommend native `<Button htmlType="submit" />` to submit a form.
|
||||
|
||||
```css
|
||||
<style>
|
||||
#components-form-demo-form-context .user {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
@ -19,4 +19,4 @@ Use `Form.Provider` to process data between forms. In this case, submit button i
|
||||
margin-right: 0;
|
||||
margin-left: 8px;
|
||||
}
|
||||
```
|
||||
</style>
|
||||
|
||||
@ -8,8 +8,8 @@
|
||||
|
||||
When user visit a page with a list of items, and want to create a new item. The page can popup a form in Modal, then let user fill in the form to create an item.
|
||||
|
||||
```css
|
||||
<style>
|
||||
.collection-create-form_last-form-item {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
```
|
||||
</style>
|
||||
|
||||
@ -8,7 +8,7 @@
|
||||
|
||||
Normal login form which can contain more elements.
|
||||
|
||||
```css
|
||||
<style>
|
||||
#components-form-demo-normal-login .login-form {
|
||||
max-width: 300px;
|
||||
}
|
||||
@ -21,4 +21,4 @@ Normal login form which can contain more elements.
|
||||
#components-form-demo-normal-login .login-form-button {
|
||||
width: 100%;
|
||||
}
|
||||
```
|
||||
</style>
|
||||
|
||||
@ -6,8 +6,8 @@
|
||||
|
||||
Child elements vertically aligned.
|
||||
|
||||
```css
|
||||
<style>
|
||||
#components-grid-demo-flex-align [class~='ant-row'] {
|
||||
background: rgba(128, 128, 128, 0.08);
|
||||
}
|
||||
```
|
||||
</style>
|
||||
|
||||
@ -6,8 +6,8 @@
|
||||
|
||||
To change the element sort by `order`.
|
||||
|
||||
```css
|
||||
<style>
|
||||
#components-grid-demo-flex-order [class~='ant-row'] {
|
||||
background: rgba(128, 128, 128, 0.08);
|
||||
}
|
||||
```
|
||||
</style>
|
||||
|
||||
@ -8,8 +8,8 @@
|
||||
|
||||
Child elements depending on the value of the `start`, `center`, `end`, `space-between`, `space-around` and `space-evenly`, which are defined in its parent node typesetting mode.
|
||||
|
||||
```css
|
||||
<style>
|
||||
#components-grid-demo-flex [class~='ant-row'] {
|
||||
background: rgba(128, 128, 128, 0.08);
|
||||
}
|
||||
```
|
||||
</style>
|
||||
|
||||
@ -18,12 +18,12 @@ You can use an array to set vertical spacing, `[horizontal, vertical]` `[16, { x
|
||||
|
||||
> vertical gutter was supported after `3.24.0`.
|
||||
|
||||
```css
|
||||
<style>
|
||||
.gutter-box {
|
||||
padding: 8px 0;
|
||||
background: #00a0e9;
|
||||
}
|
||||
```
|
||||
</style>
|
||||
|
||||
<style>
|
||||
[data-theme="dark"] .gutter-box {
|
||||
|
||||
@ -6,7 +6,7 @@
|
||||
|
||||
A simple playground for column count and gutter.
|
||||
|
||||
```css
|
||||
<style>
|
||||
#components-grid-demo-playground [class~='ant-col'] {
|
||||
background: transparent;
|
||||
border: 0;
|
||||
@ -30,7 +30,7 @@ A simple playground for column count and gutter.
|
||||
#components-grid-demo-playground .ant-col {
|
||||
padding: 0;
|
||||
}
|
||||
```
|
||||
</style>
|
||||
|
||||
<style>
|
||||
[data-theme="dark"] #components-grid-demo-playground [class~='ant-col'] > div {
|
||||
|
||||
@ -6,7 +6,7 @@
|
||||
|
||||
Custom preview mask.
|
||||
|
||||
```css
|
||||
<style>
|
||||
.customize-mask {
|
||||
font-size: 20px;
|
||||
opacity: 1;
|
||||
@ -14,4 +14,4 @@ Custom preview mask.
|
||||
.customize-mask .anticon {
|
||||
font-size: 32px;
|
||||
}
|
||||
```
|
||||
</style>
|
||||
|
||||
@ -6,7 +6,7 @@
|
||||
|
||||
Using pre & post tabs example.
|
||||
|
||||
```css
|
||||
<style>
|
||||
.select-before {
|
||||
width: 90px;
|
||||
}
|
||||
@ -22,4 +22,4 @@ Using pre & post tabs example.
|
||||
[data-theme='compact'] .select-after {
|
||||
width: 65px;
|
||||
}
|
||||
```
|
||||
</style>
|
||||
|
||||
@ -10,7 +10,7 @@ Input.Group example.
|
||||
|
||||
Note: You don't need `Col` to control the width in the `compact` mode.
|
||||
|
||||
```css
|
||||
<style>
|
||||
.site-input-group-wrapper .site-input-split {
|
||||
background-color: #fff !important;
|
||||
}
|
||||
@ -32,7 +32,7 @@ Note: You don't need `Col` to control the width in the `compact` mode.
|
||||
.site-input-group-wrapper .ant-input-rtl.site-input-right:focus {
|
||||
border-right-width: 1px;
|
||||
}
|
||||
```
|
||||
</style>
|
||||
|
||||
<style>
|
||||
[data-theme="dark"] .site-input-group-wrapper .site-input-split {
|
||||
|
||||
@ -6,7 +6,7 @@
|
||||
|
||||
You can use the Input in conjunction with [Tooltip](/components/tooltip) component to create a Numeric Input, which can provide a good experience for extra-long content display.
|
||||
|
||||
```css
|
||||
<style>
|
||||
/* to prevent the arrow overflow the popup container,
|
||||
or the height is not enough when content is empty */
|
||||
.numeric-input .ant-tooltip-inner {
|
||||
@ -17,4 +17,4 @@ or the height is not enough when content is empty */
|
||||
.numeric-input .numeric-input-title {
|
||||
font-size: 14px;
|
||||
}
|
||||
```
|
||||
</style>
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
|
||||
修改内容前，请尝试此 Demo 查看样式是否抖动。
|
||||
|
||||
```css
|
||||
<style>
|
||||
#components-layout-demo-custom-trigger .trigger {
|
||||
padding: 0 24px;
|
||||
font-size: 18px;
|
||||
@ -14,4 +14,4 @@
|
||||
#components-layout-demo-custom-trigger .trigger:hover {
|
||||
color: #1890ff;
|
||||
}
|
||||
```
|
||||
</style>
|
||||
|
||||
@ -6,7 +6,7 @@
|
||||
|
||||
If you want to use a customized trigger, you can hide the default one by setting `trigger={null}`.
|
||||
|
||||
```css
|
||||
<style>
|
||||
#components-layout-demo-custom-trigger .trigger {
|
||||
padding: 0 24px;
|
||||
font-size: 18px;
|
||||
@ -28,4 +28,4 @@ If you want to use a customized trigger, you can hide the default one by setting
|
||||
#components-layout-demo-custom-trigger .site-layout .site-layout-background {
|
||||
background: #fff;
|
||||
}
|
||||
```
|
||||
</style>
|
||||
|
||||
@ -6,7 +6,7 @@
|
||||
|
||||
When dealing with long content, a fixed sider can provide a better user experience.
|
||||
|
||||
```css
|
||||
<style>
|
||||
#components-layout-demo-fixed-sider .logo {
|
||||
height: 32px;
|
||||
margin: 16px;
|
||||
@ -15,7 +15,7 @@ When dealing with long content, a fixed sider can provide a better user experien
|
||||
#components-layout-demo-fixed-sider .site-layout .site-layout-background {
|
||||
background: #fff;
|
||||
}
|
||||
```
|
||||
</style>
|
||||
|
||||
<style>
|
||||
[data-theme="dark"] .site-layout .site-layout-background {
|
||||
|
||||
@ -6,7 +6,7 @@
|
||||
|
||||
Fixed Header is generally used to fix the top navigation to facilitate page switching.
|
||||
|
||||
```css
|
||||
<style>
|
||||
#components-layout-demo-fixed .logo {
|
||||
float: left;
|
||||
width: 120px;
|
||||
@ -17,7 +17,7 @@ Fixed Header is generally used to fix the top navigation to facilitate page swit
|
||||
#components-layout-demo-fixed .site-layout .site-layout-background {
|
||||
background: #fff;
|
||||
}
|
||||
```
|
||||
</style>
|
||||
|
||||
<style>
|
||||
[data-theme="dark"] .site-layout .site-layout-background {
|
||||
|
||||
@ -10,7 +10,7 @@ Layout.Sider supports responsive layout.
|
||||
|
||||
> Note: You can get a responsive layout by setting `breakpoint`, the Sider will collapse to the width of `collapsedWidth` when window width is below the `breakpoint`. And a special trigger will appear if the `collapsedWidth` is set to 0.
|
||||
|
||||
```css
|
||||
<style>
|
||||
#components-layout-demo-responsive .logo {
|
||||
height: 32px;
|
||||
margin: 16px;
|
||||
@ -24,7 +24,7 @@ Layout.Sider supports responsive layout.
|
||||
#components-layout-demo-responsive .site-layout-background {
|
||||
background: #fff;
|
||||
}
|
||||
```
|
||||
</style>
|
||||
|
||||
<style>
|
||||
[data-theme="dark"] .site-layout-sub-header-background {
|
||||
|
||||
@ -14,7 +14,7 @@ Generally, the mainnav is placed on the left side of the page, and the secondary
|
||||
|
||||
The level of the aside navigation is scalable. The first, second, and third level navigations could be present more fluently and relevantly, and aside navigation can be fixed, allowing the user to quickly switch and spot the current position, improving the user experience. However, this navigation occupies some horizontal space of the contents.
|
||||
|
||||
```css
|
||||
<style>
|
||||
#components-layout-demo-side .logo {
|
||||
height: 32px;
|
||||
margin: 16px;
|
||||
@ -24,7 +24,7 @@ The level of the aside navigation is scalable. The first, second, and third leve
|
||||
#components-layout-demo-side .site-layout .site-layout-background {
|
||||
background: #fff;
|
||||
}
|
||||
```
|
||||
</style>
|
||||
|
||||
<style>
|
||||
[data-theme="dark"] .site-layout .site-layout-background {
|
||||
|
||||
@ -6,7 +6,7 @@
|
||||
|
||||
Both the top navigation and the sidebar, commonly used in application site.
|
||||
|
||||
```css
|
||||
<style>
|
||||
#components-layout-demo-top-side-2 .logo {
|
||||
float: left;
|
||||
width: 120px;
|
||||
@ -23,4 +23,4 @@ Both the top navigation and the sidebar, commonly used in application site.
|
||||
#components-layout-demo-top-side-2 .site-layout-background {
|
||||
background: #fff;
|
||||
}
|
||||
```
|
||||
</style>
|
||||
|
||||
@ -6,7 +6,7 @@
|
||||
|
||||
Both the top navigation and the sidebar, commonly used in documentation site.
|
||||
|
||||
```css
|
||||
<style>
|
||||
#components-layout-demo-top-side .logo {
|
||||
float: left;
|
||||
width: 120px;
|
||||
@ -23,4 +23,4 @@ Both the top navigation and the sidebar, commonly used in documentation site.
|
||||
#components-layout-demo-top-side .site-layout-background {
|
||||
background: #fff;
|
||||
}
|
||||
```
|
||||
</style>
|
||||
|
||||
@ -12,7 +12,7 @@ Generally, the mainnav is placed at the top of the page, and includes the logo,
|
||||
|
||||
Top-bottom structure is conform with the top-bottom viewing habit, it's a classical navigation pattern of websites. This pattern demonstrates efficiency in the main workarea, while using some vertical space. And because the horizontal space of the navigation is limited, this pattern is not suitable for cases when the first level navigation contains many elements or links.
|
||||
|
||||
```css
|
||||
<style>
|
||||
.site-layout-content {
|
||||
min-height: 280px;
|
||||
padding: 24px;
|
||||
@ -29,7 +29,7 @@ Top-bottom structure is conform with the top-bottom viewing habit, it's a classi
|
||||
float: right;
|
||||
margin: 16px 0 16px 24px;
|
||||
}
|
||||
```
|
||||
</style>
|
||||
|
||||
<style>
|
||||
[data-theme="dark"] .site-layout-content {
|
||||
|
||||
@ -6,8 +6,8 @@
|
||||
|
||||
Load more list with `loadMore` property.
|
||||
|
||||
```css
|
||||
<style>
|
||||
.demo-loadmore-list {
|
||||
min-height: 350px;
|
||||
}
|
||||
```
|
||||
</style>
|
||||
|
||||
@ -6,11 +6,11 @@
|
||||
|
||||
Complex error feedback.
|
||||
|
||||
```css
|
||||
<style>
|
||||
.site-result-demo-error-icon {
|
||||
color: red;
|
||||
}
|
||||
```
|
||||
</style>
|
||||
|
||||
<style>
|
||||
[data-theme="dark"] .site-result-demo-error-icon {
|
||||
|
||||
@ -6,7 +6,7 @@
|
||||
|
||||
The most basic usage.
|
||||
|
||||
```css
|
||||
<style>
|
||||
.code-box-demo {
|
||||
overflow-x: auto;
|
||||
}
|
||||
@ -14,4 +14,4 @@ The most basic usage.
|
||||
.code-box-demo .ant-segmented {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
```
|
||||
</style>
|
||||
|
||||
@ -6,8 +6,8 @@
|
||||
|
||||
Specify the prop name of Option which will be rendered in select box.
|
||||
|
||||
```css
|
||||
<style>
|
||||
.demo-option-label-item > span {
|
||||
margin-right: 6px;
|
||||
}
|
||||
```
|
||||
</style>
|
||||
|
||||
@ -6,7 +6,7 @@
|
||||
|
||||
The height of the input field for the select defaults to 32px. If size is set to large, the height will be 40px, and if set to small, 24px.
|
||||
|
||||
```css
|
||||
<style>
|
||||
.code-box-demo .ant-select {
|
||||
margin: 0 8px 10px 0;
|
||||
}
|
||||
@ -18,4 +18,4 @@ The height of the input field for the select defaults to 32px. If size is set to
|
||||
#components-select-demo-search-box .code-box-demo .ant-select {
|
||||
margin: 0;
|
||||
}
|
||||
```
|
||||
</style>
|
||||
|
||||
@ -6,8 +6,8 @@
|
||||
|
||||
Add status to Select with `status`, which could be `error` or `warning`.
|
||||
|
||||
```css
|
||||
<style>
|
||||
#components-select-demo-status .ant-select {
|
||||
margin: 0;
|
||||
}
|
||||
```
|
||||
</style>
|
||||
|
||||
@ -6,7 +6,7 @@
|
||||
|
||||
You can add an icon beside the slider to make it meaningful.
|
||||
|
||||
```css
|
||||
<style>
|
||||
.icon-wrapper {
|
||||
position: relative;
|
||||
padding: 0px 30px;
|
||||
@ -33,7 +33,7 @@ You can add an icon beside the slider to make it meaningful.
|
||||
.icon-wrapper .anticon:last-child {
|
||||
right: 0;
|
||||
}
|
||||
```
|
||||
</style>
|
||||
|
||||
<style>
|
||||
[data-theme="dark"] .icon-wrapper .anticon {
|
||||
|
||||
@ -6,7 +6,7 @@
|
||||
|
||||
Config item align.
|
||||
|
||||
```css
|
||||
<style>
|
||||
.space-align-container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
@ -23,4 +23,4 @@ Config item align.
|
||||
padding: 32px 8px 16px;
|
||||
background: rgba(150, 150, 150, 0.2);
|
||||
}
|
||||
```
|
||||
</style>
|
||||
|
||||
@ -6,7 +6,7 @@
|
||||
|
||||
Input addon debug.
|
||||
|
||||
```css
|
||||
<style>
|
||||
.select-before {
|
||||
width: 90px;
|
||||
}
|
||||
@ -22,4 +22,4 @@ Input addon debug.
|
||||
[data-theme='compact'] .select-after {
|
||||
width: 65px;
|
||||
}
|
||||
```
|
||||
</style>
|
||||
|
||||
@ -6,7 +6,7 @@
|
||||
|
||||
Nested `Space.Compact`
|
||||
|
||||
```css
|
||||
<style>
|
||||
[data-theme='compact'] .select-before {
|
||||
width: 71px;
|
||||
}
|
||||
@ -14,4 +14,4 @@ Nested `Space.Compact`
|
||||
[data-theme='compact'] .select-after {
|
||||
width: 65px;
|
||||
}
|
||||
```
|
||||
</style>
|
||||
|
||||
@ -6,7 +6,7 @@
|
||||
|
||||
Compact Mode for form component.
|
||||
|
||||
```css
|
||||
<style>
|
||||
.site-space-compact-wrapper .site-input-split {
|
||||
background-color: #fff;
|
||||
}
|
||||
@ -28,4 +28,4 @@ Compact Mode for form component.
|
||||
.site-space-compact-wrapper .site-input-right.ant-input-rtl:focus {
|
||||
border-right-width: 1px;
|
||||
}
|
||||
```
|
||||
</style>
|
||||
|
||||
@ -6,7 +6,7 @@
|
||||
|
||||
Spin in a container.
|
||||
|
||||
```css
|
||||
<style>
|
||||
.example {
|
||||
margin: 20px 0;
|
||||
margin-bottom: 20px;
|
||||
@ -15,7 +15,7 @@ Spin in a container.
|
||||
background: rgba(0, 0, 0, 0.05);
|
||||
border-radius: 4px;
|
||||
}
|
||||
```
|
||||
</style>
|
||||
|
||||
<style>
|
||||
.example {
|
||||
|
||||
@ -6,12 +6,12 @@
|
||||
|
||||
Display statistic data in Card.
|
||||
|
||||
```css
|
||||
<style>
|
||||
.site-statistic-demo-card {
|
||||
padding: 30px;
|
||||
background: #ececec;
|
||||
}
|
||||
```
|
||||
</style>
|
||||
|
||||
<style>
|
||||
[data-theme="dark"] .site-statistic-demo-card {
|
||||
|
||||
@ -6,13 +6,13 @@
|
||||
|
||||
Navigation steps.
|
||||
|
||||
```css
|
||||
<style>
|
||||
[data-theme='compact'] .site-navigation-steps.ant-steps.ant-steps-navigation,
|
||||
.site-navigation-steps.ant-steps.ant-steps-navigation {
|
||||
margin-bottom: 60px;
|
||||
box-shadow: 0px -1px 0 0 #e8e8e8 inset;
|
||||
}
|
||||
```
|
||||
</style>
|
||||
|
||||
<style>
|
||||
[data-theme="dark"] .site-navigation-steps.ant-steps.ant-steps-navigation {
|
||||
|
||||
@ -6,7 +6,7 @@
|
||||
|
||||
Cooperate with the content and buttons, to represent the progress of a process.
|
||||
|
||||
```css
|
||||
<style>
|
||||
.steps-content {
|
||||
min-height: 200px;
|
||||
margin-top: 16px;
|
||||
@ -20,7 +20,7 @@ Cooperate with the content and buttons, to represent the progress of a process.
|
||||
.steps-action {
|
||||
margin-top: 24px;
|
||||
}
|
||||
```
|
||||
</style>
|
||||
|
||||
<style>
|
||||
[data-theme="dark"] .steps-content {
|
||||
|
||||
@ -1,19 +1,17 @@
|
||||
import React from 'react';
|
||||
import { CheckOutlined, CloseOutlined } from '@ant-design/icons';
|
||||
import { Switch } from 'antd';
|
||||
import { Switch, Space } from 'antd';
|
||||
|
||||
const App: React.FC = () => (
|
||||
<>
|
||||
<Space direction="vertical">
|
||||
<Switch checkedChildren="开启" unCheckedChildren="关闭" defaultChecked />
|
||||
<br />
|
||||
<Switch checkedChildren="1" unCheckedChildren="0" />
|
||||
<br />
|
||||
<Switch
|
||||
checkedChildren={<CheckOutlined />}
|
||||
unCheckedChildren={<CloseOutlined />}
|
||||
defaultChecked
|
||||
/>
|
||||
</>
|
||||
</Space>
|
||||
);
|
||||
|
||||
export default App;
|
||||
|
||||
@ -6,7 +6,7 @@
|
||||
|
||||
By using `components`, we can integrate table with [react-dnd](https://github.com/react-dnd/react-dnd) to implement drag sorting function.
|
||||
|
||||
```css
|
||||
<style>
|
||||
#components-table-demo-drag-sorting tr.drop-over-downward td {
|
||||
border-bottom: 2px dashed #1890ff;
|
||||
}
|
||||
@ -14,4 +14,4 @@ By using `components`, we can integrate table with [react-dnd](https://github.co
|
||||
#components-table-demo-drag-sorting tr.drop-over-upward td {
|
||||
border-top: 2px dashed #1890ff;
|
||||
}
|
||||
```
|
||||
</style>
|
||||
|
||||
@ -6,7 +6,7 @@
|
||||
|
||||
Table with editable cells. When work with `shouldCellUpdate`, please take care of [closure](https://github.com/ant-design/ant-design/issues/29243).
|
||||
|
||||
```css
|
||||
<style>
|
||||
.editable-cell {
|
||||
position: relative;
|
||||
}
|
||||
@ -25,4 +25,4 @@ Table with editable cells. When work with `shouldCellUpdate`, please take care o
|
||||
[data-theme='dark'] .editable-row:hover .editable-cell-value-wrap {
|
||||
border: 1px solid #434343;
|
||||
}
|
||||
```
|
||||
</style>
|
||||
|
||||
@ -8,10 +8,10 @@
|
||||
|
||||
Table with editable rows.
|
||||
|
||||
```css
|
||||
<style>
|
||||
.editable-row .ant-form-item-explain {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
font-size: 12px;
|
||||
}
|
||||
```
|
||||
</style>
|
||||
|
||||
@ -6,7 +6,7 @@
|
||||
|
||||
Implement resizable column by integrate with [react-resizable](https://github.com/STRML/react-resizable). When sort needed, you can use [additional mark](https://codesandbox.io/s/zrj8xvyzxx) to prevent resize trigger sort.
|
||||
|
||||
```css
|
||||
<style>
|
||||
#components-table-demo-resizable-column .react-resizable {
|
||||
position: relative;
|
||||
background-clip: padding-box;
|
||||
@ -21,4 +21,4 @@ Implement resizable column by integrate with [react-resizable](https://github.co
|
||||
height: 100%;
|
||||
cursor: col-resize;
|
||||
}
|
||||
```
|
||||
</style>
|
||||
|
||||
@ -6,7 +6,7 @@
|
||||
|
||||
Should be used at the top of container, needs to override styles.
|
||||
|
||||
```css
|
||||
<style>
|
||||
.card-container p {
|
||||
margin: 0;
|
||||
}
|
||||
@ -54,4 +54,4 @@ Should be used at the top of container, needs to override styles.
|
||||
background: #141414;
|
||||
border-color: #141414;
|
||||
}
|
||||
```
|
||||
</style>
|
||||
|
||||
@ -6,9 +6,9 @@
|
||||
|
||||
Use `react-dnd@15+` to make tabs draggable.
|
||||
|
||||
```css
|
||||
<style>
|
||||
.dropping {
|
||||
background: #fefefe;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
```
|
||||
</style>
|
||||
|
||||
@ -6,12 +6,12 @@
|
||||
|
||||
Use react-sticky.
|
||||
|
||||
```css
|
||||
<style>
|
||||
.site-custom-tab-bar {
|
||||
z-index: 1;
|
||||
background: #fff;
|
||||
}
|
||||
```
|
||||
</style>
|
||||
|
||||
<style>
|
||||
[data-theme="dark"] .site-custom-tab-bar {
|
||||
|
||||
@ -6,7 +6,7 @@
|
||||
|
||||
You can add extra actions to the right or left or even both side of Tabs.
|
||||
|
||||
```css
|
||||
<style>
|
||||
.tabs-extra-demo-button {
|
||||
margin-right: 16px;
|
||||
}
|
||||
@ -15,4 +15,4 @@ You can add extra actions to the right or left or even both side of Tabs.
|
||||
margin-right: 0;
|
||||
margin-left: 16px;
|
||||
}
|
||||
```
|
||||
</style>
|
||||
|
||||
@ -6,12 +6,13 @@
|
||||
|
||||
Animating the Tag by using [rc-tween-one](https://github.com/react-component/tween-one).
|
||||
|
||||
```css
|
||||
<style>
|
||||
|
||||
.site-tag-plus {
|
||||
background: #fff;
|
||||
border-style: dashed;
|
||||
}
|
||||
```
|
||||
</style>
|
||||
|
||||
<style>
|
||||
[data-theme="dark"] .site-tag-plus {
|
||||
|
||||
@ -6,24 +6,21 @@
|
||||
|
||||
Generating a set of Tags by array, you can add and remove dynamically.
|
||||
|
||||
```css
|
||||
.site-tag-plus {
|
||||
background: #fff;
|
||||
border-style: dashed;
|
||||
}
|
||||
.edit-tag {
|
||||
user-select: none;
|
||||
}
|
||||
.tag-input {
|
||||
width: 78px;
|
||||
margin-right: 8px;
|
||||
vertical-align: top;
|
||||
}
|
||||
```
|
||||
|
||||
<style>
|
||||
[data-theme="dark"] .site-tag-plus {
|
||||
background: transparent;
|
||||
border-style: dashed;
|
||||
}
|
||||
.site-tag-plus {
|
||||
background: #fff;
|
||||
border-style: dashed;
|
||||
}
|
||||
.edit-tag {
|
||||
user-select: none;
|
||||
}
|
||||
.tag-input {
|
||||
width: 78px;
|
||||
margin-right: 8px;
|
||||
vertical-align: top;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -6,8 +6,8 @@
|
||||
|
||||
Passing custom class to `TimePicker` popup
|
||||
|
||||
```css
|
||||
<style>
|
||||
.myCustomClassName .ant-picker-time-panel-cell-inner {
|
||||
color: red !important;
|
||||
}
|
||||
```
|
||||
</style>
|
||||
|
||||
@ -6,7 +6,7 @@
|
||||
|
||||
Set a node as an icon or other custom element.
|
||||
|
||||
```css
|
||||
<style>
|
||||
.timeline-clock-icon {
|
||||
font-size: 16px;
|
||||
}
|
||||
@ -14,4 +14,4 @@ Set a node as an icon or other custom element.
|
||||
[data-theme='compact'] .timeline-clock-icon {
|
||||
font-size: 14px;
|
||||
}
|
||||
```
|
||||
</style>
|
||||
|
||||
@ -6,8 +6,8 @@
|
||||
|
||||
We preset a series of colorful Tooltip styles for use in different situations.
|
||||
|
||||
```css
|
||||
<style>
|
||||
.ant-tag {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
```
|
||||
</style>
|
||||
|
||||
@ -6,8 +6,8 @@
|
||||
|
||||
Customize render list with Table component.
|
||||
|
||||
```css
|
||||
<style>
|
||||
#components-transfer-demo-table-transfer .ant-table td {
|
||||
background: transparent;
|
||||
}
|
||||
```
|
||||
</style>
|
||||
|
||||
@ -6,11 +6,11 @@
|
||||
|
||||
Searchable Tree.
|
||||
|
||||
```css
|
||||
<style>
|
||||
.site-tree-search-value {
|
||||
color: #f50;
|
||||
}
|
||||
```
|
||||
</style>
|
||||
|
||||
<style>
|
||||
[data-theme="dark"] .site-tree-search-value {
|
||||
|
||||
@ -6,7 +6,7 @@
|
||||
|
||||
By using `itemRender`, we can integrate upload with react-dnd to implement drag sorting of uploadList.
|
||||
|
||||
```css
|
||||
<style>
|
||||
#components-upload-demo-drag-sorting .ant-upload-draggable-list-item {
|
||||
border-top: 2px dashed rgba(0, 0, 0, 0);
|
||||
border-bottom: 2px dashed rgba(0, 0, 0, 0);
|
||||
@ -17,4 +17,4 @@ By using `itemRender`, we can integrate upload with react-dnd to implement drag
|
||||
#components-upload-demo-drag-sorting .ant-upload-draggable-list-item.drop-over-upward {
|
||||
border-top-color: #1890ff;
|
||||
}
|
||||
```
|
||||
</style>
|
||||
|
||||
@ -6,7 +6,7 @@
|
||||
|
||||
If uploaded file is a picture, the thumbnail can be shown. `IE8/9` do not support local thumbnail show. Please use `thumbUrl` instead.
|
||||
|
||||
```css
|
||||
<style>
|
||||
/* tile uploaded pictures */
|
||||
.upload-list-inline .ant-upload-list-item {
|
||||
float: left;
|
||||
@ -17,4 +17,4 @@ If uploaded file is a picture, the thumbnail can be shown. `IE8/9` do not suppor
|
||||
.ant-upload-rtl.upload-list-inline .ant-upload-list-item {
|
||||
float: right;
|
||||
}
|
||||
```
|
||||
</style>
|
||||
|
||||
@ -89,5 +89,5 @@ Text will be difficult to read if it is too close to the background color. To ac
|
||||
The construction of the font system is the first step to achieve "the beauty of dynamic order". In practical design, we have three more advanced tips：
|
||||
|
||||
1. **Establish a systematic design thinking:** In the UI design of the same system, a systematic design thinking should be established first. The primary, secondary, auxiliary, title, display, and other types of fonts are planned in a unified manner. And then make any necessary fine tuning according to the specific situation. The establishment of a systematic design approach helps to increase the consistency of horizontal font landing, improve the cost-effectiveness of font uses, and avoid unnecessary style waste.
|
||||
1. **Less is more：**Visual design should be achieved with as few styles as possible. Avoid meaningless use of large numbers of font scales, colors, and font weight to emphasize visual or contrast relationships.
|
||||
1. **Try to make font scale dance like a note** When you need to expand any gap, you can try to choose the different sizes of the font from the font scale table, which will create a subtle rhythm between the word scales.
|
||||
2. **Less is more：** Visual design should be achieved with as few styles as possible. Avoid meaningless use of large numbers of font scales, colors, and font weight to emphasize visual or contrast relationships.
|
||||
3. **Try to make font scale dance like a note** When you need to expand any gap, you can try to choose the different sizes of the font from the font scale table, which will create a subtle rhythm between the word scales.
|
||||
|
||||
@ -86,6 +86,6 @@ Ant Design 受到 5 音阶以及自然律的启发定义了 10 个不同尺寸
|
||||
|
||||
字体系统的构建，是「动态秩序之美」的第一步。在实际的设计中，我们还有三点建议：
|
||||
|
||||
1. **建立体系化的设计思路：**在同一个系统的 UI 设计中先建立体系化的设计思路，对主、次、辅助、标题、展示等类别的字体做统一的规划，再落地到具体场景中进行微调。建立体系化的设计思路有助于强化横向字体落地的一致性，提高字体应用的性价比，减少不必要的样式浪费。
|
||||
1. **少即是多：**在视觉展现上能够用尽量少的样式去实现设计目的。避免毫无意义的使用大量字阶、颜色、字重强调视觉重点或对比关系。
|
||||
1. **尝试让字体像音符一样跳跃：**在需要拉开差距的时候可以尝试在字阶表中跳跃地选择字体大小，会令字阶之间产生一种微妙的韵律感。
|
||||
1. **建立体系化的设计思路：** 在同一个系统的 UI 设计中先建立体系化的设计思路，对主、次、辅助、标题、展示等类别的字体做统一的规划，再落地到具体场景中进行微调。建立体系化的设计思路有助于强化横向字体落地的一致性，提高字体应用的性价比，减少不必要的样式浪费。
|
||||
2. **少即是多：** 在视觉展现上能够用尽量少的样式去实现设计目的。避免毫无意义的使用大量字阶、颜色、字重强调视觉重点或对比关系。
|
||||
3. **尝试让字体像音符一样跳跃：** 在需要拉开差距的时候可以尝试在字阶表中跳跃地选择字体大小，会令字阶之间产生一种微妙的韵律感。
|
||||
|
||||
Loading…
Reference in New Issue
Block a user