@ant-design/icons#UnderlineOutlined TypeScript Examples
The following examples show how to use
@ant-design/icons#UnderlineOutlined.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: underline.tsx From imove with MIT License | 6 votes |
|
Underline: React.FC<IProps> = makeBtnWidget({
tooltip: '下划线',
handler: shortcuts.underline.handler,
getIcon() {
return <UnderlineOutlined />;
},
disabled(flowChart: Graph) {
return flowChart.getSelectedCellCount() === 0;
},
selected(flowChart: Graph) {
const cells = flowChart.getSelectedCells();
if (cells.length > 0) {
return (
safeGet(cells, '0.attrs.label.textDecoration', 'none') === 'underline'
);
} else {
return false;
}
},
})
Example #2
| Source File: index.tsx From memex with MIT License | 5 votes |
|
INLINE_STYLES = [
{ label: 'Bold', style: 'BOLD', icon: <BoldOutlined /> },
{ label: 'Italic', style: 'ITALIC', icon: <ItalicOutlined /> },
{ label: 'Underline', style: 'UNDERLINE', icon: <UnderlineOutlined /> },
// {label: 'Monospace', style: 'CODE'},
]
Example #3
| Source File: CustomInlineEditor.tsx From dnde with GNU General Public License v3.0 | 4 votes |
|
InlineEditor = () => {
const ref = useRef<any>(null);
const { x, y } = useCustomEditorPosition();
const { active } = useCustomEditorStatus();
const { active: activeElement }: { active: HTMLDivElement } = useHtmlWrapper();
const { mjmlJson, setMjmlJson } = useEditor();
const [fontlist] = useFonts();
// on mount, override the default behaviour of the antd dropdown select
useEffect(() => {
if (ref.current) {
const toolbar = document.querySelectorAll('#customtoolbar .ant-select-selector');
if (toolbar) {
toolbar.forEach((item) => {
logger.log('attaching click event listener to container');
item.addEventListener('click', ResetEventBehaviour);
});
return () =>
toolbar.forEach((item) => {
logger.log('removing click event listener to container');
item.removeEventListener('click', ResetEventBehaviour);
});
}
}
}, [ref]);
useEffect(() => {
if (active && activeElement) {
const uniqueIdentifier = findUniqueIdentifier(activeElement, activeElement.classList);
if (uniqueIdentifier?.includes('mj-text')) {
let editor: any = activeElement.children[0].children[0];
const Event = (e: any) => {
stateChangeCallback(editor, mjmlJson, setMjmlJson);
// e.stopPropagation();
// e.preventDefault();
// e.target.focus();
// return false;
};
const onKeyUp = () => {
r = window.getSelection()?.getRangeAt(0);
};
editor.addEventListener('focusout', Event, true);
editor.addEventListener('keyup', onKeyUp, false);
editor.addEventListener('click', onKeyUp, false);
editor.classList.add('editor-active');
editor.setAttribute('contentEditable', 'true');
editor.setAttribute('spellcheck', 'false');
if (r) {
// restoreSelection();
}
return () => {
logger.log('custom editor: cleaning up dynamic attributes');
editor.removeEventListener('focusout', Event, true);
editor.removeEventListener('keyup', onKeyUp, false);
editor.removeEventListener('click', onKeyUp, false);
};
}
}
}, [activeElement, mjmlJson]);
return (
<div
style={{
display: active ? 'block' : 'none',
position: 'fixed',
top: `${y}px`,
left: `${x}px`,
padding: '4px 8px',
border: '1px solid black',
zIndex: 999,
backgroundColor: '#fff',
transition: 'all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1)',
}}
id="customtoolbar"
ref={ref}
onMouseDown={ResetEventBehaviour}
>
<Select
size="small"
dropdownStyle={{ minWidth: '18px' }}
defaultValue={2}
style={{ fontSize: '12px' }}
onChange={(value: any) => {
InlineEditorActions(null, 'size', value);
}}
>
{Array.from(Array(7).keys()).map((i) => (
<Select.Option
onMouseDown={ResetEventBehaviour}
onFocus={ResetEventBehaviour}
style={{ fontSize: '12px' }}
value={i + 1}
>
<span onMouseDown={ResetEventBehaviour} onFocus={ResetEventBehaviour}>
{i + 1}
</span>
</Select.Option>
))}
</Select>
<Select
size="small"
defaultValue={'Ubuntu'}
dropdownStyle={{ minWidth: '140px' }}
style={{ fontSize: '12px' }}
onChange={(value: any) => {
InlineEditorActions(null, 'fontFamily', value);
}}
onMouseDown={ResetEventBehaviour}
>
{fontlist.map((font) => (
<Select.Option
onMouseDown={ResetEventBehaviour}
onFocus={ResetEventBehaviour}
style={{ fontSize: '12px' }}
value={font}
>
<span onMouseDown={ResetEventBehaviour} onFocus={ResetEventBehaviour}>
{font}
</span>
</Select.Option>
))}
</Select>
<Popover
overlayClassName="inline-editor-popover-color-picker"
trigger="click"
placement="bottom"
content={
<ColorPicker
handleChange={(color) => {
InlineEditorActions(null, 'fontColor', color);
}}
mouseDown={false}
/>
}
destroyTooltipOnHide={true}
>
<Button icon={<FontColorsOutlined />} style={{ fontSize: '12px' }} size="small"></Button>
</Popover>
<Popover
overlayClassName="inline-editor-popover-color-picker"
trigger="click"
placement="bottom"
content={
<ColorPicker
handleChange={(color) => {
InlineEditorActions(null, 'color', color);
}}
mouseDown={false}
/>
}
destroyTooltipOnHide={true}
>
<Button icon={<BgColorsOutlined />} style={{ fontSize: '12px' }} size="small"></Button>
</Popover>
<Button
icon={<BoldOutlined />}
onClick={(e) => InlineEditorActions(e, 'bold')}
style={{ fontSize: '12px' }}
size="small"
></Button>
<Button
icon={<ItalicOutlined />}
onClick={(e) => InlineEditorActions(e, 'italics')}
style={{ fontSize: '12px' }}
size="small"
></Button>
<Button
icon={<UnderlineOutlined />}
onClick={(e) => InlineEditorActions(e, 'underline')}
style={{ fontSize: '12px' }}
size="small"
></Button>
<LinkItem setLinkCallback={(e) => InlineEditorActions(e, 'link')} />
</div>
);
}
Example #4
| Source File: Icon.tsx From html2sketch with MIT License | 4 votes |
|
IconSymbol: FC = () => {
return (
<Row>
{/*<CaretUpOutlined*/}
{/* className="icon"*/}
{/* symbolName={'1.General/2.Icons/1.CaretUpOutlined'}*/}
{/*/>*/}
{/* className="icon"*/}
{/* symbolName={'1.General/2.Icons/2.MailOutlined'}*/}
{/*/>*/}
{/*<StepBackwardOutlined*/}
{/* className="icon"*/}
{/* symbolName={'1.General/2.Icons/2.StepBackwardOutlined'}*/}
{/*/>*/}
{/*<StepForwardOutlined*/}
{/* className="icon"*/}
{/* symbolName={'1.General/2.Icons/2.StepBackwardOutlined'}*/}
{/*/>*/}
<StepForwardOutlined />
<ShrinkOutlined />
<ArrowsAltOutlined />
<DownOutlined />
<UpOutlined />
<LeftOutlined />
<RightOutlined />
<CaretUpOutlined />
<CaretDownOutlined />
<CaretLeftOutlined />
<CaretRightOutlined />
<VerticalAlignTopOutlined />
<RollbackOutlined />
<FastBackwardOutlined />
<FastForwardOutlined />
<DoubleRightOutlined />
<DoubleLeftOutlined />
<VerticalLeftOutlined />
<VerticalRightOutlined />
<VerticalAlignMiddleOutlined />
<VerticalAlignBottomOutlined />
<ForwardOutlined />
<BackwardOutlined />
<EnterOutlined />
<RetweetOutlined />
<SwapOutlined />
<SwapLeftOutlined />
<SwapRightOutlined />
<ArrowUpOutlined />
<ArrowDownOutlined />
<ArrowLeftOutlined />
<ArrowRightOutlined />
<LoginOutlined />
<LogoutOutlined />
<MenuFoldOutlined />
<MenuUnfoldOutlined />
<BorderBottomOutlined />
<BorderHorizontalOutlined />
<BorderInnerOutlined />
<BorderOuterOutlined />
<BorderLeftOutlined />
<BorderRightOutlined />
<BorderTopOutlined />
<BorderVerticleOutlined />
<PicCenterOutlined />
<PicLeftOutlined />
<PicRightOutlined />
<RadiusBottomleftOutlined />
<RadiusBottomrightOutlined />
<RadiusUpleftOutlined />
<RadiusUprightOutlined />
<FullscreenOutlined />
<FullscreenExitOutlined />
<QuestionOutlined />
<PauseOutlined />
<MinusOutlined />
<PauseCircleOutlined />
<InfoOutlined />
<CloseOutlined />
<ExclamationOutlined />
<CheckOutlined />
<WarningOutlined />
<IssuesCloseOutlined />
<StopOutlined />
<EditOutlined />
<CopyOutlined />
<ScissorOutlined />
<DeleteOutlined />
<SnippetsOutlined />
<DiffOutlined />
<HighlightOutlined />
<AlignCenterOutlined />
<AlignLeftOutlined />
<AlignRightOutlined />
<BgColorsOutlined />
<BoldOutlined />
<ItalicOutlined />
<UnderlineOutlined />
<StrikethroughOutlined />
<RedoOutlined />
<UndoOutlined />
<ZoomInOutlined />
<ZoomOutOutlined />
<FontColorsOutlined />
<FontSizeOutlined />
<LineHeightOutlined />
<SortAscendingOutlined />
<SortDescendingOutlined />
<DragOutlined />
<OrderedListOutlined />
<UnorderedListOutlined />
<RadiusSettingOutlined />
<ColumnWidthOutlined />
<ColumnHeightOutlined />
<AreaChartOutlined />
<PieChartOutlined />
<BarChartOutlined />
<DotChartOutlined />
<LineChartOutlined />
<RadarChartOutlined />
<HeatMapOutlined />
<FallOutlined />
<RiseOutlined />
<StockOutlined />
<BoxPlotOutlined />
<FundOutlined />
<SlidersOutlined />
<AndroidOutlined />
<AppleOutlined />
<WindowsOutlined />
<IeOutlined />
<ChromeOutlined />
<GithubOutlined />
<AliwangwangOutlined />
<DingdingOutlined />
<WeiboSquareOutlined />
<WeiboCircleOutlined />
<TaobaoCircleOutlined />
<Html5Outlined />
<WeiboOutlined />
<TwitterOutlined />
<WechatOutlined />
<AlipayCircleOutlined />
<TaobaoOutlined />
<SkypeOutlined />
<FacebookOutlined />
<CodepenOutlined />
<CodeSandboxOutlined />
<AmazonOutlined />
<GoogleOutlined />
<AlipayOutlined />
<AntDesignOutlined />
<AntCloudOutlined />
<ZhihuOutlined />
<SlackOutlined />
<SlackSquareOutlined />
<BehanceSquareOutlined />
<DribbbleOutlined />
<DribbbleSquareOutlined />
<InstagramOutlined />
<YuqueOutlined />
<AlibabaOutlined />
<YahooOutlined />
<RedditOutlined />
<SketchOutlined />
<AccountBookOutlined />
<AlertOutlined />
<ApartmentOutlined />
<ApiOutlined />
<QqOutlined />
<MediumWorkmarkOutlined />
<GitlabOutlined />
<MediumOutlined />
<GooglePlusOutlined />
<AppstoreAddOutlined />
<AppstoreOutlined />
<AudioOutlined />
<AudioMutedOutlined />
<AuditOutlined />
<BankOutlined />
<BarcodeOutlined />
<BarsOutlined />
<BellOutlined />
<BlockOutlined />
<BookOutlined />
<BorderOutlined />
<BranchesOutlined />
<BuildOutlined />
<BulbOutlined />
<CalculatorOutlined />
<CalendarOutlined />
<CameraOutlined />
<CarOutlined />
<CarryOutOutlined />
<CiCircleOutlined />
<CiOutlined />
<CloudOutlined />
<ClearOutlined />
<ClusterOutlined />
<CodeOutlined />
<CoffeeOutlined />
<CompassOutlined />
<CompressOutlined />
<ContactsOutlined />
<ContainerOutlined />
<ControlOutlined />
<CopyrightCircleOutlined />
<CopyrightOutlined />
<CreditCardOutlined />
<CrownOutlined />
<CustomerServiceOutlined />
<DashboardOutlined />
<DatabaseOutlined />
<DeleteColumnOutlined />
<DeleteRowOutlined />
<DisconnectOutlined />
<DislikeOutlined />
<DollarCircleOutlined />
<DollarOutlined />
<DownloadOutlined />
<EllipsisOutlined />
<EnvironmentOutlined />
<EuroCircleOutlined />
<EuroOutlined />
<ExceptionOutlined />
<ExpandAltOutlined />
<ExpandOutlined />
<ExperimentOutlined />
<ExportOutlined />
<EyeOutlined />
<FieldBinaryOutlined />
<FieldNumberOutlined />
<FieldStringOutlined />
<DesktopOutlined />
<DingtalkOutlined />
<FileAddOutlined />
<FileDoneOutlined />
<FileExcelOutlined />
<FileExclamationOutlined />
<FileOutlined />
<FileImageOutlined />
<FileJpgOutlined />
<FileMarkdownOutlined />
<FilePdfOutlined />
<FilePptOutlined />
<FileProtectOutlined />
<FileSearchOutlined />
<FileSyncOutlined />
<FileTextOutlined />
<FileUnknownOutlined />
<FileWordOutlined />
<FilterOutlined />
<FireOutlined />
<FlagOutlined />
<FolderAddOutlined />
<FolderOutlined />
<FolderOpenOutlined />
<ForkOutlined />
<FormatPainterOutlined />
<FrownOutlined />
<FunctionOutlined />
<FunnelPlotOutlined />
<GatewayOutlined />
<GifOutlined />
<GiftOutlined />
<GlobalOutlined />
<GoldOutlined />
<GroupOutlined />
<HddOutlined />
<HeartOutlined />
<HistoryOutlined />
<HomeOutlined />
<HourglassOutlined />
<IdcardOutlined />
<ImportOutlined />
<InboxOutlined />
<InsertRowAboveOutlined />
<InsertRowBelowOutlined />
<InsertRowLeftOutlined />
<InsertRowRightOutlined />
<InsuranceOutlined />
<InteractionOutlined />
<KeyOutlined />
<LaptopOutlined />
<LayoutOutlined />
<LikeOutlined />
<LineOutlined />
<LinkOutlined />
<Loading3QuartersOutlined />
<LoadingOutlined />
<LockOutlined />
<MailOutlined />
<ManOutlined />
<MedicineBoxOutlined />
<MehOutlined />
<MenuOutlined />
<MergeCellsOutlined />
<MessageOutlined />
<MobileOutlined />
<MoneyCollectOutlined />
<MonitorOutlined />
<MoreOutlined />
<NodeCollapseOutlined />
<NodeExpandOutlined />
<NodeIndexOutlined />
<NotificationOutlined />
<NumberOutlined />
<PaperClipOutlined />
<PartitionOutlined />
<PayCircleOutlined />
<PercentageOutlined />
<PhoneOutlined />
<PictureOutlined />
<PoundCircleOutlined />
<PoundOutlined />
<PoweroffOutlined />
<PrinterOutlined />
<ProfileOutlined />
<ProjectOutlined />
<PropertySafetyOutlined />
<PullRequestOutlined />
<PushpinOutlined />
<QrcodeOutlined />
<ReadOutlined />
<ReconciliationOutlined />
<RedEnvelopeOutlined />
<ReloadOutlined />
<RestOutlined />
<RobotOutlined />
<RocketOutlined />
<SafetyCertificateOutlined />
<SafetyOutlined />
<ScanOutlined />
<ScheduleOutlined />
<SearchOutlined />
<SecurityScanOutlined />
<SelectOutlined />
<SendOutlined />
<SettingOutlined />
<ShakeOutlined />
<ShareAltOutlined />
<ShopOutlined />
<ShoppingCartOutlined />
<ShoppingOutlined />
<SisternodeOutlined />
<SkinOutlined />
<SmileOutlined />
<SolutionOutlined />
<SoundOutlined />
<SplitCellsOutlined />
<StarOutlined />
<SubnodeOutlined />
<SyncOutlined />
<TableOutlined />
<TabletOutlined />
<TagOutlined />
<TagsOutlined />
<TeamOutlined />
<ThunderboltOutlined />
<ToTopOutlined />
<ToolOutlined />
<TrademarkCircleOutlined />
<TrademarkOutlined />
<TransactionOutlined />
<TrophyOutlined />
<UngroupOutlined />
<UnlockOutlined />
<UploadOutlined />
<UsbOutlined />
<UserAddOutlined />
<UserDeleteOutlined />
<UserOutlined />
<UserSwitchOutlined />
<UsergroupAddOutlined />
<UsergroupDeleteOutlined />
<VideoCameraOutlined />
<WalletOutlined />
<WifiOutlined />
<BorderlessTableOutlined />
<WomanOutlined />
<BehanceOutlined />
<DropboxOutlined />
<DeploymentUnitOutlined />
<UpCircleOutlined />
<DownCircleOutlined />
<LeftCircleOutlined />
<RightCircleOutlined />
<UpSquareOutlined />
<DownSquareOutlined />
<LeftSquareOutlined />
<RightSquareOutlined />
<PlayCircleOutlined />
<QuestionCircleOutlined />
<PlusCircleOutlined />
<PlusSquareOutlined />
<MinusSquareOutlined />
<MinusCircleOutlined />
<InfoCircleOutlined />
<ExclamationCircleOutlined />
<CloseCircleOutlined />
<CloseSquareOutlined />
<CheckCircleOutlined />
<CheckSquareOutlined />
<ClockCircleOutlined />
<FormOutlined />
<DashOutlined />
<SmallDashOutlined />
<YoutubeOutlined />
<CodepenCircleOutlined />
<AliyunOutlined />
<PlusOutlined />
<LinkedinOutlined />
<AimOutlined />
<BugOutlined />
<CloudDownloadOutlined />
<CloudServerOutlined />
<CloudSyncOutlined />
<CloudUploadOutlined />
<CommentOutlined />
<ConsoleSqlOutlined />
<EyeInvisibleOutlined />
<FileGifOutlined />
<DeliveredProcedureOutlined />
<FieldTimeOutlined />
<FileZipOutlined />
<FolderViewOutlined />
<FundProjectionScreenOutlined />
<FundViewOutlined />
<MacCommandOutlined />
<PlaySquareOutlined />
<OneToOneOutlined />
<RotateLeftOutlined />
<RotateRightOutlined />
<SaveOutlined />
<SwitcherOutlined />
<TranslationOutlined />
<VerifiedOutlined />
<VideoCameraAddOutlined />
<WhatsAppOutlined />
{/*</Col>*/}
</Row>
);
}
Example #5
| Source File: Font.tsx From yugong with MIT License | 4 votes |
|
Font: React.FC<Props> = () => {
const context = useContext(StyleContext);
const [fontData, setFontData] = useState<FontTypesOfStyleItems>({});
const {
fontSize,
align,
lineHeight,
letterSP,
fontWeight,
fontStyle,
color,
decoration,
} = fontData;
const moduleId = useSelector(
(state: RootState) => state.activationItem.moduleId
);
useEffect(() => {
setFontData(context.getDefaultData?.("font") || {});
}, [context, moduleId]);
const onChangeFont = useCallback(
(type: ChangeType) => (data: any) => {
let value = data;
if (type === "align" || type === "decoration" || type === "fontWeight") {
value = data.target.value;
}
if (type === "fontWeight") {
if (data.target.checked) {
value = "bold";
} else {
value = "normal";
}
}
if (type === "fontStyle") {
if (data.target.checked) {
value = "italic";
} else {
value = "normal";
}
}
if (type === "color") {
value =
value.value &&
`rgba(${data.value.rgb.r}, ${data.value.rgb.g}, ${data.value.rgb.b}, ${data.value.rgb.a})`;
}
fontData[type] = value;
setFontData({ ...fontData });
if (context.onChange instanceof Function) {
context.onChange(fontData, "font");
}
},
[context, fontData]
);
return (
<>
<Row className={s.row}>
<Col span={8}>
<Radio.Group value={align} onChange={onChangeFont("align")}>
<Radio.Button value="left">
<AlignLeftOutlined />
</Radio.Button>
<Radio.Button value="center">
<AlignCenterOutlined />
</Radio.Button>
<Radio.Button value="right">
<AlignRightOutlined />
</Radio.Button>
</Radio.Group>
</Col>
<Col span={8}>
<Radio.Group value={decoration} onChange={onChangeFont("decoration")}>
<Radio.Button value="none">N</Radio.Button>
<Radio.Button value="underline">
<UnderlineOutlined />
</Radio.Button>
<Radio.Button value="line-through">
<StrikethroughOutlined />
</Radio.Button>
</Radio.Group>
</Col>
<Col span={8}>
<Checkbox
className={s.Checkbox}
checked={fontWeight === "bold"}
onChange={onChangeFont("fontWeight")}
>
<BoldOutlined />
</Checkbox>
<Checkbox
className={s.Checkbox}
checked={fontStyle === "italic"}
onChange={onChangeFont("fontStyle")}
>
<ItalicOutlined />
</Checkbox>
</Col>
</Row>
<Row className={s.row}>
<Col span={12}>
<Color
label="字体颜色"
onChange={onChangeFont("color")}
defaultColor={color}
/>
</Col>
<Col span={12}>
<UnitInput
label="字体大小"
min={0}
max={100000}
defaultValue={fontSize}
onChange={onChangeFont("fontSize")}
/>
</Col>
</Row>
<Row className={s.row}>
<Col span={12}>
<UnitInput
label="行间距"
min={0}
max={100000}
defaultValue={lineHeight}
onChange={onChangeFont("lineHeight")}
/>
</Col>
<Col span={12}>
<UnitInput
label="字间距"
min={0}
max={100000}
defaultValue={letterSP}
onChange={onChangeFont("letterSP")}
/>
</Col>
</Row>
</>
);
}
Example #6
| Source File: index.tsx From ant-simple-draw with MIT License | 4 votes |
|
FontStyle: FC<FormProps<valueType>> = memo(function FontStyle({ value, onChange }) {
const [val, setVal] = useSetState<valueType>({
fontWeight: undefined,
fontStyle: undefined,
textDecoration: undefined,
textAlign: undefined,
});
const triggerChange = (changedValue: valueType) => {
onChange && onChange({ ...val, ...changedValue });
};
const handle = (flag: string) => {
if (flag === 'fontWeight') {
const fontWeight = {
fontWeight: val.fontWeight === 'bold' ? undefined : 'bold',
} as valueType;
setVal(fontWeight);
triggerChange(fontWeight);
}
if (flag === 'fontStyle') {
const fontStyle = { fontStyle: val.fontStyle === 'italic' ? undefined : 'italic' };
setVal(fontStyle);
triggerChange(fontStyle);
}
if (flag === 'underline' || flag === 'line-through') {
const textDecoration = {
textDecoration: val.textDecoration === flag ? undefined : flag,
};
setVal(textDecoration);
triggerChange(textDecoration);
}
if (['left', 'center', 'right', 'justify'].includes(flag)) {
const textAlign = {
textAlign: val.textAlign === flag ? undefined : flag,
} as valueType;
setVal(textAlign);
triggerChange(textAlign);
}
};
useEffect(() => {
if (value) {
setVal(value);
}
}, [value]);
return (
<Space
style={{
display: 'flex',
flex: '1',
justifyContent: 'space-around',
flexFlow: 'wrap',
padding: '3px 0',
}}
>
<Tooltip title="加粗">
<button style={{ width: '40px' }}>
<BoldOutlined
style={{
fontSize: '18px',
cursor: 'pointer',
color: val.fontWeight === 'bold' ? '#1890ff' : '#33383e',
}}
onClick={() => handle('fontWeight')}
/>
</button>
</Tooltip>
<Tooltip title="斜体">
<button style={{ width: '40px' }}>
<ItalicOutlined
style={{
fontSize: '18px',
cursor: 'pointer',
color: val.fontStyle === 'italic' ? '#1890ff' : '#33383e',
}}
onClick={() => handle('fontStyle')}
/>
</button>
</Tooltip>
<Tooltip title="下划线">
<button style={{ width: '40px' }}>
<UnderlineOutlined
style={{
fontSize: '18px',
cursor: 'pointer',
color: val.textDecoration === 'underline' ? '#1890ff' : '#33383e',
}}
onClick={() => handle('underline')}
/>
</button>
</Tooltip>
<Tooltip title="删除线">
<button style={{ width: '40px' }}>
<StrikethroughOutlined
style={{
fontSize: '18px',
cursor: 'pointer',
color: val.textDecoration === 'line-through' ? '#1890ff' : '#33383e',
}}
onClick={() => handle('line-through')}
/>
</button>
</Tooltip>
<Tooltip title="左对齐">
<button style={{ width: '40px' }}>
<AlignLeftOutlined
style={{
fontSize: '18px',
cursor: 'pointer',
color: val.textAlign === 'left' ? '#1890ff' : '#33383e',
}}
onClick={() => handle('left')}
/>
</button>
</Tooltip>
<Tooltip title="居中对齐">
<button style={{ width: '40px' }}>
<AlignCenterOutlined
style={{
fontSize: '18px',
cursor: 'pointer',
color: val.textAlign === 'center' ? '#1890ff' : '#33383e',
}}
onClick={() => handle('center')}
/>
</button>
</Tooltip>
<Tooltip title="右对齐">
<button style={{ width: '40px' }}>
<AlignRightOutlined
style={{
fontSize: '18px',
cursor: 'pointer',
color: val.textAlign === 'right' ? '#1890ff' : '#33383e',
}}
onClick={() => handle('right')}
/>
</button>
</Tooltip>
<Tooltip title="两边对齐">
<button style={{ width: '40px' }}>
<MenuOutlined
style={{
fontSize: '18px',
cursor: 'pointer',
color: val.textAlign === 'justify' ? '#1890ff' : '#33383e',
}}
onClick={() => handle('justify')}
/>
</button>
</Tooltip>
</Space>
);
})
