整理这段代码vue的源码 div div class=Polaris-Stack Polaris-Stack--distributionEqualSpacing Polaris-Stack--alignmentCenter style=margin-top 1px;border-bottom 1px #c1c1c1 solid;padding 5px; div class=Pol
Vue源码主要由HTML标签和class组成,根据class可以判断出每个元素的样式和功能。以下是对代码的整理和解释:
<div>
<div class="Polaris-Stack Polaris-Stack--distributionEqualSpacing Polaris-Stack--alignmentCenter" style="margin-top: 1px;border-bottom: 1px #c1c1c1 solid;padding: 5px;">
<div class="Polaris-Stack__Item">
<div class="Polaris-Stack Polaris-Stack--spacingTight Polaris-Stack--alignmentCenter">
<div class="Polaris-Stack__Item">
<div class="sc-1ibht3l-0 uqRZq">
</div>
<div class="sc-1ibht3l-1 hIZedH">
<div class="Polaris-ButtonGroup">
<div class="Polaris-ButtonGroup__Item">
<router-link to="/" class="Polaris-Button">
<span class="Polaris-Button__Content">
<span class="Polaris-Button__Text">Dashboard</span>
</span>
</router-link>
</div>
<div class="Polaris-ButtonGroup__Item">
<router-link to="/zone" class="Polaris-Button">
<span class="Polaris-Button__Content">
<span class="Polaris-Button__Text">Checkout Zones</span>
</span>
</router-link>
</div>
<div class="Polaris-ButtonGroup__Item">
<router-link to="/funnel" class="Polaris-Button">
<span class="Polaris-Button__Content">
<span class="Polaris-Button__Text">Funnels</span>
</span>
</router-link>
</div>
<div class="Polaris-ButtonGroup__Item">
<router-link to="/help" class="Polaris-Button">
<span class="Polaris-Button__Content">
<span class="Polaris-Button__Text">Help Center</span>
</span>
</router-link>
</div>
<div class="Polaris-ButtonGroup__Item">
<div>
<button type="button" id="moreSeting" class="Polaris-Button" tabindex="0" aria-controls="Popover486" aria-owns="Popover486" aria-haspopup="true" aria-expanded="false">
<span class="Polaris-Button__Content">
<span class="Polaris-Button__Text">More</span>
<span class="Polaris-Button__Icon">
<span class="Polaris-Icon">
<svg viewBox="0 0 20 20" class="Polaris-Icon__Svg" focusable="false" aria-hidden="true">
<path d="M5 8l5 5 5-5z" fill-rule="evenodd"></path>
</svg>
</span>
</span>
</span>
<div id="dropdownContent" class="dropdown-content">
<!-- 这里放下拉列表的内容 -->
<a href="payment.html">Payment</a>
<a href="facebookPixel.html">Pixel</a>
</div>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
这段代码是一个包裹了一组按钮的容器,按钮有不同的功能和链接,最后一个按钮具有下拉列表的功能。
<div class="Polaris-Stack__Item">
<div class="Polaris-Stack Polaris-Stack--spacingTight">
<div class="Polaris-Stack__Item">
<div class="sc-1pokqsy-0 dqXEel">
<div tabindex="-1" aria-controls="Popover493" aria-owns="Popover493" aria-haspopup="true" aria-expanded="false">
<div class="sc-1pokqsy-1 fQGSrj">
<div class="Polaris-Stack Polaris-Stack--spacingExtraTight Polaris-Stack--alignmentCenter">
<div class="Polaris-Stack__Item">
<p>Status: </p>
</div>
<div class="Polaris-Stack__Item">
<span class="Polaris-Badge Polaris-Badge--statusSuccess">
<span class="Polaris-VisuallyHidden">Success</span>Enabled
</span>
</div>
<div class="Polaris-Stack__Item">
<span class="Polaris-Icon Polaris-Icon--colorInkLightest Polaris-Icon--isColored">
<svg viewBox="0 0 20 20" class="Polaris-Icon__Svg" focusable="false" aria-hidden="true">
<path d="M5 8l5 5 5-5z" fill-rule="evenodd"></path>
</svg>
</span>
</div>
</div>
</div>
</div>
<div class="ynsxbt-0 iqzcmc" style="display: none;">
<div class="ynsxbt-1 fHRVPN">
<div class="Polaris-Card">
<div class="Polaris-Card__Section">
<div class="Polaris-Stack Polaris-Stack--distributionEqualSpacing">
<div class="Polaris-Stack__Item">
<h2 class="Polaris-Heading">Disable PPFunnels?</h2>
</div>
<div class="Polaris-Stack__Item">
<div class="ynsxbt-2 gYaAIi">
<span class="Polaris-Icon Polaris-Icon--colorInkLightest Polaris-Icon--isColored">
<svg viewBox="0 0 20 20" class="Polaris-Icon__Svg" focusable="false" aria-hidden="true">
<path d="M11.414 10l6.293-6.293a.999.999 0 1 0-1.414-1.414L10 8.586 3.707 2.293a.999.999 0 1 0-1.414 1.414L8.586 10l-6.293 6.293a.999.999 0 1 0 1.414 1.414L10 11.414l6.293 6.293a.997.997 0 0 0 1.414 0 .999.999 0 0 0 0-1.414L11.414 10z" fill-rule="evenodd"></path>
</svg>
</span>
</div>
</div>
</div>
</div>
<div class="ynsxbt-3 bZoarq">
<div class="Polaris-Card">
<div class="Polaris-Card__Section">
<div class="Polaris-TextContainer">
<p>All PPFunnels features will be disabled.</p>
<p>Checkouts will be processed by Shopify.</p>
</div>
</div>
</div>
</div>
<div class="Polaris-Card__Section">
<div class="Polaris-Stack Polaris-Stack--distributionTrailing">
<div class="Polaris-Stack__Item">
<div class="Polaris-ButtonGroup">
<div class="Polaris-ButtonGroup__Item">
<button type="button" class="Polaris-Button">
<span class="Polaris-Button__Content">
<span class="Polaris-Button__Text">Cancel</span>
</span>
</button>
</div>
<div class="Polaris-ButtonGroup__Item">
<button type="button" class="Polaris-Button Polaris-Button--destructive">
<span class="Polaris-Button__Content">
<span class="Polaris-Button__Text">Disable PPFunnels</span>
</span>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
这段代码是一个包含了一个状态和两个按钮的卡片,点击按钮会触发不同的操作。
整体来说,这段代码是一个Vue组件的模板,包含了不同功能和样式的HTML元素。根据class可以判断元素的样式和功能
原文地址: https://www.cveoy.top/t/topic/im2i 著作权归作者所有。请勿转载和采集!