test/amis
1
0
Fork 0
mirror of https://gitee.com/baidu/amis.git synced 2024-12-04 21:08:55 +08:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

Merge pull request #7624 from allenve/master

Browse Source 
feat: inputCity 支持itemClassName
This commit is contained in:
Allen 2023-07-31 10:02:59 +08:00 committed by GitHub
commit 7ace91053f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 175 additions and 96 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
docs/zh-CN/components/form/input-city.md
View File

@ -71,6 +71,27 @@ order: 10
} }
``` ```
## 配置下拉框样式
可以通过 `itemClassName` 指定下拉框样式，如配置最小宽度
```schema: scope="body"
{
"type": "form",
"debug": true,
"api": "/api/mock2/form/saveForm",
"body": [
{
"name": "city",
"type": "input-city",
"label": "城市",
"itemClassName": "min-w-xs",
"searchable": true
}
]
}
```
## 属性表 ## 属性表
当做选择器表单项使用时，除了支持 [普通表单项属性表](./formitem#%E5%B1%9E%E6%80%A7%E8%A1%A8) 中的配置以外，还支持下面一些配置 当做选择器表单项使用时，除了支持 [普通表单项属性表](./formitem#%E5%B1%9E%E6%80%A7%E8%A1%A8) 中的配置以外，还支持下面一些配置

20
packages/amis-ui/scss/_variables.scss
View File

@ -279,6 +279,26 @@ $widths: map-merge(
) )
) !default; ) !default;
$minWidths: (
none: none,
0: 0rem,
xs: 20rem,
sm: 24rem,
md: 28rem,
lg: 32rem,
xl: 36rem,
2xl: 42rem,
3xl: 48rem,
4xl: 56rem,
5xl: 64rem,
6xl: 72rem,
7xl: 80rem,
full: 100%,
min: min-content,
max: max-content,
prose: 65ch
) !default;
$maxWidths: ( $maxWidths: (
none: none, none: none,
0: 0rem, 0: 0rem,

199
packages/amis-ui/scss/helper/sizing/_width.md
View File

@ -2,97 +2,108 @@
title: Width title: Width
--- ---
| Class | Properties | | Class | Properties |
| ----------- | ------------------------ | | ----------- | ---------------------- |
| w-px | width: 0.0625rem | | w-px | width: 0.0625rem |
| w-0 | width: 0 | | w-0 | width: 0 |
| w-none | width: 0 | | w-none | width: 0 |
| w-0\.5 | width: 0.125rem | | w-0\.5 | width: 0.125rem |
| w-1 | width: 0.25rem | | w-1 | width: 0.25rem |
| w-1\.5 | width: 0.375rem | | w-1\.5 | width: 0.375rem |
| w-2 | width: 0.5rem | | w-2 | width: 0.5rem |
| w-2\.5 | width: 0.625rem | | w-2\.5 | width: 0.625rem |
| w-3 | width: 0.75rem | | w-3 | width: 0.75rem |
| w-3\.5 | width: 0.875rem | | w-3\.5 | width: 0.875rem |
| w-4 | width: 1rem | | w-4 | width: 1rem |
| w-5 | width: 1.25rem | | w-5 | width: 1.25rem |
| w-6 | width: 1.5rem | | w-6 | width: 1.5rem |
| w-7 | width: 1.75rem | | w-7 | width: 1.75rem |
| w-8 | width: 2rem | | w-8 | width: 2rem |
| w-9 | width: 2.25rem | | w-9 | width: 2.25rem |
| w-10 | width: 2.5rem | | w-10 | width: 2.5rem |
| w-11 | width: 2.75rem | | w-11 | width: 2.75rem |
| w-12 | width: 3rem | | w-12 | width: 3rem |
| w-14 | width: 3.5rem | | w-14 | width: 3.5rem |
| w-16 | width: 4rem | | w-16 | width: 4rem |
| w-18 | width: 4.5rem | | w-18 | width: 4.5rem |
| w-20 | width: 5rem | | w-20 | width: 5rem |
| w-24 | width: 6rem | | w-24 | width: 6rem |
| w-28 | width: 7rem | | w-28 | width: 7rem |
| w-32 | width: 8rem | | w-32 | width: 8rem |
| w-36 | width: 9rem | | w-36 | width: 9rem |
| w-40 | width: 10rem | | w-40 | width: 10rem |
| w-44 | width: 11rem | | w-44 | width: 11rem |
| w-48 | width: 12rem | | w-48 | width: 12rem |
| w-52 | width: 13rem | | w-52 | width: 13rem |
| w-56 | width: 14rem | | w-56 | width: 14rem |
| w-60 | width: 15rem | | w-60 | width: 15rem |
| w-64 | width: 16rem | | w-64 | width: 16rem |
| w-72 | width: 18rem | | w-72 | width: 18rem |
| w-80 | width: 20rem | | w-80 | width: 20rem |
| w-96 | width: 24rem | | w-96 | width: 24rem |
| w-auto | width: auto | | w-auto | width: auto |
| w-1x | width: 1em | | w-1x | width: 1em |
| w-2x | width: 2em | | w-2x | width: 2em |
| w-3x | width: 3em | | w-3x | width: 3em |
| w-1\/2 | width: 50% | | w-1\/2 | width: 50% |
| w-1\/3 | width: 33.333333% | | w-1\/3 | width: 33.333333% |
| w-2\/3 | width: 66.666667% | | w-2\/3 | width: 66.666667% |
| w-1\/4 | width: 25% | | w-1\/4 | width: 25% |
| w-2\/4 | width: 50% | | w-2\/4 | width: 50% |
| w-3\/4 | width: 75% | | w-3\/4 | width: 75% |
| w-1\/5 | width: 20% | | w-1\/5 | width: 20% |
| w-2\/5 | width: 40% | | w-2\/5 | width: 40% |
| w-3\/5 | width: 60% | | w-3\/5 | width: 60% |
| w-4\/5 | width: 80% | | w-4\/5 | width: 80% |
| w-1\/6 | width: 16.666667% | | w-1\/6 | width: 16.666667% |
| w-2\/6 | width: 33.333333% | | w-2\/6 | width: 33.333333% |
| w-3\/6 | width: 50% | | w-3\/6 | width: 50% |
| w-4\/6 | width: 66.666667% | | w-4\/6 | width: 66.666667% |
| w-5\/6 | width: 83.333333% | | w-5\/6 | width: 83.333333% |
| w-1\/12 | width: 8.333333% | | w-1\/12 | width: 8.333333% |
| w-2\/12 | width: 16.666667% | | w-2\/12 | width: 16.666667% |
| w-3\/12 | width: 25% | | w-3\/12 | width: 25% |
| w-4\/12 | width: 33.333333% | | w-4\/12 | width: 33.333333% |
| w-5\/12 | width: 41.666667% | | w-5\/12 | width: 41.666667% |
| w-6\/12 | width: 50% | | w-6\/12 | width: 50% |
| w-7\/12 | width: 58.333333% | | w-7\/12 | width: 58.333333% |
| w-8\/12 | width: 66.666667% | | w-8\/12 | width: 66.666667% |
| w-9\/12 | width: 75% | | w-9\/12 | width: 75% |
| w-10\/12 | width: 83.333333% | | w-10\/12 | width: 83.333333% |
| w-11\/12 | width: 91.666667% | | w-11\/12 | width: 91.666667% |
| w-full | width: 100% | | w-full | width: 100% |
| w-screen | width: 100vw | | w-screen | width: 100vw |
| w-min | width: min-content | | min-w-none | min-width: none |
| w-max | width: max-content | | min-w-0 | min-width: 0rem |
| min-w-0 | min-width: 0px | | min-w-xs | min-width: 20rem |
| min-w-full | min-width: 100% | | min-w-sm | min-width: 24rem |
| min-w-min | min-width: min-content | | min-w-md | min-width: 28rem |
| min-w-max | min-width: max-content | | min-w-lg | min-width: 32rem |
| max-w-none | max-width: none | | min-w-xl | min-width: 36rem |
| max-w-0 | max-width: 0rem | | min-w-2xl | min-width: 42rem |
| max-w-xs | max-width: 20rem | | min-w-3xl | min-width: 48rem |
| max-w-sm | max-width: 24rem | | min-w-4xl | min-width: 56rem |
| max-w-md | max-width: 28rem | | min-w-5xl | min-width: 64rem |
| max-w-lg | max-width: 32rem | | min-w-6xl | min-width: 72rem |
| max-w-xl | max-width: 36rem | | min-w-7xl | min-width: 80rem |
| max-w-2xl | max-width: 42rem | | min-w-full | min-width: 100% |
| max-w-3xl | max-width: 48rem | | min-w-min | min-width: min-content |
| max-w-4xl | max-width: 56rem | | min-w-max | min-width: max-content |
| max-w-5xl | max-width: 64rem | | min-w-prose | min-width: 65ch |
| max-w-6xl | max-width: 72rem | | max-w-none | max-width: none |
| max-w-7xl | max-width: 80rem | | max-w-0 | max-width: 0rem |
| max-w-full | max-width: 100% | | max-w-xs | max-width: 20rem |
| max-w-min | max-width: min-content | | max-w-sm | max-width: 24rem |
| max-w-max | max-width: max-content | | max-w-md | max-width: 28rem |
| max-w-prose | max-width: 65ch | | max-w-lg | max-width: 32rem |
| max-w-xl | max-width: 36rem |
| max-w-2xl | max-width: 42rem |
| max-w-3xl | max-width: 48rem |
| max-w-4xl | max-width: 56rem |
| max-w-5xl | max-width: 64rem |
| max-w-6xl | max-width: 72rem |
| max-w-7xl | max-width: 80rem |
| max-w-full | max-width: 100% |
| max-w-min | max-width: min-content |
| max-w-max | max-width: max-content |
| max-w-prose | max-width: 65ch |

16
packages/amis-ui/scss/helper/sizing/_width.scss
View File

@ -115,6 +115,21 @@ title: Width
*/ */
@mixin min-width-sizing($map: $minWidths, $prefix: '.') {
@each $name, $value in $map {
@if $name == default {
#{$prefix}min-w {
min-width: $value;
}
} @else {
#{$prefix}min-w-#{'' + selector-escape($name)} {
min-width: $value;
}
}
}
}
@mixin max-width-sizing($map: $maxWidths, $prefix: '.') { @mixin max-width-sizing($map: $maxWidths, $prefix: '.') {
@each $name, $value in $map { @each $name, $value in $map {
@if $name == default { @if $name == default {
@ -148,6 +163,7 @@ title: Width
} }
@include max-width-sizing($maxWidths, $prefix); @include max-width-sizing($maxWidths, $prefix);
@include min-width-sizing($minWidths, $prefix);
} }
@include make-widths(); @include make-widths();

15
packages/amis/src/renderers/Form/InputCity.tsx
View File

@ -62,6 +62,11 @@ export interface InputCityControlSchema
* 是否显示搜索框 * 是否显示搜索框
*/ */
searchable?: boolean; searchable?: boolean;
/**
* 下拉框className
*/
itemClassName?: string;
} }
export interface CityPickerProps export interface CityPickerProps
@ -413,7 +418,8 @@ export class CityPicker extends React.Component<
searchable, searchable,
translate: __, translate: __,
loadingConfig, loadingConfig,
popOverContainer popOverContainer,
itemClassName
} = this.props; } = this.props;
const {provinceCode, cityCode, districtCode, street, db} = this.state; const {provinceCode, cityCode, districtCode, street, db} = this.state;
@ -421,6 +427,7 @@ export class CityPicker extends React.Component<
return db ? ( return db ? (
<div className={cx('CityPicker', className)}> <div className={cx('CityPicker', className)}>
<Select <Select
className={cx(itemClassName)}
searchable={searchable} searchable={searchable}
disabled={disabled} disabled={disabled}
options={db.province.map(item => ({ options={db.province.map(item => ({
@ -434,6 +441,7 @@ export class CityPicker extends React.Component<
{allowCity && db.city[provinceCode] && db.city[provinceCode].length ? ( {allowCity && db.city[provinceCode] && db.city[provinceCode].length ? (
<Select <Select
className={cx(itemClassName)}
searchable={searchable} searchable={searchable}
disabled={disabled} disabled={disabled}
options={db.city[provinceCode].map(item => ({ options={db.city[provinceCode].map(item => ({
@ -450,6 +458,7 @@ export class CityPicker extends React.Component<
allowDistrict && allowDistrict &&
(db.district[provinceCode]?.[cityCode] as any)?.length ? ( (db.district[provinceCode]?.[cityCode] as any)?.length ? (
<Select <Select
className={cx(itemClassName)}
searchable={searchable} searchable={searchable}
disabled={disabled} disabled={disabled}
options={(db.district[provinceCode][cityCode] as Array<number>).map( options={(db.district[provinceCode][cityCode] as Array<number>).map(
@ -568,7 +577,8 @@ export class LocationControl extends React.Component<LocationControlProps> {
searchable, searchable,
env, env,
useMobileUI, useMobileUI,
popOverContainer popOverContainer,
itemClassName
} = this.props; } = this.props;
const mobileUI = useMobileUI && isMobile(); const mobileUI = useMobileUI && isMobile();
return mobileUI ? ( return mobileUI ? (
@ -586,6 +596,7 @@ export class LocationControl extends React.Component<LocationControlProps> {
/> />
) : ( ) : (
<ThemedCity <ThemedCity
itemClassName={itemClassName}
popOverContainer={popOverContainer || env?.getModalContainer} popOverContainer={popOverContainer || env?.getModalContainer}
searchable={searchable} searchable={searchable}
value={value} value={value}