代码之家 › 专栏 › 技术社区 › techie_questie

切换图标不显示在响应可访问手风琴上

accordion npm reactjs node.js css

techie_questie · 技术社区 · 6 年前

我正在我的React应用程序中实现React可访问的Accordion。单击功能工作正常,但是我没有看到Accordion上出现箭头图标。我试图将其与NPM中示例中所示的DOM结构进行比较,发现图标本身的DIV没有添加到我的DOM中。

我的密码

从“react”导入react; 从“react dom”导入react dom;

导入{ 手风琴, 手风琴项目, 协议项标题, 协议项正文, }来自“反应可接近手风琴”;

导入“react accessible accordion/dist/force example.css”; 导入“react accessible accordion/dist/minimal example.css”;

<div className="container">
                    <Accordion>
                    <AccordionItem>
                        <AccordionItemTitle>
                            <h4>Hello, This is me..</h4>
                        </AccordionItemTitle>
                        <AccordionItemBody>
                          Some Text
                        </AccordionItemBody>
                    </AccordionItem>
                </Accordion>
                </div>

箭头图标来自

<div class="accordion__arrow" role="presentation"></div>

这对我来说是没有意义的。为什么会这样呢?我正在使用NPM站点上显示的确切演示代码。

我提到的链接-

https://www.npmjs.com/package/react-accessible-accordion

据我所知,我唯一没有补充的是,

document.querySelector('[data-mount]')

这就是我的箭头图标没有加载的原因吗? 我不确定这是否是一个开放的bug,但是所显示的示例在每个手风琴中都有这些图标。

3 回复 | 直到 6 年前

techie_questie 6 年前

在accordiontitle中添加以下内容,解决问题-

<h3 className="u-position-relative"> 
Accessible Accordion 
<div className="accordion__arrow" role="presentation"/> 
</h3>

Baakan 6 年前

导入了CSS样式吗?

// Demo styles, see 'Styles' section below for some notes on use.
import 'react-accessible-accordion/dist/fancy-example.css';

Willy 6 年前

你需要做两件事来让它工作:

1]您需要将此文件的所有内容“react-accessible-accordion/dist/fancy example.css”复制到另一个文件,因为我们将覆盖一些类。

2]您需要在accordionitemtitle中添加一个div。

    <AccordionItemTitle>
        <h4>Hello, This is me..</h4>
        <div className="accordion__arrow" role="presentation" />
    </AccordionItemTitle>

3]在您创建的样式表中,键入以下样式

.accordion__item {
    position: relative;
}
.accordion__arrow {
    display: inline-block;
    width: 24px;
    height: 12px;
    position: absolute;
    top: 40px;
    right: 15px;
    margin-top: -6px;
}

切换按钮应该出现在后面。

-1

Bhargav Rao rlgjr 6 年前

添加YHIS代码

<AccordionItemTitle>       
    <h3 className="u-position-relative"> 
             Accessible Accordion
        <div className="accordion__arrow" role="presentation" />
    </h3>
</AccordionItemTitle>

推荐文章