javascript 如何将图标与文本标题对齐，而标题与底部元素对齐？

7eumitmz 于 2023-04-19 发布在 Java

关注(0)|答案(1)|浏览(261)

我正在构建这个吐司组件，我想将Toast的标题与左侧的图标和右侧的“关闭”图标对齐。我知道实现它的最佳方法是将所有三个元素 Package 在div中，然后使用display:flex和align-items: center。但技巧是Title已经被 Package 在div中，类为mid-container，flex应用于列方向，以便与底部的项目对齐。是内容和动作按钮。另一种方法是使用top: 4px的图标，但这是没有响应，我更喜欢它与flex对齐，如果可能的话。有没有一种方法，包括标题与flex在水平和垂直方向？或者有一种替代方法？https://stackblitz.com/edit/react-ts-3pqxym?file=App.tsx,toast.md,Toast%2FToast.tsx,style.css
Toast.tsx

export const Toast = ({title, description, actionLabel, actionButtonCallback, close, timeout = 2000}: IToast) => {
  useTimeout(close, timeout);

  return (
    <div className="toast-container">
     
      <div style={{ display: 'flex'}}>
        <span className='icon'><FaAmazon /></span>
        <div className='mid-container'>
          <div className="title">{title}</div>
          <div className="toast__text">{description}</div>
          <button style={{ width: '100px' }} onClick={actionButtonCallback}>{actionLabel}</button>
        </div>   
      </div>
      <button onClick={close} className="toast__close-btn"><FaWindowClose/></button>
    </div>
  )
}

styles.css

.toasts-wrapper {
  position: absolute;
  bottom: 20px;
  right: 20px;
}

.toast-container {
  border: 2px solid transparent;
  background-color: #fafafa;
  border-radius: 4px;
  max-width: 380px;
  min-width: 240px;
  box-shadow: 0px 0px 5px rgba(0, 0, 0, .2);
  margin-top: 16px;
  display: flex;
  position: relative;
  cursor: pointer;
  align-items: flex-start;
  width: 100%;
  animation: slide-in-right 0.3s ease-in-out forwards;
}

@keyframes slide-in-right {
  0% {
    transform: translateX(100%);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

.toast__close-btn {
  border: none;
  background-color: transparent;
  font-size: 16px;
  margin-right: 8px;
  cursor: pointer;
  margin-left: auto;
}

.title {
  font-weight: bold;
}

.mid-container {
  display: flex;
  flex-direction: column;
}

.icon {
  flex: none;
  margin-right: 10px;
  font-size: 16px;
  /* top: 4px; */
}

* {
  box-sizing: border-box;
}

button {
  display : flex;
  align-items: center;
}

JavaScript

来源：https://stackoverflow.com/questions/76029861/how-to-align-icon-to-the-text-title-while-title-is-being-aligned-to-the-bottom

1条答案

按热度按时间

xzlaal3s1#

首先你需要重新设计图标，标题和关闭按钮。我已经把所有这些东西在一个单一的div。然后你需要应用高度16px到你的图标跨度（原因是你的图标svg是16 x 16，但跨度采取16 x 20，应用高度：16px将解决这个问题）。然后在包含图标，标题和关闭按钮的div上应用align items: center。
代码如下：
Toast.tsx

import * as React from 'react';
import { useMemo } from 'react';
import '../style.css';
import { FaAmazon, FaWindowClose } from 'react-icons/fa';
import { useTimeout } from '../Hooks/useTimeout';

export interface IToast {
  timeout?: number;
  status?: 'Success' | 'Error' | 'Neutral';
  type?: 'default' | 'micro';
  title?: string;
  description?: string;
  actionLabel?: string;
  actionButtonCallback?: () => void;
  open?: boolean;
  close?: () => void;
}

export const Toast = ({
  title,
  description,
  actionLabel,
  actionButtonCallback,
  close,
  timeout = 2000,
}: IToast) => {
  useTimeout(close, timeout);

  return (
    <div className="toast-container">
      <div style={{ display: 'flex', alignItems: 'center' }}>
        <span className="icon" style={{ innerHeight: '16px' }}>
          <FaAmazon />
        </span>
        <div className="title">{title}</div>
        <button onClick={close} className="toast__close-btn">
          <FaWindowClose />
        </button>
      </div>
      <div className="mid-container">
        <div className="toast__text">{description}</div>
        <button style={{ width: '100px' }} onClick={actionButtonCallback}>
          {actionLabel}
        </button>
      </div>
    </div>
  );
};

赞(0）回复(0）举报 2023-04-19

我来回答

javascript 如何将图标与文本标题对齐，而标题与底部元素对齐？

1条答案

相关问题

热门标签

最新问答