mirror of
https://gitee.com/ant-design/ant-design.git
synced 2024-11-30 19:19:26 +08:00
style: Skeleton.Button square shape style (#36123)
* refactor: Skeleton.Button square shape style the Button's square shape style is same as Avator's that its width is equal to height, and the old square shape become the default shape that its width is double size to height. * fix: `ButtonShapeType` type annotation
This commit is contained in:
Alan Deng
GitHub
parent
ebc7527de3
commit
02a0e6f160
@ -6,7 +6,7 @@ export interface SkeletonElementProps {
|
||||
className?: string;
|
||||
style?: React.CSSProperties;
|
||||
size?: 'large' | 'small' | 'default' | number;
|
||||
shape?: 'circle' | 'square' | 'round';
|
||||
shape?: 'circle' | 'square' | 'round' | 'default';
|
||||
active?: boolean;
|
||||
}
|
||||
|
||||
|
||||
@ -114,7 +114,7 @@ Array [
|
||||
class="ant-skeleton ant-skeleton-element"
|
||||
>
|
||||
<span
|
||||
class="ant-skeleton-button ant-skeleton-button-square"
|
||||
class="ant-skeleton-button"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
@ -148,7 +148,7 @@ Array [
|
||||
class="ant-skeleton ant-skeleton-element"
|
||||
>
|
||||
<span
|
||||
class="ant-skeleton-button ant-skeleton-button-square"
|
||||
class="ant-skeleton-button"
|
||||
/>
|
||||
</div>,
|
||||
<br />,
|
||||
@ -387,6 +387,25 @@ Array [
|
||||
>
|
||||
<input
|
||||
checked=""
|
||||
class="ant-radio-button-input"
|
||||
type="radio"
|
||||
value="default"
|
||||
/>
|
||||
<span
|
||||
class="ant-radio-button-inner"
|
||||
/>
|
||||
</span>
|
||||
<span>
|
||||
Default
|
||||
</span>
|
||||
</label>
|
||||
<label
|
||||
class="ant-radio-button-wrapper ant-radio-button-wrapper-in-form-item"
|
||||
>
|
||||
<span
|
||||
class="ant-radio-button"
|
||||
>
|
||||
<input
|
||||
class="ant-radio-button-input"
|
||||
type="radio"
|
||||
value="square"
|
||||
|
||||
@ -114,7 +114,7 @@ Array [
|
||||
class="ant-skeleton ant-skeleton-element"
|
||||
>
|
||||
<span
|
||||
class="ant-skeleton-button ant-skeleton-button-square"
|
||||
class="ant-skeleton-button"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
@ -148,7 +148,7 @@ Array [
|
||||
class="ant-skeleton ant-skeleton-element"
|
||||
>
|
||||
<span
|
||||
class="ant-skeleton-button ant-skeleton-button-square"
|
||||
class="ant-skeleton-button"
|
||||
/>
|
||||
</div>,
|
||||
<br />,
|
||||
@ -387,6 +387,25 @@ Array [
|
||||
>
|
||||
<input
|
||||
checked=""
|
||||
class="ant-radio-button-input"
|
||||
type="radio"
|
||||
value="default"
|
||||
/>
|
||||
<span
|
||||
class="ant-radio-button-inner"
|
||||
/>
|
||||
</span>
|
||||
<span>
|
||||
Default
|
||||
</span>
|
||||
</label>
|
||||
<label
|
||||
class="ant-radio-button-wrapper ant-radio-button-wrapper-in-form-item"
|
||||
>
|
||||
<span
|
||||
class="ant-radio-button"
|
||||
>
|
||||
<input
|
||||
class="ant-radio-button-input"
|
||||
type="radio"
|
||||
value="square"
|
||||
|
||||
@ -19,14 +19,14 @@ import { Divider, Form, Radio, Skeleton, Space, Switch } from 'antd';
|
||||
import React, { useState } from 'react';
|
||||
|
||||
type SizeType = 'default' | 'small' | 'large';
|
||||
type ButtonShapeType = 'circle' | 'square' | 'round';
|
||||
type ButtonShapeType = 'circle' | 'square' | 'round' | 'default';
|
||||
type AvatarShapeType = 'circle' | 'square';
|
||||
|
||||
const App: React.FC = () => {
|
||||
const [active, setActive] = useState(false);
|
||||
const [block, setBlock] = useState(false);
|
||||
const [size, setSize] = useState<SizeType>('default');
|
||||
const [buttonShape, setButtonShape] = useState<ButtonShapeType>('square');
|
||||
const [buttonShape, setButtonShape] = useState<ButtonShapeType>('default');
|
||||
const [avatarShape, setAvatarShape] = useState<AvatarShapeType>('circle');
|
||||
|
||||
const handleActiveChange = (checked: boolean) => {
|
||||
@ -82,6 +82,7 @@ const App: React.FC = () => {
|
||||
</Form.Item>
|
||||
<Form.Item label="Button Shape">
|
||||
<Radio.Group value={buttonShape} onChange={handleShapeButton}>
|
||||
<Radio.Button value="default">Default</Radio.Button>
|
||||
<Radio.Button value="square">Square</Radio.Button>
|
||||
<Radio.Button value="round">Round</Radio.Button>
|
||||
<Radio.Button value="circle">Circle</Radio.Button>
|
||||
|
||||
@ -55,7 +55,7 @@ Provide a placeholder while you wait for content to load, or to visualise conten
|
||||
| --- | --- | --- | --- | --- |
|
||||
| active | Show animation effect | boolean | false | |
|
||||
| block | Option to fit button width to its parent width | boolean | false | 4.17.0 |
|
||||
| shape | Set the shape of button | `circle` \| `round` \| `default` | - | |
|
||||
| shape | Set the shape of button | `circle` \| `round` \| `square` \| `default` | - | |
|
||||
| size | Set the size of button | `large` \| `small` \| `default` | - | |
|
||||
|
||||
### SkeletonInputProps
|
||||
|
||||
@ -52,12 +52,12 @@ cover: https://gw.alipayobjects.com/zos/alicdn/KpcciCJgv/Skeleton.svg
|
||||
|
||||
### SkeletonButtonProps
|
||||
|
||||
| 属性 | 说明 | 类型 | 默认值 | 版本 |
|
||||
| ------ | ------------------------------ | -------------------------------- | ------ | ------ |
|
||||
| active | 是否展示动画效果 | boolean | false | |
|
||||
| block | 将按钮宽度调整为其父宽度的选项 | boolean | false | 4.17.0 |
|
||||
| shape | 指定按钮的形状 | `circle` \| `round` \| `default` | - | |
|
||||
| size | 设置按钮的大小 | `large` \| `small` \| `default` | - | |
|
||||
| 属性 | 说明 | 类型 | 默认值 | 版本 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| active | 是否展示动画效果 | boolean | false | |
|
||||
| block | 将按钮宽度调整为其父宽度的选项 | boolean | false | 4.17.0 |
|
||||
| shape | 指定按钮的形状 | `circle` \| `round` \| `square` \| `default` | - | |
|
||||
| size | 设置按钮的大小 | `large` \| `small` \| `default` | - | |
|
||||
|
||||
### SkeletonInputProps
|
||||
|
||||
|
||||
@ -229,6 +229,11 @@
|
||||
min-width: @size * 2;
|
||||
.skeleton-element-common-size(@size);
|
||||
|
||||
&.@{skeleton-button-prefix-cls}-square {
|
||||
width: @size;
|
||||
min-width: @size;
|
||||
}
|
||||
|
||||
&.@{skeleton-button-prefix-cls}-circle {
|
||||
width: @size;
|
||||
min-width: @size;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user