Code section fixes
parent
d74b3a20c5
commit
fc61cdad4f
|
@ -1,6 +1,6 @@
|
||||||
<template>
|
<template>
|
||||||
<DocSectionText v-bind="$attrs" />
|
<DocSectionText v-bind="$attrs" />
|
||||||
<DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz />
|
<DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
|
@ -12,7 +12,7 @@
|
||||||
element.
|
element.
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz v-bind="$attrs" />
|
<DocSectionCode :code="code" hideToggleCode hideCodeSandbox hideStackBlitz v-bind="$attrs" />
|
||||||
|
|
||||||
<h3>Closed State Keyboard Support</h3>
|
<h3>Closed State Keyboard Support</h3>
|
||||||
<div class="doc-tablewrapper">
|
<div class="doc-tablewrapper">
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
<template>
|
<template>
|
||||||
<DocSectionText v-bind="$attrs"></DocSectionText>
|
<DocSectionText v-bind="$attrs"></DocSectionText>
|
||||||
<DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz />
|
<DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
<template>
|
<template>
|
||||||
<DocSectionText v-bind="$attrs"></DocSectionText>
|
<DocSectionText v-bind="$attrs"></DocSectionText>
|
||||||
<DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz />
|
<DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
<template>
|
<template>
|
||||||
<DocSectionText v-bind="$attrs"></DocSectionText>
|
<DocSectionText v-bind="$attrs"></DocSectionText>
|
||||||
<DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz />
|
<DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
<template>
|
<template>
|
||||||
<DocSectionText v-bind="$attrs" />
|
<DocSectionText v-bind="$attrs" />
|
||||||
<DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz />
|
<DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
<template>
|
<template>
|
||||||
<DocSectionText v-bind="$attrs" />
|
<DocSectionText v-bind="$attrs" />
|
||||||
<DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz />
|
<DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
|
@ -6,7 +6,7 @@
|
||||||
icon only or custom templating is used, it is recommended to use <i>aria-label</i> so that screen readers would be able to read the element properly.
|
icon only or custom templating is used, it is recommended to use <i>aria-label</i> so that screen readers would be able to read the element properly.
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz v-bind="$attrs" />
|
<DocSectionCode :code="code" hideToggleCode hideCodeSandbox hideStackBlitz v-bind="$attrs" />
|
||||||
<h3>Keyboard Support</h3>
|
<h3>Keyboard Support</h3>
|
||||||
<div class="doc-tablewrapper">
|
<div class="doc-tablewrapper">
|
||||||
<table class="doc-table">
|
<table class="doc-table">
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
<template>
|
<template>
|
||||||
<DocSectionText v-bind="$attrs" />
|
<DocSectionText v-bind="$attrs" />
|
||||||
<DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz />
|
<DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
|
@ -28,7 +28,7 @@
|
||||||
|
|
||||||
<p>Calendar also includes a hidden section that is only available to screen readers with <i>aria-live</i> as "polite". This element is updated when the selected date changes to instruct the user about the current date selected.</p>
|
<p>Calendar also includes a hidden section that is only available to screen readers with <i>aria-live</i> as "polite". This element is updated when the selected date changes to instruct the user about the current date selected.</p>
|
||||||
|
|
||||||
<DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz v-bind="$attrs" />
|
<DocSectionCode :code="code" hideToggleCode hideCodeSandbox hideStackBlitz v-bind="$attrs" />
|
||||||
|
|
||||||
<h3>Choose Date Button Keyboard Support</h3>
|
<h3>Choose Date Button Keyboard Support</h3>
|
||||||
<div class="doc-tablewrapper">
|
<div class="doc-tablewrapper">
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
<template>
|
<template>
|
||||||
<DocSectionText v-bind="$attrs" />
|
<DocSectionText v-bind="$attrs" />
|
||||||
<DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz />
|
<DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
|
@ -6,7 +6,7 @@
|
||||||
to use one of the <a href="https://www.w3.org/TR/wai-aria/#landmark" alt="Landmark Roles">landmark</a> roles like <i>region</i>, you may use the <i>role</i> property.
|
to use one of the <a href="https://www.w3.org/TR/wai-aria/#landmark" alt="Landmark Roles">landmark</a> roles like <i>region</i>, you may use the <i>role</i> property.
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz v-bind="$attrs" />
|
<DocSectionCode :code="code" hideToggleCode hideCodeSandbox hideStackBlitz v-bind="$attrs" />
|
||||||
|
|
||||||
<h3>Keyboard Support</h3>
|
<h3>Keyboard Support</h3>
|
||||||
<p>Component does not include any interactive elements.</p>
|
<p>Component does not include any interactive elements.</p>
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
<template>
|
<template>
|
||||||
<DocSectionText v-bind="$attrs" />
|
<DocSectionText v-bind="$attrs" />
|
||||||
<DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz />
|
<DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
<template>
|
<template>
|
||||||
<DocSectionText v-bind="$attrs" />
|
<DocSectionText v-bind="$attrs" />
|
||||||
<DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz />
|
<DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
|
@ -10,7 +10,7 @@
|
||||||
<i>aria-expanded</i> attributes. The container element of a treenode has the <i>group</i> role. The <i>aria-setsize</i>, <i>aria-posinset</i> and <i>aria-level</i> attributes are calculated implicitly and added to each treeitem.
|
<i>aria-expanded</i> attributes. The container element of a treenode has the <i>group</i> role. The <i>aria-setsize</i>, <i>aria-posinset</i> and <i>aria-level</i> attributes are calculated implicitly and added to each treeitem.
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz v-bind="$attrs" />
|
<DocSectionCode :code="code" hideToggleCode hideCodeSandbox hideStackBlitz v-bind="$attrs" />
|
||||||
|
|
||||||
<h3>Closed State Keyboard Support</h3>
|
<h3>Closed State Keyboard Support</h3>
|
||||||
<div class="doc-tablewrapper">
|
<div class="doc-tablewrapper">
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
<template>
|
<template>
|
||||||
<DocSectionText v-bind="$attrs" />
|
<DocSectionText v-bind="$attrs" />
|
||||||
<DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz />
|
<DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
|
@ -6,7 +6,7 @@
|
||||||
<i>canvasProps</i> property to define aria roles and properties, in addition any content inside the component is directly passed as a child of the canvas to be able to provide fallback content like a table.
|
<i>canvasProps</i> property to define aria roles and properties, in addition any content inside the component is directly passed as a child of the canvas to be able to provide fallback content like a table.
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz v-bind="$attrs" />
|
<DocSectionCode :code="code" hideToggleCode hideCodeSandbox hideStackBlitz v-bind="$attrs" />
|
||||||
</DocSectionText>
|
</DocSectionText>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
|
@ -2,7 +2,7 @@
|
||||||
<DocSectionText v-bind="$attrs">
|
<DocSectionText v-bind="$attrs">
|
||||||
<p>Chart component uses <a href="https://chartjs.org/">Chart.JS</a> underneath so it needs to be installed as a dependency.</p>
|
<p>Chart component uses <a href="https://chartjs.org/">Chart.JS</a> underneath so it needs to be installed as a dependency.</p>
|
||||||
</DocSectionText>
|
</DocSectionText>
|
||||||
<DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz />
|
<DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
<template>
|
<template>
|
||||||
<DocSectionText v-bind="$attrs" />
|
<DocSectionText v-bind="$attrs" />
|
||||||
<DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz />
|
<DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
|
@ -6,7 +6,7 @@
|
||||||
<i>aria-labelledby</i>, <i>aria-label</i> props.
|
<i>aria-labelledby</i>, <i>aria-label</i> props.
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz v-bind="$attrs" />
|
<DocSectionCode :code="code" hideToggleCode hideCodeSandbox hideStackBlitz v-bind="$attrs" />
|
||||||
|
|
||||||
<h3>Keyboard Support</h3>
|
<h3>Keyboard Support</h3>
|
||||||
<div class="doc-tablewrapper">
|
<div class="doc-tablewrapper">
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
<template>
|
<template>
|
||||||
<DocSectionText v-bind="$attrs" />
|
<DocSectionText v-bind="$attrs" />
|
||||||
<DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz />
|
<DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
<template>
|
<template>
|
||||||
<DocSectionText v-bind="$attrs" />
|
<DocSectionText v-bind="$attrs" />
|
||||||
<DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz />
|
<DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
|
@ -6,7 +6,7 @@
|
||||||
horizontal whereas each chip has the <i>option</i> role with <i>aria-label</i> set to the label of the chip.
|
horizontal whereas each chip has the <i>option</i> role with <i>aria-label</i> set to the label of the chip.
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz v-bind="$attrs" />
|
<DocSectionCode :code="code" hideToggleCode hideCodeSandbox hideStackBlitz v-bind="$attrs" />
|
||||||
|
|
||||||
<h3>Input Field Keyboard Support</h3>
|
<h3>Input Field Keyboard Support</h3>
|
||||||
<div class="doc-tablewrapper">
|
<div class="doc-tablewrapper">
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
<template>
|
<template>
|
||||||
<DocSectionText v-bind="$attrs" />
|
<DocSectionText v-bind="$attrs" />
|
||||||
<DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz />
|
<DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
<template>
|
<template>
|
||||||
<DocSectionText v-bind="$attrs" />
|
<DocSectionText v-bind="$attrs" />
|
||||||
<DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz />
|
<DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
|
@ -63,7 +63,7 @@
|
||||||
<div :style="{ backgroundColor: 'var(--highlight-bg)', color: 'var(--highlight-text-color)', borderRadius: 'var(--border-radius)', padding: '3rem' }">Highlighted Item</div>
|
<div :style="{ backgroundColor: 'var(--highlight-bg)', color: 'var(--highlight-text-color)', borderRadius: 'var(--border-radius)', padding: '3rem' }">Highlighted Item</div>
|
||||||
<div :style="{ backgroundColor: 'var(--primary-color)', color: 'var(--primary-color-text)', borderRadius: 'var(--border-radius)', padding: '3rem' }">Primary Color</div>
|
<div :style="{ backgroundColor: 'var(--primary-color)', color: 'var(--primary-color-text)', borderRadius: 'var(--border-radius)', padding: '3rem' }">Primary Color</div>
|
||||||
</div>
|
</div>
|
||||||
<DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz />
|
<DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
|
@ -2,7 +2,7 @@
|
||||||
<DocSectionText v-bind="$attrs">
|
<DocSectionText v-bind="$attrs">
|
||||||
<p>Configuration is managed by the <i>PrimeVue</i> instance imported from <i>primevue/config</i>.</p>
|
<p>Configuration is managed by the <i>PrimeVue</i> instance imported from <i>primevue/config</i>.</p>
|
||||||
</DocSectionText>
|
</DocSectionText>
|
||||||
<DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz />
|
<DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
|
@ -7,7 +7,7 @@
|
||||||
PrimeVue configuration as well.
|
PrimeVue configuration as well.
|
||||||
</p>
|
</p>
|
||||||
</DocSectionText>
|
</DocSectionText>
|
||||||
<DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz />
|
<DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
|
@ -5,12 +5,12 @@
|
||||||
<h6>nuxt.config.js</h6>
|
<h6>nuxt.config.js</h6>
|
||||||
<p>Open the nuxt configuration file and add the css dependencies.</p>
|
<p>Open the nuxt configuration file and add the css dependencies.</p>
|
||||||
|
|
||||||
<DocSectionCode :code="code1" hideToggleCode import hideCodeSandbox hideStackBlitz />
|
<DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||||
|
|
||||||
<h6>primevue.js</h6>
|
<h6>primevue.js</h6>
|
||||||
<p>Create a file like <i>primevue.js</i> under the plugins directory for the configuration.</p>
|
<p>Create a file like <i>primevue.js</i> under the plugins directory for the configuration.</p>
|
||||||
|
|
||||||
<DocSectionCode :code="code2" hideToggleCode import hideCodeSandbox hideStackBlitz />
|
<DocSectionCode :code="code2" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||||
</DocSectionText>
|
</DocSectionText>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
|
@ -2,7 +2,7 @@
|
||||||
<DocSectionText v-bind="$attrs">
|
<DocSectionText v-bind="$attrs">
|
||||||
<p>Component prop names are described as camel case throughout the documentation however camel-case is also fully supported. Events on the other hand should always be camel-case.</p>
|
<p>Component prop names are described as camel case throughout the documentation however camel-case is also fully supported. Events on the other hand should always be camel-case.</p>
|
||||||
|
|
||||||
<DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz />
|
<DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||||
</DocSectionText>
|
</DocSectionText>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
|
@ -2,7 +2,7 @@
|
||||||
<DocSectionText v-bind="$attrs">
|
<DocSectionText v-bind="$attrs">
|
||||||
<p>Ripple is an optional animation for the supported components such as buttons. It is disabled by default and needs to be enabled at your app's entry file (e.g. main.js) during the PrimeVue setup.</p>
|
<p>Ripple is an optional animation for the supported components such as buttons. It is disabled by default and needs to be enabled at your app's entry file (e.g. main.js) during the PrimeVue setup.</p>
|
||||||
|
|
||||||
<DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz />
|
<DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||||
</DocSectionText>
|
</DocSectionText>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
|
@ -6,7 +6,7 @@
|
||||||
default values for components categories. Default values are described below and can be customized when setting up PrimeVue.
|
default values for components categories. Default values are described below and can be customized when setting up PrimeVue.
|
||||||
</p>
|
</p>
|
||||||
</DocSectionText>
|
</DocSectionText>
|
||||||
<DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz />
|
<DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
|
@ -10,8 +10,8 @@
|
||||||
When <i>require</i> method of the <i>$confirm</i> instance is used and a trigger is passed as a parameter, ConfirmDialog adds <i>aria-expanded</i> state attribute and <i>aria-controls</i> to the trigger so that the relation between the
|
When <i>require</i> method of the <i>$confirm</i> instance is used and a trigger is passed as a parameter, ConfirmDialog adds <i>aria-expanded</i> state attribute and <i>aria-controls</i> to the trigger so that the relation between the
|
||||||
trigger and the dialog is defined.
|
trigger and the dialog is defined.
|
||||||
</p>
|
</p>
|
||||||
<DocSectionCode :code="code1" hideToggleCode import hideCodeSandbox hideStackBlitz v-bind="$attrs" />
|
<DocSectionCode :code="code1" hideToggleCode hideCodeSandbox hideStackBlitz v-bind="$attrs" />
|
||||||
<DocSectionCode :code="code2" hideToggleCode import hideCodeSandbox hideStackBlitz v-bind="$attrs" />
|
<DocSectionCode :code="code2" hideToggleCode hideCodeSandbox hideStackBlitz v-bind="$attrs" />
|
||||||
<h3>Overlay Keyboard Support</h3>
|
<h3>Overlay Keyboard Support</h3>
|
||||||
<div class="doc-tablewrapper">
|
<div class="doc-tablewrapper">
|
||||||
<table class="doc-table">
|
<table class="doc-table">
|
||||||
|
|
|
@ -2,7 +2,7 @@
|
||||||
<DocSectionText v-bind="$attrs">
|
<DocSectionText v-bind="$attrs">
|
||||||
<p>ConfirmDialog is controlled via the <i>ConfirmationService</i> that needs to be installed globally before the application instance is created.</p>
|
<p>ConfirmDialog is controlled via the <i>ConfirmationService</i> that needs to be installed globally before the application instance is created.</p>
|
||||||
</DocSectionText>
|
</DocSectionText>
|
||||||
<DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz />
|
<DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
<template>
|
<template>
|
||||||
<DocSectionText v-bind="$attrs" />
|
<DocSectionText v-bind="$attrs" />
|
||||||
<DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz />
|
<DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
|
@ -9,8 +9,8 @@
|
||||||
When <i>require</i> method of the <i>$confirm</i> instance is used and a trigger is passed as a parameter, ConfirmDialog adds <i>aria-expanded</i> state attribute and <i>aria-controls</i> to the trigger so that the relation between the
|
When <i>require</i> method of the <i>$confirm</i> instance is used and a trigger is passed as a parameter, ConfirmDialog adds <i>aria-expanded</i> state attribute and <i>aria-controls</i> to the trigger so that the relation between the
|
||||||
trigger and the dialog is defined.
|
trigger and the dialog is defined.
|
||||||
</p>
|
</p>
|
||||||
<DocSectionCode :code="code1" hideToggleCode import hideCodeSandbox hideStackBlitz v-bind="$attrs" />
|
<DocSectionCode :code="code1" hideToggleCode hideCodeSandbox hideStackBlitz v-bind="$attrs" />
|
||||||
<DocSectionCode :code="code2" hideToggleCode import hideCodeSandbox hideStackBlitz v-bind="$attrs" />
|
<DocSectionCode :code="code2" hideToggleCode hideCodeSandbox hideStackBlitz v-bind="$attrs" />
|
||||||
<h3>Overlay Keyboard Support</h3>
|
<h3>Overlay Keyboard Support</h3>
|
||||||
<div class="doc-tablewrapper">
|
<div class="doc-tablewrapper">
|
||||||
<table class="doc-table">
|
<table class="doc-table">
|
||||||
|
|
|
@ -2,7 +2,7 @@
|
||||||
<DocSectionText v-bind="$attrs">
|
<DocSectionText v-bind="$attrs">
|
||||||
<p>ConfirmDialog is controlled via the <i>ConfirmationService</i> that needs to be installed globally before the application instance is created.</p>
|
<p>ConfirmDialog is controlled via the <i>ConfirmationService</i> that needs to be installed globally before the application instance is created.</p>
|
||||||
</DocSectionText>
|
</DocSectionText>
|
||||||
<DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz />
|
<DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
<template>
|
<template>
|
||||||
<DocSectionText v-bind="$attrs" />
|
<DocSectionText v-bind="$attrs" />
|
||||||
<DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz />
|
<DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
<template>
|
<template>
|
||||||
<DocSectionText v-bind="$attrs" />
|
<DocSectionText v-bind="$attrs" />
|
||||||
<DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz />
|
<DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
<template>
|
<template>
|
||||||
<DocSectionText v-bind="$attrs" />
|
<DocSectionText v-bind="$attrs" />
|
||||||
<DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz />
|
<DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
<template>
|
<template>
|
||||||
<DocSectionText v-bind="$attrs" />
|
<DocSectionText v-bind="$attrs" />
|
||||||
<DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz />
|
<DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
|
@ -2,8 +2,8 @@
|
||||||
<DocSectionText v-bind="$attrs">
|
<DocSectionText v-bind="$attrs">
|
||||||
<p>DataView depends on PrimeFlex Grid functionality so it needs to be installed and imported.</p>
|
<p>DataView depends on PrimeFlex Grid functionality so it needs to be installed and imported.</p>
|
||||||
</DocSectionText>
|
</DocSectionText>
|
||||||
<DocSectionCode :code="code1" hideToggleCode import hideCodeSandbox hideStackBlitz />
|
<DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||||
<DocSectionCode :code="code2" hideToggleCode import hideCodeSandbox hideStackBlitz />
|
<DocSectionCode :code="code2" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
|
@ -5,14 +5,24 @@
|
||||||
DeferredContent can be utilized in many use cases as a result no role is enforced, in fact a role may not be necessary if the card is used for presentational purposes only. Any valid attribute is passed to the container element so you
|
DeferredContent can be utilized in many use cases as a result no role is enforced, in fact a role may not be necessary if the card is used for presentational purposes only. Any valid attribute is passed to the container element so you
|
||||||
have full control over the roles like <a href="https://www.w3.org/TR/wai-aria/#landmark" alt="Landmark Roles">landmark</a> and attributes like <i>aria-live</i>.
|
have full control over the roles like <a href="https://www.w3.org/TR/wai-aria/#landmark" alt="Landmark Roles">landmark</a> and attributes like <i>aria-live</i>.
|
||||||
</p>
|
</p>
|
||||||
<pre v-code><code>
|
<DocSectionCode :code="code" hideToggleCode hideCodeSandbox hideStackBlitz v-bind="$attrs" />
|
||||||
<DeferredContent role="region" aria-live="polite" aria-label="Content loaded after page scrolled down">
|
|
||||||
Content
|
|
||||||
</DeferredContent>
|
|
||||||
|
|
||||||
</code></pre>
|
|
||||||
|
|
||||||
<h3>Keyboard Support</h3>
|
<h3>Keyboard Support</h3>
|
||||||
<p>Component does not include any interactive elements.</p>
|
<p>Component does not include any interactive elements.</p>
|
||||||
</DocSectionText>
|
</DocSectionText>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
code: {
|
||||||
|
basic: `
|
||||||
|
<DeferredContent role="region" aria-live="polite" aria-label="Content loaded after page scrolled down>
|
||||||
|
Content
|
||||||
|
</DeferredContent>`
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
<template>
|
<template>
|
||||||
<DocSectionText v-bind="$attrs" />
|
<DocSectionText v-bind="$attrs" />
|
||||||
<DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz />
|
<DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
|
@ -11,7 +11,7 @@
|
||||||
override the default <i>aria-label</i>.
|
override the default <i>aria-label</i>.
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz v-bind="$attrs" />
|
<DocSectionCode :code="code" hideToggleCode hideCodeSandbox hideStackBlitz v-bind="$attrs" />
|
||||||
|
|
||||||
<h3>Overlay Keyboard Support</h3>
|
<h3>Overlay Keyboard Support</h3>
|
||||||
<div class="doc-tablewrapper">
|
<div class="doc-tablewrapper">
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
<template>
|
<template>
|
||||||
<DocSectionText v-bind="$attrs" />
|
<DocSectionText v-bind="$attrs" />
|
||||||
<DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz />
|
<DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
<template>
|
<template>
|
||||||
<DocSectionText v-bind="$attrs" />
|
<DocSectionText v-bind="$attrs" />
|
||||||
<DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz />
|
<DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
<template>
|
<template>
|
||||||
<DocSectionText v-bind="$attrs" />
|
<DocSectionText v-bind="$attrs" />
|
||||||
<DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz />
|
<DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
|
@ -13,7 +13,7 @@
|
||||||
|
|
||||||
<p>If filtering is enabled, <i>filterInputProps</i> can be defined to give <i>aria-*</i> props to the filter input element.</p>
|
<p>If filtering is enabled, <i>filterInputProps</i> can be defined to give <i>aria-*</i> props to the filter input element.</p>
|
||||||
|
|
||||||
<DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz v-bind="$attrs" />
|
<DocSectionCode :code="code" hideToggleCode hideCodeSandbox hideStackBlitz v-bind="$attrs" />
|
||||||
|
|
||||||
<h3>Closed State Keyboard Support</h3>
|
<h3>Closed State Keyboard Support</h3>
|
||||||
<div class="doc-tablewrapper">
|
<div class="doc-tablewrapper">
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
<template>
|
<template>
|
||||||
<DocSectionText v-bind="$attrs"></DocSectionText>
|
<DocSectionText v-bind="$attrs"></DocSectionText>
|
||||||
<DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz />
|
<DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
|
@ -2,7 +2,7 @@
|
||||||
<DocSectionText v-bind="$attrs">
|
<DocSectionText v-bind="$attrs">
|
||||||
<p>DynamicDialog uses the Dialog component internally, visit <NuxtLink to="/dialog">dialog</NuxtLink> for more information.</p>
|
<p>DynamicDialog uses the Dialog component internally, visit <NuxtLink to="/dialog">dialog</NuxtLink> for more information.</p>
|
||||||
</DocSectionText>
|
</DocSectionText>
|
||||||
<DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz />
|
<DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
|
@ -2,7 +2,7 @@
|
||||||
<DocSectionText v-bind="$attrs">
|
<DocSectionText v-bind="$attrs">
|
||||||
<p>Dynamic dialogs require the <i>DialogService</i> to be configured globally.</p>
|
<p>Dynamic dialogs require the <i>DialogService</i> to be configured globally.</p>
|
||||||
</DocSectionText>
|
</DocSectionText>
|
||||||
<DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz />
|
<DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
<template>
|
<template>
|
||||||
<DocSectionText v-bind="$attrs" />
|
<DocSectionText v-bind="$attrs" />
|
||||||
<DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz />
|
<DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
<template>
|
<template>
|
||||||
<DocSectionText v-bind="$attrs" />
|
<DocSectionText v-bind="$attrs" />
|
||||||
<DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz />
|
<DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
|
@ -2,7 +2,7 @@
|
||||||
<DocSectionText v-bind="$attrs">
|
<DocSectionText v-bind="$attrs">
|
||||||
<p>Editor uses <a href="https://quilljs.com/">Quill</a> editor underneath so it needs to be installed as a dependency.</p>
|
<p>Editor uses <a href="https://quilljs.com/">Quill</a> editor underneath so it needs to be installed as a dependency.</p>
|
||||||
</DocSectionText>
|
</DocSectionText>
|
||||||
<DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz />
|
<DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
<template>
|
<template>
|
||||||
<DocSectionText v-bind="$attrs" />
|
<DocSectionText v-bind="$attrs" />
|
||||||
<DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz />
|
<DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
|
@ -4,6 +4,6 @@
|
||||||
<p>FileUpload uses a hidden native <i>input</i> element with <i>type="file"</i> for screen readers.</p>
|
<p>FileUpload uses a hidden native <i>input</i> element with <i>type="file"</i> for screen readers.</p>
|
||||||
|
|
||||||
<h3>Keyboard Support</h3>
|
<h3>Keyboard Support</h3>
|
||||||
<p>Interactive elements of the uploader are buttons, visit the <Link href="/button#accessibility">Button</Link> accessibility section for more information.</p>
|
<p>Interactive elements of the uploader are buttons, visit the <NuxtLink to="/button/#accessibility">Button</NuxtLink> accessibility section for more information.</p>
|
||||||
</DocSectionText>
|
</DocSectionText>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
<template>
|
<template>
|
||||||
<DocSectionText v-bind="$attrs" />
|
<DocSectionText v-bind="$attrs" />
|
||||||
<DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz />
|
<DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
|
@ -2,7 +2,7 @@
|
||||||
<DocSectionText v-bind="$attrs">
|
<DocSectionText v-bind="$attrs">
|
||||||
<p>FilterService can be extended by adding new constraints using the register function.</p>
|
<p>FilterService can be extended by adding new constraints using the register function.</p>
|
||||||
</DocSectionText>
|
</DocSectionText>
|
||||||
<DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz />
|
<DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
<template>
|
<template>
|
||||||
<DocSectionText v-bind="$attrs" />
|
<DocSectionText v-bind="$attrs" />
|
||||||
<DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz />
|
<DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
|
@ -2,7 +2,7 @@
|
||||||
<DocSectionText v-bind="$attrs">
|
<DocSectionText v-bind="$attrs">
|
||||||
<p>Filters are accessed with <i>FilterService.filters</i>.</p>
|
<p>Filters are accessed with <i>FilterService.filters</i>.</p>
|
||||||
</DocSectionText>
|
</DocSectionText>
|
||||||
<DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz />
|
<DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
<template>
|
<template>
|
||||||
<DocSectionText v-bind="$attrs" />
|
<DocSectionText v-bind="$attrs" />
|
||||||
<DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz />
|
<DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
<template>
|
<template>
|
||||||
<DocSectionText v-bind="$attrs"></DocSectionText>
|
<DocSectionText v-bind="$attrs"></DocSectionText>
|
||||||
<DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz />
|
<DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
|
@ -8,7 +8,7 @@
|
||||||
<span class="pi pi-search"></span>
|
<span class="pi pi-search"></span>
|
||||||
<span class="pi pi-user"></span>
|
<span class="pi pi-user"></span>
|
||||||
</div>
|
</div>
|
||||||
<DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz />
|
<DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
|
@ -8,7 +8,7 @@
|
||||||
<i class="pi pi-search" style="color: 'var(--primary-color)'"></i>
|
<i class="pi pi-search" style="color: 'var(--primary-color)'"></i>
|
||||||
<i class="pi pi-user" style="color: #708090"></i>
|
<i class="pi pi-user" style="color: #708090"></i>
|
||||||
</div>
|
</div>
|
||||||
<DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz />
|
<DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
|
@ -5,7 +5,7 @@
|
||||||
<div class="card flex justify-content-center">
|
<div class="card flex justify-content-center">
|
||||||
<Menu :model="items" />
|
<Menu :model="items" />
|
||||||
</div>
|
</div>
|
||||||
<DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz />
|
<DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
|
@ -2,7 +2,7 @@
|
||||||
<DocSectionText v-bind="$attrs">
|
<DocSectionText v-bind="$attrs">
|
||||||
<p>PrimeIcons is available at npm, run the following command to download it to your project.</p>
|
<p>PrimeIcons is available at npm, run the following command to download it to your project.</p>
|
||||||
</DocSectionText>
|
</DocSectionText>
|
||||||
<DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz />
|
<DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
|
@ -2,7 +2,7 @@
|
||||||
<DocSectionText v-bind="$attrs">
|
<DocSectionText v-bind="$attrs">
|
||||||
<p>CSS file of the icon library needs to be imported in your application.</p>
|
<p>CSS file of the icon library needs to be imported in your application.</p>
|
||||||
</DocSectionText>
|
</DocSectionText>
|
||||||
<DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz />
|
<DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
|
@ -8,7 +8,7 @@
|
||||||
<i class="pi pi-search" style="font-size: 2rem"></i>
|
<i class="pi pi-search" style="font-size: 2rem"></i>
|
||||||
<i class="pi pi-user" style="font-size: 2.5rem"></i>
|
<i class="pi pi-user" style="font-size: 2.5rem"></i>
|
||||||
</div>
|
</div>
|
||||||
<DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz />
|
<DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
|
@ -6,7 +6,7 @@
|
||||||
<i class="pi pi-spin pi-spinner" style="font-size: 2rem"></i>
|
<i class="pi pi-spin pi-spinner" style="font-size: 2rem"></i>
|
||||||
<i class="pi pi-spin pi-cog" style="font-size: 2rem"></i>
|
<i class="pi pi-spin pi-cog" style="font-size: 2rem"></i>
|
||||||
</div>
|
</div>
|
||||||
<DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz />
|
<DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
<template>
|
<template>
|
||||||
<DocSectionText v-bind="$attrs"></DocSectionText>
|
<DocSectionText v-bind="$attrs"></DocSectionText>
|
||||||
<DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz />
|
<DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
<template>
|
<template>
|
||||||
<DocSectionText v-bind="$attrs" />
|
<DocSectionText v-bind="$attrs" />
|
||||||
<DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz />
|
<DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
<template>
|
<template>
|
||||||
<DocSectionText v-bind="$attrs"></DocSectionText>
|
<DocSectionText v-bind="$attrs"></DocSectionText>
|
||||||
<DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz />
|
<DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
|
@ -6,7 +6,7 @@
|
||||||
<i>aria-label</i> props.
|
<i>aria-label</i> props.
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz v-bind="$attrs" />
|
<DocSectionCode :code="code" hideToggleCode hideCodeSandbox hideStackBlitz v-bind="$attrs" />
|
||||||
<h3>Keyboard Support</h3>
|
<h3>Keyboard Support</h3>
|
||||||
<div class="doc-tablewrapper">
|
<div class="doc-tablewrapper">
|
||||||
<table class="doc-table">
|
<table class="doc-table">
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
<template>
|
<template>
|
||||||
<DocSectionText v-bind="$attrs" />
|
<DocSectionText v-bind="$attrs" />
|
||||||
<DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz />
|
<DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
|
@ -6,7 +6,7 @@
|
||||||
<i>aria-valuemin</i>, <i>aria-valuemax</i> and <i>aria-valuenow</i> attributes.
|
<i>aria-valuemin</i>, <i>aria-valuemax</i> and <i>aria-valuenow</i> attributes.
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz v-bind="$attrs" />
|
<DocSectionCode :code="code" hideToggleCode hideCodeSandbox hideStackBlitz v-bind="$attrs" />
|
||||||
|
|
||||||
<h3>Keyboard Support</h3>
|
<h3>Keyboard Support</h3>
|
||||||
<div class="doc-tablewrapper">
|
<div class="doc-tablewrapper">
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
<template>
|
<template>
|
||||||
<DocSectionText v-bind="$attrs"></DocSectionText>
|
<DocSectionText v-bind="$attrs"></DocSectionText>
|
||||||
<DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz />
|
<DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
|
@ -6,7 +6,7 @@
|
||||||
<i>id</i> prop or using <i>aria-labelledby</i>, <i>aria-label</i> props.
|
<i>id</i> prop or using <i>aria-labelledby</i>, <i>aria-label</i> props.
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz v-bind="$attrs" />
|
<DocSectionCode :code="code" hideToggleCode hideCodeSandbox hideStackBlitz v-bind="$attrs" />
|
||||||
<h3>Keyboard Support</h3>
|
<h3>Keyboard Support</h3>
|
||||||
<div class="doc-tablewrapper">
|
<div class="doc-tablewrapper">
|
||||||
<table class="doc-table">
|
<table class="doc-table">
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
<template>
|
<template>
|
||||||
<DocSectionText v-bind="$attrs" />
|
<DocSectionText v-bind="$attrs" />
|
||||||
<DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz />
|
<DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
|
@ -6,7 +6,7 @@
|
||||||
<i>aria-label</i> props.
|
<i>aria-label</i> props.
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz v-bind="$attrs" />
|
<DocSectionCode :code="code" hideToggleCode hideCodeSandbox hideStackBlitz v-bind="$attrs" />
|
||||||
|
|
||||||
<h3>Keyboard Support</h3>
|
<h3>Keyboard Support</h3>
|
||||||
<div class="doc-tablewrapper">
|
<div class="doc-tablewrapper">
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
<template>
|
<template>
|
||||||
<DocSectionText v-bind="$attrs" />
|
<DocSectionText v-bind="$attrs" />
|
||||||
<DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz />
|
<DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
|
@ -2,7 +2,7 @@
|
||||||
<DocSectionText v-bind="$attrs">
|
<DocSectionText v-bind="$attrs">
|
||||||
<p>PrimeVue is available for download at <a href="https://www.npmjs.com/package/primevue">npm</a>.</p>
|
<p>PrimeVue is available for download at <a href="https://www.npmjs.com/package/primevue">npm</a>.</p>
|
||||||
</DocSectionText>
|
</DocSectionText>
|
||||||
<DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz />
|
<DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
|
@ -2,7 +2,7 @@
|
||||||
<DocSectionText v-bind="$attrs">
|
<DocSectionText v-bind="$attrs">
|
||||||
<p>Theme, core and icons are the necessary css files of the components, visit the <NuxtLink to="/theming#themes">Themes</NuxtLink> section for the complete list of available themes to choose from.</p>
|
<p>Theme, core and icons are the necessary css files of the components, visit the <NuxtLink to="/theming#themes">Themes</NuxtLink> section for the complete list of available themes to choose from.</p>
|
||||||
</DocSectionText>
|
</DocSectionText>
|
||||||
<DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz />
|
<DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
|
@ -6,7 +6,7 @@
|
||||||
<i>aria-label</i> props.
|
<i>aria-label</i> props.
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz v-bind="$attrs" />
|
<DocSectionCode :code="code" hideToggleCode hideCodeSandbox hideStackBlitz v-bind="$attrs" />
|
||||||
<h3>Keyboard Support</h3>
|
<h3>Keyboard Support</h3>
|
||||||
<div class="doc-tablewrapper">
|
<div class="doc-tablewrapper">
|
||||||
<table class="doc-table">
|
<table class="doc-table">
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
<template>
|
<template>
|
||||||
<DocSectionText v-bind="$attrs" />
|
<DocSectionText v-bind="$attrs" />
|
||||||
<DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz />
|
<DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
|
@ -7,7 +7,7 @@
|
||||||
</p>
|
</p>
|
||||||
<p>If filtering is enabled, <i>filterInputProps</i> can be defined to give <i>aria-*</i> props to the input element. Alternatively <i>filterPlaceholder</i> is usually utilized by the screen readers as well.</p>
|
<p>If filtering is enabled, <i>filterInputProps</i> can be defined to give <i>aria-*</i> props to the input element. Alternatively <i>filterPlaceholder</i> is usually utilized by the screen readers as well.</p>
|
||||||
|
|
||||||
<DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz v-bind="$attrs" />
|
<DocSectionCode :code="code" hideToggleCode hideCodeSandbox hideStackBlitz v-bind="$attrs" />
|
||||||
|
|
||||||
<h3>Keyboard Support</h3>
|
<h3>Keyboard Support</h3>
|
||||||
<div class="doc-tablewrapper">
|
<div class="doc-tablewrapper">
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
<template>
|
<template>
|
||||||
<DocSectionText v-bind="$attrs" />
|
<DocSectionText v-bind="$attrs" />
|
||||||
<DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz />
|
<DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
|
@ -2,7 +2,7 @@
|
||||||
<DocSectionText v-bind="$attrs">
|
<DocSectionText v-bind="$attrs">
|
||||||
<p>Locale values are stored in the global configuration that becomes accessible after installing the PrimeVue.</p>
|
<p>Locale values are stored in the global configuration that becomes accessible after installing the PrimeVue.</p>
|
||||||
</DocSectionText>
|
</DocSectionText>
|
||||||
<DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz />
|
<DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
|
@ -2,11 +2,11 @@
|
||||||
<DocSectionText v-bind="$attrs">
|
<DocSectionText v-bind="$attrs">
|
||||||
<p>Second parameter of the use function can be used to initiate the locale during PrimeVue installation.</p>
|
<p>Second parameter of the use function can be used to initiate the locale during PrimeVue installation.</p>
|
||||||
|
|
||||||
<DocSectionCode :code="code1" hideToggleCode import hideCodeSandbox hideStackBlitz />
|
<DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||||
|
|
||||||
<p>The locale configuration is reactive so that any changes are instantly reflected in the UI. Suppose you are doing a multi language application and need to change the language dynamically.</p>
|
<p>The locale configuration is reactive so that any changes are instantly reflected in the UI. Suppose you are doing a multi language application and need to change the language dynamically.</p>
|
||||||
|
|
||||||
<DocSectionCode :code="code2" hideToggleCode import hideCodeSandbox hideStackBlitz />
|
<DocSectionCode :code="code2" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||||
</DocSectionText>
|
</DocSectionText>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
<template>
|
<template>
|
||||||
<DocSectionText v-bind="$attrs" />
|
<DocSectionText v-bind="$attrs" />
|
||||||
<DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz />
|
<DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
<template>
|
<template>
|
||||||
<DocSectionText v-bind="$attrs" />
|
<DocSectionText v-bind="$attrs" />
|
||||||
<DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz />
|
<DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
<template>
|
<template>
|
||||||
<DocSectionText v-bind="$attrs" />
|
<DocSectionText v-bind="$attrs" />
|
||||||
<DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz />
|
<DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
<template>
|
<template>
|
||||||
<DocSectionText v-bind="$attrs" />
|
<DocSectionText v-bind="$attrs" />
|
||||||
<DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz />
|
<DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
|
@ -16,7 +16,7 @@
|
||||||
|
|
||||||
<p>Close button uses <i>close</i> key of the <i>aria</i> property from the <NuxtLink to="/locale">locale</NuxtLink> API as the <i>aria-label</i> by default, this can be overriden with the <i>closeButtonProps</i>.</p>
|
<p>Close button uses <i>close</i> key of the <i>aria</i> property from the <NuxtLink to="/locale">locale</NuxtLink> API as the <i>aria-label</i> by default, this can be overriden with the <i>closeButtonProps</i>.</p>
|
||||||
|
|
||||||
<DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz v-bind="$attrs" />
|
<DocSectionCode :code="code" hideToggleCode hideCodeSandbox hideStackBlitz v-bind="$attrs" />
|
||||||
|
|
||||||
<h3>Closed State Keyboard Support</h3>
|
<h3>Closed State Keyboard Support</h3>
|
||||||
<div class="doc-tablewrapper">
|
<div class="doc-tablewrapper">
|
||||||
|
@ -252,10 +252,10 @@ export default {
|
||||||
return {
|
return {
|
||||||
code: {
|
code: {
|
||||||
basic: `
|
basic: `
|
||||||
<span id="dd1"></span>Options</span>
|
<span id="dd1"></span>Options</span>
|
||||||
<MultiSelect aria-labelledby="dd1" />
|
<MultiSelect aria-labelledby="dd1" />
|
||||||
|
|
||||||
<MultiSelect aria-label="Options" />`
|
<MultiSelect aria-label="Options" />`
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
<template>
|
<template>
|
||||||
<DocSectionText v-bind="$attrs" />
|
<DocSectionText v-bind="$attrs" />
|
||||||
<DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz />
|
<DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
|
@ -11,7 +11,7 @@
|
||||||
the default <i>aria-label</i> attributes.
|
the default <i>aria-label</i> attributes.
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz v-bind="$attrs" />
|
<DocSectionCode :code="code" hideToggleCode hideCodeSandbox hideStackBlitz v-bind="$attrs" />
|
||||||
<h3>ListBox Keyboard Support</h3>
|
<h3>ListBox Keyboard Support</h3>
|
||||||
<div class="doc-tablewrapper">
|
<div class="doc-tablewrapper">
|
||||||
<table class="doc-table">
|
<table class="doc-table">
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
<template>
|
<template>
|
||||||
<DocSectionText v-bind="$attrs" />
|
<DocSectionText v-bind="$attrs" />
|
||||||
<DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz />
|
<DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
<template>
|
<template>
|
||||||
<DocSectionText v-bind="$attrs" />
|
<DocSectionText v-bind="$attrs" />
|
||||||
<DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz />
|
<DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
<template>
|
<template>
|
||||||
<DocSectionText v-bind="$attrs" />
|
<DocSectionText v-bind="$attrs" />
|
||||||
<DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz />
|
<DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
<template>
|
<template>
|
||||||
<DocSectionText v-bind="$attrs" />
|
<DocSectionText v-bind="$attrs" />
|
||||||
<DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz />
|
<DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue