如何在没有ReactJS的情况下使用Shopify Polaris?

时间:2018-05-18 06:44:48

标签: javascript shopify polaris

我正在使用Shopify Polaris创建Shopify嵌入式应用。我必须在嵌入式应用程序的页面中包含一个模态表单。我知道我必须使用this。但我没有使用ReactJS。所以我无法改变模态中的形式。我不知道该怎么做。如果有人知道解决方案,将不胜感激。

我还注意到了一件事。我试过"数字字段"输入(从here的下拉列表中选择数字字段)。递增和递减箭头键在示例中有效,但不在我的表单中。

这是我的代码

<html>
    <head>
        <link rel="stylesheet" href="https://sdks.shopifycdn.com/polaris/2.0.0-rc.3/polaris.min.css" />
    </head>
    <body>
        <div class="">
            <div class="Polaris-Labelled__LabelWrapper">
                <div class="Polaris-Label">
                    <label id="TextField3Label" for="TextField3" class="Polaris-Label__Text">Quantity</label>
                </div>
            </div>
            <div class="Polaris-TextField Polaris-TextField--hasValue">
                <input id="TextField3" class="Polaris-TextField__Input" type="number" aria-labelledby="TextField3Label" aria-invalid="false" value="1">
                <div class="Polaris-TextField__Spinner" aria-hidden="true">
                    <div role="button" class="Polaris-TextField__Segment" tabindex="-1">
                        <div class="Polaris-TextField__SpinnerIcon"> 
                            <span class="Polaris-Icon"><svg class="Polaris-Icon__Svg" viewBox="0 0 20 20" focusable="false" aria-hidden="true"><path d="M15 12l-5-5-5 5z"></path></svg></span>
                        </div>
                    </div>
                    <div role="button" class="Polaris-TextField__Segment" tabindex="-1">
                        <div class="Polaris-TextField__SpinnerIcon">        
                            <span class="Polaris-Icon"><svg class="Polaris-Icon__Svg" viewBox="0 0 20 20" focusable="false" aria-hidden="true"><path d="M5 8l5 5 5-5z" fill-rule="evenodd"></path></svg></span>
                        </div>
                    </div>
                </div>
                <div class="Polaris-TextField__Backdrop"></div>
            </div>
        </div>
    </body>
</html>

1 个答案:

答案 0 :(得分:4)

很抱歉,如果不在Shopify Polaris中使用React Js,那么它将只是HTML和CSS基本代码。

不支持js事件,如模型标签,隐藏显示等。 你需要用基本的javascript或jQuery自己编写所有内容。