reactjs 反作用 Bootstrap 提前类型中的向下Angular 图标

xxls0lw8  于 2022-12-29  发布在  React
关注(0)|答案(2)|浏览(125)

在formik内部使用typeahead,并且很坚韧为react-bootstrap-typeahead添加fa-Angular 向上和fa-Angular 向下图标,如下图所示

相反,我有如下问题(它应该看起来像上面的图像)

代码:https://codesandbox.io/s/formik-example-forked-8m6o6

l3zydbqr

l3zydbqr1#

你能检查一下下面的代码链接吗?希望它能为你工作。我们添加了一个元素custom-dropdown,并把FontAwesomeIcon和Typeahead元素放在里面。
.custom-dropdown中,我们设置position: relative;
.fa-angle-down中,我们设置了position: absolute;,并根据您的要求设置其位置。
请参考此链接:https://codesandbox.io/s/formik-example-forked-uupel

qeeaahzv

qeeaahzv2#

给你。

    • React导入:**
import { TiArrowSortedDown } from 'react-icons/ti';
    • React返回语句:**
<>          
    <div className={styles.typeaheadStyles}>
    <Typeahead
        className={...}
        onChange={(event)=>handleChange(event)}
        onInputChange={(event)=>handleInputChange(event)}
        key={...}
        id={...}
        options={optionsArray}
        flip
        defaultSelected={defaultArray}
    />
   <TiArrowSortedDown className={styles.arrowDown} />
   </div>      
   </>
    • 中央支助组:**
.typeaheadStyles{
    align-items: center;
    padding: 12px 16px;
    background-color: "gray";
    display: flex;
    justify-content: end;

}

相关问题