mirror of
https://gitee.com/baidu/amis.git
synced 2024-11-30 02:48:55 +08:00
移动端输入框样式优化 (#3268)
This commit is contained in:
张涛
GitHub
parent
dc19abca18
commit
80b3e8fdec
@ -231,3 +231,21 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 移动端样式调整 */
|
||||
@include media-breakpoint-down(sm) {
|
||||
.#{$ns}Modal {
|
||||
.#{$ns}Modal-footer {
|
||||
display: flex;
|
||||
|
||||
> .#{$ns}Button {
|
||||
flex: 1;
|
||||
height: px2rem(44px);
|
||||
|
||||
&:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -182,3 +182,47 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 移动端样式调整 */
|
||||
@include media-breakpoint-down(sm) {
|
||||
.#{$ns}Panel--form {
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
|
||||
margin: 0 calc(var(--Panel-bodyPadding) * -1)
|
||||
calc(var(--Panel-marginBottom) / 2);
|
||||
|
||||
.#{$ns}Panel-body {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
> .#{$ns}Panel-heading {
|
||||
background: none;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
|
||||
.#{$ns}Panel-title {
|
||||
padding-left: var(--Panel-bodyPadding);
|
||||
border-left: px2rem(3px) solid var(--primary);
|
||||
}
|
||||
}
|
||||
|
||||
.#{$ns}Panel-footerWrap {
|
||||
padding-bottom: var(--Panel-bodyPadding);
|
||||
}
|
||||
|
||||
.#{$ns}Panel-footer {
|
||||
border-top: none;
|
||||
display: flex;
|
||||
padding: 0 var(--Panel-bodyPadding);
|
||||
|
||||
> .#{$ns}Button {
|
||||
flex: 1;
|
||||
|
||||
&:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -406,3 +406,125 @@
|
||||
.#{$ns}Form-column-10 > .#{$ns}Form-item {
|
||||
width: 10%;
|
||||
}
|
||||
|
||||
/* 移动端样式调整 */
|
||||
@include media-breakpoint-down(sm) {
|
||||
.#{$ns}Form {
|
||||
.#{$ns}Form-item {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 0;
|
||||
padding: var(--Form-item-gap) 0;
|
||||
position: relative;
|
||||
|
||||
&::after {
|
||||
position: absolute;
|
||||
box-sizing: border-box;
|
||||
content: ' ';
|
||||
pointer-events: none;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
border-bottom: var(--Form-input-borderWidth) solid var(--borderColor);
|
||||
transform: scaleY(0.5);
|
||||
}
|
||||
|
||||
.#{$ns}InputGroup-addOn,
|
||||
.#{$ns}TextControl-addOn {
|
||||
border: none;
|
||||
}
|
||||
|
||||
> .#{$ns}Form-label {
|
||||
flex: 0 0 30%;
|
||||
max-width: 30%;
|
||||
min-height: 1px;
|
||||
text-align: left;
|
||||
padding-right: calc(var(--Form--horizontal-gutterWidth) / 2);
|
||||
overflow-wrap: break-word;
|
||||
margin-right: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.#{$ns}Form-value,
|
||||
.#{$ns}Form-control {
|
||||
flex: 1;
|
||||
flex-wrap: wrap;
|
||||
|
||||
&.is-disabled > .#{$ns}TextControl-input {
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.#{$ns}Form-hint,
|
||||
.#{$ns}Form-remark,
|
||||
.#{$ns}Form-static,
|
||||
.#{$ns}Form-group--hor .#{$ns}Form-item,
|
||||
.#{$ns}SwitchControl,
|
||||
.#{$ns}CheckboxControl,
|
||||
.#{$ns}RadiosControl,
|
||||
.#{$ns}CheckboxesControl {
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.#{$ns}Form-hint {
|
||||
margin-left: 0;
|
||||
color: var(--text--muted-color);
|
||||
}
|
||||
|
||||
.#{$ns}Form-static {
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.#{$ns}InputGroup {
|
||||
.#{$ns}Select,
|
||||
.#{$ns}InputGroup-btn .#{$ns}Button {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
|
||||
.#{$ns}Form-group--hor .#{$ns}Form-item .#{$ns}Button {
|
||||
margin-bottom: var(--gap-xs);
|
||||
}
|
||||
|
||||
.#{$ns}TextareaControl > textarea,
|
||||
.#{$ns}Form-control > .#{$ns}TextControl-input,
|
||||
.#{$ns}TextControl.is-focused > .#{$ns}TextControl-input {
|
||||
border: none;
|
||||
padding: 0 var(--Form-input-paddingX) 0 0;
|
||||
box-shadow: none;
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&.active {
|
||||
border: none;
|
||||
outline: none;
|
||||
outline-style: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.#{$ns}Form-groupColumn {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.#{$ns}Divider {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.#{$ns}Tabs-pane {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
> .#{$ns}Form-item {
|
||||
&:last-child::after,
|
||||
&:last-of-type::after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.#{$ns}Form-item .#{$ns}Form-groupColumn > .#{$ns}Form-item {
|
||||
padding-bottom: var(--Form-input-paddingX);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -519,7 +519,8 @@ export class FormItemWrap extends React.Component<FormItemProps> {
|
||||
renderDescription,
|
||||
hint,
|
||||
data,
|
||||
showErrorMsg
|
||||
showErrorMsg,
|
||||
useMobileUI
|
||||
} = props;
|
||||
|
||||
// 强制不渲染 label 的话
|
||||
@ -575,6 +576,7 @@ export class FormItemWrap extends React.Component<FormItemProps> {
|
||||
type: 'remark',
|
||||
icon: labelRemark.icon || 'warning-mark',
|
||||
tooltip: labelRemark,
|
||||
useMobileUI,
|
||||
className: cx(`Form-labelRemark`),
|
||||
container: props.popOverContainer
|
||||
? props.popOverContainer
|
||||
@ -608,6 +610,7 @@ export class FormItemWrap extends React.Component<FormItemProps> {
|
||||
icon: remark.icon || 'warning-mark',
|
||||
tooltip: remark,
|
||||
className: cx(`Form-remark`),
|
||||
useMobileUI,
|
||||
container: props.popOverContainer
|
||||
? props.popOverContainer
|
||||
: env && env.getModalContainer
|
||||
@ -664,7 +667,8 @@ export class FormItemWrap extends React.Component<FormItemProps> {
|
||||
renderDescription,
|
||||
hint,
|
||||
data,
|
||||
showErrorMsg
|
||||
showErrorMsg,
|
||||
useMobileUI
|
||||
} = props;
|
||||
|
||||
description = description || desc;
|
||||
@ -700,6 +704,7 @@ export class FormItemWrap extends React.Component<FormItemProps> {
|
||||
icon: labelRemark.icon || 'warning-mark',
|
||||
tooltip: labelRemark,
|
||||
className: cx(`Form-lableRemark`),
|
||||
useMobileUI,
|
||||
container: props.popOverContainer
|
||||
? props.popOverContainer
|
||||
: env && env.getModalContainer
|
||||
@ -725,6 +730,7 @@ export class FormItemWrap extends React.Component<FormItemProps> {
|
||||
icon: remark.icon || 'warning-mark',
|
||||
className: cx(`Form-remark`),
|
||||
tooltip: remark,
|
||||
useMobileUI,
|
||||
container:
|
||||
env && env.getModalContainer
|
||||
? env.getModalContainer
|
||||
@ -779,7 +785,8 @@ export class FormItemWrap extends React.Component<FormItemProps> {
|
||||
renderLabel,
|
||||
renderDescription,
|
||||
data,
|
||||
showErrorMsg
|
||||
showErrorMsg,
|
||||
useMobileUI
|
||||
} = props;
|
||||
|
||||
description = description || desc;
|
||||
@ -815,6 +822,7 @@ export class FormItemWrap extends React.Component<FormItemProps> {
|
||||
icon: labelRemark.icon || 'warning-mark',
|
||||
tooltip: labelRemark,
|
||||
className: cx(`Form-lableRemark`),
|
||||
useMobileUI,
|
||||
container: props.popOverContainer
|
||||
? props.popOverContainer
|
||||
: env && env.getModalContainer
|
||||
@ -841,6 +849,7 @@ export class FormItemWrap extends React.Component<FormItemProps> {
|
||||
icon: remark.icon || 'warning-mark',
|
||||
className: cx(`Form-remark`),
|
||||
tooltip: remark,
|
||||
useMobileUI,
|
||||
container: props.popOverContainer
|
||||
? props.popOverContainer
|
||||
: env && env.getModalContainer
|
||||
@ -897,7 +906,8 @@ export class FormItemWrap extends React.Component<FormItemProps> {
|
||||
renderDescription,
|
||||
hint,
|
||||
data,
|
||||
showErrorMsg
|
||||
showErrorMsg,
|
||||
useMobileUI
|
||||
} = props;
|
||||
|
||||
description = description || desc;
|
||||
@ -932,6 +942,7 @@ export class FormItemWrap extends React.Component<FormItemProps> {
|
||||
icon: labelRemark.icon || 'warning-mark',
|
||||
tooltip: labelRemark,
|
||||
className: cx(`Form-lableRemark`),
|
||||
useMobileUI,
|
||||
container: props.popOverContainer
|
||||
? props.popOverContainer
|
||||
: env && env.getModalContainer
|
||||
|
||||
@ -2,11 +2,12 @@ import React from 'react';
|
||||
import {Renderer, RendererProps} from '../factory';
|
||||
import {Api, SchemaNode, Schema, Action} from '../types';
|
||||
import cx from 'classnames';
|
||||
import TooltipWrapper from '../components/TooltipWrapper';
|
||||
import TooltipWrapper, {TooltipObject} from '../components/TooltipWrapper';
|
||||
import {filter} from '../utils/tpl';
|
||||
import {themeable} from '../theme';
|
||||
import {ClassNamesFn, themeable} from '../theme';
|
||||
import {hasIcon, Icon} from '../components/icons';
|
||||
import {BaseSchema, SchemaClassName, SchemaIcon, SchemaTpl} from '../Schema';
|
||||
import {autobind, isMobile} from '../utils/helper';
|
||||
|
||||
/**
|
||||
* 提示渲染器，默认会显示个小图标，鼠标放上来的时候显示配置的内容。
|
||||
@ -91,6 +92,50 @@ class Remark extends React.Component<RemarkProps> {
|
||||
trigger: ['hover', 'focus'] as Array<'hover' | 'click' | 'focus'>
|
||||
};
|
||||
|
||||
@autobind
|
||||
showModalTip(tooltip?: string | TooltipObject) {
|
||||
let {onAction, data} = this.props;
|
||||
return (e: React.MouseEvent) => {
|
||||
onAction &&
|
||||
onAction(
|
||||
e,
|
||||
{
|
||||
actionType: 'dialog',
|
||||
dialog: {
|
||||
title:
|
||||
tooltip && typeof tooltip !== 'string' ? tooltip.title : '',
|
||||
body:
|
||||
tooltip && typeof tooltip !== 'string'
|
||||
? tooltip.content
|
||||
: tooltip
|
||||
}
|
||||
},
|
||||
data
|
||||
);
|
||||
};
|
||||
}
|
||||
|
||||
renderLabel(finalIcon: any, finalLabel: string, cx: ClassNamesFn) {
|
||||
return (
|
||||
<>
|
||||
{finalLabel ? <span>{finalLabel}</span> : null}
|
||||
{finalIcon ? (
|
||||
hasIcon(finalIcon) ? (
|
||||
<span className={cx('Remark-icon')}>
|
||||
<Icon icon={finalIcon} />
|
||||
</span>
|
||||
) : (
|
||||
<i className={cx('Remark-icon', finalIcon)} />
|
||||
)
|
||||
) : finalIcon === false && finalLabel ? null : (
|
||||
<span className={cx('Remark-icon icon')}>
|
||||
<Icon icon="question-mark" />
|
||||
</span>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
render() {
|
||||
const {
|
||||
className,
|
||||
@ -106,17 +151,34 @@ class Remark extends React.Component<RemarkProps> {
|
||||
content,
|
||||
data,
|
||||
env,
|
||||
tooltipClassName
|
||||
tooltipClassName,
|
||||
useMobileUI
|
||||
} = this.props;
|
||||
|
||||
const finalIcon = tooltip?.icon ?? icon;
|
||||
const finalLabel = tooltip?.label ?? label;
|
||||
const parsedTip = filterContents(tooltip || content, data);
|
||||
|
||||
// 移动端使用弹框提示
|
||||
if (isMobile() && useMobileUI) {
|
||||
return (
|
||||
<div
|
||||
className={cx(
|
||||
`Remark`,
|
||||
(tooltip && tooltip.className) || className || `Remark--warning`
|
||||
)}
|
||||
onClick={this.showModalTip(parsedTip)}
|
||||
>
|
||||
{this.renderLabel(finalIcon, finalLabel, cx)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<TooltipWrapper
|
||||
classPrefix={ns}
|
||||
classnames={cx}
|
||||
tooltip={filterContents(tooltip || content, data)}
|
||||
tooltip={parsedTip}
|
||||
tooltipClassName={
|
||||
(tooltip && tooltip.tooltipClassName) || tooltipClassName
|
||||
}
|
||||
@ -132,20 +194,7 @@ class Remark extends React.Component<RemarkProps> {
|
||||
(tooltip && tooltip.className) || className || `Remark--warning`
|
||||
)}
|
||||
>
|
||||
{finalLabel ? <span>{finalLabel}</span> : null}
|
||||
{finalIcon ? (
|
||||
hasIcon(finalIcon) ? (
|
||||
<span className={cx('Remark-icon')}>
|
||||
<Icon icon={finalIcon} />
|
||||
</span>
|
||||
) : (
|
||||
<i className={cx('Remark-icon', finalIcon)} />
|
||||
)
|
||||
) : finalIcon === false && finalLabel ? null : (
|
||||
<span className={cx('Remark-icon icon')}>
|
||||
<Icon icon="question-mark" />
|
||||
</span>
|
||||
)}
|
||||
{this.renderLabel(finalIcon, finalLabel, cx)}
|
||||
</div>
|
||||
</TooltipWrapper>
|
||||
);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user