Codesandbox samples removed
tugcekucukoglu
parent
13e5910259
commit
b11f12c7ef
|
|
@ -18,16 +18,6 @@
|
|||
</button>
|
||||
</template>
|
||||
|
||||
<template v-if="!hideCodeSandbox">
|
||||
<button v-tooltip.bottom="{ value: 'Edit in CodeSandbox', class: 'doc-section-code-tooltip' }" type="button" class="h-2rem w-2rem p-0 inline-flex align-items-center justify-content-center" @click="showCodesandbox">
|
||||
<svg role="img" viewBox="0 0 24 24" width="16" height="16" fill="currentColor" style="display: 'block'">
|
||||
<path
|
||||
d="M2 6l10.455-6L22.91 6 23 17.95 12.455 24 2 18V6zm2.088 2.481v4.757l3.345 1.86v3.516l3.972 2.296v-8.272L4.088 8.481zm16.739 0l-7.317 4.157v8.272l3.972-2.296V15.1l3.345-1.861V8.48zM5.134 6.601l7.303 4.144 7.32-4.18-3.871-2.197-3.41 1.945-3.43-1.968L5.133 6.6z"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</template>
|
||||
|
||||
<template v-if="!hideStackBlitz">
|
||||
<button v-tooltip.bottom="{ value: 'Edit in StackBlitz', class: 'doc-section-code-tooltip' }" type="button" class="h-2rem w-2rem p-0 inline-flex align-items-center justify-content-center" @click="showStackblitz">
|
||||
<svg role="img" width="13" height="18" viewBox="0 0 13 19" fill="currentColor" xmlns="http://www.w3.org/2000/svg" style="display: 'block'">
|
||||
|
|
@ -72,7 +62,7 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import { useCodeSandbox, useStackBlitz } from './codeeditor';
|
||||
import { useStackBlitz } from './codeeditor';
|
||||
|
||||
export default {
|
||||
inheritAttrs: false,
|
||||
|
|
@ -91,7 +81,7 @@ export default {
|
|||
},
|
||||
hideCodeSandbox: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
default: true
|
||||
},
|
||||
hideStackBlitz: {
|
||||
type: Boolean,
|
||||
|
|
@ -142,9 +132,6 @@ export default {
|
|||
async copyCode() {
|
||||
await navigator.clipboard.writeText(this.code[this.codeLang]);
|
||||
},
|
||||
showCodesandbox() {
|
||||
useCodeSandbox(this.codeLang, this.code[this.codeLang === 'data' ? 'options' : this.codeLang], this.service, this.code.pages, this.dependencies, this.component, this.extFiles);
|
||||
},
|
||||
showStackblitz() {
|
||||
useStackBlitz(this.codeLang, this.code[this.codeLang === 'data' ? 'options' : this.codeLang], this.service, this.code.pages, this.dependencies, this.component, this.extFiles);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs" />
|
||||
<DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||
<DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs" />
|
||||
<DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||
<DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@
|
|||
element.
|
||||
</p>
|
||||
|
||||
<DocSectionCode :code="code" hideToggleCode hideCodeSandbox hideStackBlitz v-bind="$attrs" />
|
||||
<DocSectionCode :code="code" hideToggleCode hideStackBlitz v-bind="$attrs" />
|
||||
|
||||
<h3>Closed State Keyboard Support</h3>
|
||||
<div class="doc-tablewrapper">
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs"></DocSectionText>
|
||||
<DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||
<DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<DocSectionText v-bind="$attrs">
|
||||
<p>PrimeVue components need to be imported and configured individually. In the next section, we'll cleanup the code using auto imports.</p>
|
||||
</DocSectionText>
|
||||
<DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||
<DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -4,14 +4,14 @@
|
|||
The <a href="https://github.com/unplugin/unplugin-vue-components" target="_blank" rel="noopener noreferrer">unplugin-vue-components</a> library can automatically import and register PrimeVue components with the built-in resolver. Let's
|
||||
begin with installing the library.
|
||||
</p>
|
||||
<DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||
<DocSectionCode :code="code1" hideToggleCode importCode hideStackBlitz />
|
||||
<p>Next step would be adding the <i>PrimeVueResolver</i> at vite.config using the <i>Components</i> plugin.</p>
|
||||
<DocSectionCode :code="code2" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||
<DocSectionCode :code="code2" hideToggleCode importCode hideStackBlitz />
|
||||
<p>
|
||||
That's it, now the initialization code can be refactored as the following. For configuration like namespacing, visit the
|
||||
<a href="https://github.com/unplugin/unplugin-vue-components?tab=readme-ov-file#configuration" target="_blank" rel="noopener noreferrer">official documentation</a>.
|
||||
</p>
|
||||
<DocSectionCode :code="code3" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||
<DocSectionCode :code="code3" hideToggleCode importCode hideStackBlitz />
|
||||
</DocSectionText>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs"></DocSectionText>
|
||||
<DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||
<DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs"></DocSectionText>
|
||||
<DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||
<DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs" />
|
||||
<DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||
<DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs" />
|
||||
<DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||
<DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@
|
|||
</template>
|
||||
</Breadcrumb>
|
||||
</div>
|
||||
<DocSectionCode :code="code" hideStackBlitz hideCodeSandbox />
|
||||
<DocSectionCode :code="code" hideStackBlitz />
|
||||
</template>
|
||||
|
||||
<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.
|
||||
</p>
|
||||
|
||||
<DocSectionCode :code="code" hideToggleCode hideCodeSandbox hideStackBlitz v-bind="$attrs" />
|
||||
<DocSectionCode :code="code" hideToggleCode hideStackBlitz v-bind="$attrs" />
|
||||
<h3>Keyboard Support</h3>
|
||||
<div class="doc-tablewrapper">
|
||||
<table class="doc-table">
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs" />
|
||||
<DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||
<DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
|
||||
</template>
|
||||
|
||||
<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>
|
||||
|
||||
<DocSectionCode :code="code" hideToggleCode hideCodeSandbox hideStackBlitz v-bind="$attrs" />
|
||||
<DocSectionCode :code="code" hideToggleCode hideStackBlitz v-bind="$attrs" />
|
||||
|
||||
<h3>Choose Date Button Keyboard Support</h3>
|
||||
<div class="doc-tablewrapper">
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs" />
|
||||
<DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||
<DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
|
||||
</template>
|
||||
|
||||
<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.
|
||||
</p>
|
||||
|
||||
<DocSectionCode :code="code" hideToggleCode hideCodeSandbox hideStackBlitz v-bind="$attrs" />
|
||||
<DocSectionCode :code="code" hideToggleCode hideStackBlitz v-bind="$attrs" />
|
||||
|
||||
<h3>Keyboard Support</h3>
|
||||
<p>Component does not include any interactive elements.</p>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs" />
|
||||
<DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||
<DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs" />
|
||||
<DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||
<DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
|
||||
</template>
|
||||
|
||||
<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.
|
||||
</p>
|
||||
|
||||
<DocSectionCode :code="code" hideToggleCode hideCodeSandbox hideStackBlitz v-bind="$attrs" />
|
||||
<DocSectionCode :code="code" hideToggleCode hideStackBlitz v-bind="$attrs" />
|
||||
|
||||
<h3>Closed State Keyboard Support</h3>
|
||||
<div class="doc-tablewrapper">
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs" />
|
||||
<DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||
<DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<DocSectionText v-bind="$attrs">
|
||||
<p>Include the component to use with a script tag.</p>
|
||||
</DocSectionText>
|
||||
<DocSectionCode :code="code" hideToggleCode hideCodeSandbox hideStackBlitz />
|
||||
<DocSectionCode :code="code" hideToggleCode hideStackBlitz />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<DocSectionText v-bind="$attrs">
|
||||
<p>Create an app container element and setup the application using <i>createApp</i>.</p>
|
||||
</DocSectionText>
|
||||
<DocSectionCode :code="code" hideToggleCode hideCodeSandbox hideStackBlitz />
|
||||
<DocSectionCode :code="code" hideToggleCode hideStackBlitz />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<DocSectionText v-bind="$attrs">
|
||||
<p>A complete example using a PrimeVue DatePicker. You can also view this sample live at <a href="https://stackblitz.com/edit/web-platform-xceybs?file=index.html" target="_blank" rel="noopener noreferrer">Stackblitz</a>.</p>
|
||||
</DocSectionText>
|
||||
<DocSectionCode :code="code" hideToggleCode hideCodeSandbox hideStackBlitz />
|
||||
<DocSectionCode :code="code" hideToggleCode hideStackBlitz />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
application.
|
||||
</p>
|
||||
</DocSectionText>
|
||||
<DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||
<DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
<a href="https://cdnjs.com" target="_blank" rel="noopener noreferrer">cdnjs</a> can also be used.
|
||||
</p>
|
||||
</DocSectionText>
|
||||
<DocSectionCode :code="code" hideToggleCode hideCodeSandbox hideStackBlitz />
|
||||
<DocSectionCode :code="code" hideToggleCode hideStackBlitz />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<DocSectionText v-bind="$attrs">
|
||||
<p>Include the theme file with a link element, see <NuxtLink to="/theming/#themes">themes</NuxtLink> section for the complete list of available themes to choose from.</p>
|
||||
</DocSectionText>
|
||||
<DocSectionCode :code="code" hideToggleCode hideCodeSandbox hideStackBlitz />
|
||||
<DocSectionCode :code="code" hideToggleCode hideStackBlitz />
|
||||
</template>
|
||||
|
||||
<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.
|
||||
</p>
|
||||
|
||||
<DocSectionCode :code="code" hideToggleCode hideCodeSandbox hideStackBlitz v-bind="$attrs" />
|
||||
<DocSectionCode :code="code" hideToggleCode hideStackBlitz v-bind="$attrs" />
|
||||
</DocSectionText>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<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>
|
||||
</DocSectionText>
|
||||
<DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||
<DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs" />
|
||||
<DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||
<DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
<i>aria-labelledby</i>, <i>aria-label</i> props.
|
||||
</p>
|
||||
|
||||
<DocSectionCode :code="code" hideToggleCode hideCodeSandbox hideStackBlitz v-bind="$attrs" />
|
||||
<DocSectionCode :code="code" hideToggleCode hideStackBlitz v-bind="$attrs" />
|
||||
|
||||
<h3>Keyboard Support</h3>
|
||||
<div class="doc-tablewrapper">
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs" />
|
||||
<DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||
<DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs" />
|
||||
<DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||
<DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
|
||||
</template>
|
||||
|
||||
<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.
|
||||
</p>
|
||||
|
||||
<DocSectionCode :code="code" hideToggleCode hideCodeSandbox hideStackBlitz v-bind="$attrs" />
|
||||
<DocSectionCode :code="code" hideToggleCode hideStackBlitz v-bind="$attrs" />
|
||||
|
||||
<h3>Input Field Keyboard Support</h3>
|
||||
<div class="doc-tablewrapper">
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs" />
|
||||
<DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||
<DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs" />
|
||||
<DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||
<DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
|
||||
</template>
|
||||
|
||||
<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(--primary-color)', color: 'var(--primary-color-text)', borderRadius: 'var(--border-radius)', padding: '3rem' }">Primary Color</div>
|
||||
</div>
|
||||
<DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||
<DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<DocSectionText v-bind="$attrs">
|
||||
<p>Configuration is managed by the <i>PrimeVue</i> instance imported from <i>primevue/config</i>.</p>
|
||||
</DocSectionText>
|
||||
<DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||
<DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
PrimeVue configuration as well.
|
||||
</p>
|
||||
</DocSectionText>
|
||||
<DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||
<DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<DocSectionText v-bind="$attrs">
|
||||
<p>Defines the shared pass through properties per component type. Visit the <NuxtLink to="/passthrough">Pass Through Props</NuxtLink> documentation for more information.</p>
|
||||
</DocSectionText>
|
||||
<DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||
<DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
to override or merge the defined props. Defaults are <i>true</i> for <i>mergeSections</i> and <i>false</i> for <i>mergeProps</i>. Visit the <NuxtLink to="/passthrough">Pass Through Props</NuxtLink> documentation for more information.
|
||||
</p>
|
||||
</DocSectionText>
|
||||
<DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||
<DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<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>
|
||||
|
||||
<DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||
<DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
|
||||
</DocSectionText>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
<NuxtLink to="/unstyled">Unstyled mode</NuxtLink> documentation for more information.
|
||||
</p>
|
||||
|
||||
<DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||
<DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
|
||||
</DocSectionText>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
default values for components categories. Default values are described below and can be customized when setting up PrimeVue.
|
||||
</p>
|
||||
</DocSectionText>
|
||||
<DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||
<DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<DocSectionText v-bind="$attrs">
|
||||
<p>The <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP">nonce</a> value to use on dynamically generated style elements in core.</p>
|
||||
|
||||
<DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||
<DocSectionCode :code="code1" hideToggleCode importCode hideStackBlitz />
|
||||
</DocSectionText>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<DocSectionText v-bind="$attrs">
|
||||
<p>Locale values are stored in the global configuration that becomes accessible after installing the PrimeVue.</p>
|
||||
</DocSectionText>
|
||||
<DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||
<DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -2,11 +2,11 @@
|
|||
<DocSectionText v-bind="$attrs">
|
||||
<p>Second parameter of the use function can be used to initiate the locale during PrimeVue installation.</p>
|
||||
|
||||
<DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||
<DocSectionCode :code="code1" hideToggleCode importCode 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>
|
||||
|
||||
<DocSectionCode :code="code2" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||
<DocSectionCode :code="code2" hideToggleCode importCode hideStackBlitz />
|
||||
</DocSectionText>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -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
|
||||
trigger and the dialog is defined.
|
||||
</p>
|
||||
<DocSectionCode :code="code1" hideToggleCode hideCodeSandbox hideStackBlitz v-bind="$attrs" />
|
||||
<DocSectionCode :code="code2" hideToggleCode hideCodeSandbox hideStackBlitz v-bind="$attrs" />
|
||||
<DocSectionCode :code="code1" hideToggleCode hideStackBlitz v-bind="$attrs" />
|
||||
<DocSectionCode :code="code2" hideToggleCode hideStackBlitz v-bind="$attrs" />
|
||||
<h3>Overlay Keyboard Support</h3>
|
||||
<div class="doc-tablewrapper">
|
||||
<table class="doc-table">
|
||||
|
|
|
|||
|
|
@ -2,11 +2,11 @@
|
|||
<DocSectionText v-bind="$attrs">
|
||||
<p>ConfirmDialog is controlled via the <i>ConfirmationService</i> that needs to be installed as an application plugin.</p>
|
||||
</DocSectionText>
|
||||
<DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||
<DocSectionCode :code="code1" hideToggleCode importCode hideStackBlitz />
|
||||
<div class="doc-section-description">
|
||||
<p>The service is available with the <i>useConfirm</i> function for Composition API or using the <i>$confirm</i> property of the application for Options API.</p>
|
||||
</div>
|
||||
<DocSectionCode :code="code2" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||
<DocSectionCode :code="code2" hideToggleCode importCode hideStackBlitz />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs" />
|
||||
<DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||
<DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
|
||||
</template>
|
||||
|
||||
<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, ConfirmPopup 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.
|
||||
</p>
|
||||
<DocSectionCode :code="code1" hideToggleCode hideCodeSandbox hideStackBlitz v-bind="$attrs" />
|
||||
<DocSectionCode :code="code2" hideToggleCode hideCodeSandbox hideStackBlitz v-bind="$attrs" />
|
||||
<DocSectionCode :code="code1" hideToggleCode hideStackBlitz v-bind="$attrs" />
|
||||
<DocSectionCode :code="code2" hideToggleCode hideStackBlitz v-bind="$attrs" />
|
||||
<h3>Overlay Keyboard Support</h3>
|
||||
<div class="doc-tablewrapper">
|
||||
<table class="doc-table">
|
||||
|
|
|
|||
|
|
@ -2,11 +2,11 @@
|
|||
<DocSectionText v-bind="$attrs">
|
||||
<p>ConfirmPopup is controlled via the <i>ConfirmationService</i> that needs to be installed as an application plugin.</p>
|
||||
</DocSectionText>
|
||||
<DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||
<DocSectionCode :code="code1" hideToggleCode importCode hideStackBlitz />
|
||||
<div class="doc-section-description">
|
||||
<p>The service is available with the <i>useConfirm</i> function for Composition API or using the <i>$confirm</i> property of the application for Options API.</p>
|
||||
</div>
|
||||
<DocSectionCode :code="code2" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||
<DocSectionCode :code="code2" hideToggleCode importCode hideStackBlitz />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs" />
|
||||
<DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||
<DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs" />
|
||||
<DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||
<DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -30,7 +30,7 @@
|
|||
</template>
|
||||
</ContextMenu>
|
||||
</div>
|
||||
<DocSectionCode :code="code" hideStackBlitz hideCodeSandbox />
|
||||
<DocSectionCode :code="code" hideStackBlitz />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>Bootstrap has a <i>reboot</i> utility to reset the CSS of the standard elements. If you are including this utility, you may give it a layer while importing it.</p>
|
||||
<DocSectionCode :code="code" hideToggleCode hideCodeSandbox hideStackBlitz />
|
||||
<DocSectionCode :code="code" hideToggleCode hideStackBlitz />
|
||||
</DocSectionText>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>Normalize is another utility to reset CSS of the standard elements. While importing the CSS file, assign it to a layer and define the layer order with primevue coming after the normalized layer.</p>
|
||||
<DocSectionCode :code="code" hideToggleCode hideCodeSandbox hideStackBlitz />
|
||||
<DocSectionCode :code="code" hideToggleCode hideStackBlitz />
|
||||
</DocSectionText>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
override the PrimeVue components leading to unexpected results. A common use case for global styles applying to standard HTML elements is CSS reset utilities to remove the default styling of the browsers. In this case, best practice is
|
||||
wrapping your CSS in a layer like <i>reset</i> and make sure <i>primevue</i> comes after your layer since layers defined after has higher precedence. This way, your Reset CSS does not get in the way of PrimeVue components.
|
||||
</p>
|
||||
<DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||
<DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
|
||||
<p>If you are using Nuxt, use the built-in <i>cssLayerOrder</i> property of the PrimeVue nuxt module instead.</p>
|
||||
</DocSectionText>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@
|
|||
<div class="card flex justify-content-center">
|
||||
<InputSwitch v-model="checked" :pt="{ slider: 'my-switch-slider' }" />
|
||||
</div>
|
||||
<DocSectionCode :code="code" hideToggleCode hideCodeSandbox hideStackBlitz />
|
||||
<DocSectionCode :code="code" hideToggleCode hideStackBlitz />
|
||||
<p>Layers also make it possible to use CSS Modules, view the <NuxtLink to="/theming/#cssmodules">CSS Modules</NuxtLink> guide for examples.</p>
|
||||
</DocSectionText>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
Tailwind CSS includes a reset utility in base called <a href="https://tailwindcss.com/docs/preflight" target="_blank" rel="noopener noreferrer">preflight</a>. If you are using this feature, wrap the base and utilities in separate layers
|
||||
and make sure primevue layer comes after the base.
|
||||
</p>
|
||||
<DocSectionCode :code="code" hideToggleCode hideCodeSandbox hideStackBlitz />
|
||||
<DocSectionCode :code="code" hideToggleCode hideStackBlitz />
|
||||
</DocSectionText>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<DocSectionText v-bind="$attrs">
|
||||
<p><a href="https://fontawesome.com/">Font Awesome</a> is a popular icon library with a wide range of icons.</p>
|
||||
</DocSectionText>
|
||||
<DocSectionCode :code="code" hideToggleCode hideCodeSandbox hideStackBlitz />
|
||||
<DocSectionCode :code="code" hideToggleCode hideStackBlitz />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<DocSectionText v-bind="$attrs">
|
||||
<p>Any type of image can be used as an icon.</p>
|
||||
</DocSectionText>
|
||||
<DocSectionCode :code="code" hideToggleCode hideCodeSandbox hideStackBlitz />
|
||||
<DocSectionCode :code="code" hideToggleCode hideStackBlitz />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<DocSectionText v-bind="$attrs">
|
||||
<p><a href="https://fonts.google.com/icons">Material icons</a> is the official icon library based on Google Material Design.</p>
|
||||
</DocSectionText>
|
||||
<DocSectionCode :code="code" hideToggleCode hideCodeSandbox hideStackBlitz />
|
||||
<DocSectionCode :code="code" hideToggleCode hideStackBlitz />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<DocSectionText v-bind="$attrs">
|
||||
<p>Inline SVGs are embedded inside the dom.</p>
|
||||
</DocSectionText>
|
||||
<DocSectionCode :code="code" hideToggleCode hideCodeSandbox hideStackBlitz />
|
||||
<DocSectionCode :code="code" hideToggleCode hideStackBlitz />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs" />
|
||||
<DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||
<DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs" />
|
||||
<DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||
<DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
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>.
|
||||
</p>
|
||||
<DocSectionCode :code="code" hideToggleCode hideCodeSandbox hideStackBlitz v-bind="$attrs" />
|
||||
<DocSectionCode :code="code" hideToggleCode hideStackBlitz v-bind="$attrs" />
|
||||
|
||||
<h3>Keyboard Support</h3>
|
||||
<p>Component does not include any interactive elements.</p>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs" />
|
||||
<DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||
<DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
element and override the default <i>aria-label</i>.
|
||||
</p>
|
||||
|
||||
<DocSectionCode :code="code" hideToggleCode hideCodeSandbox hideStackBlitz v-bind="$attrs" />
|
||||
<DocSectionCode :code="code" hideToggleCode hideStackBlitz v-bind="$attrs" />
|
||||
|
||||
<h3>Overlay Keyboard Support</h3>
|
||||
<div class="doc-tablewrapper">
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs" />
|
||||
<DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||
<DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs" />
|
||||
<DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||
<DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs" />
|
||||
<DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||
<DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
|
||||
</template>
|
||||
|
||||
<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>
|
||||
|
||||
<DocSectionCode :code="code" hideToggleCode hideCodeSandbox hideStackBlitz v-bind="$attrs" />
|
||||
<DocSectionCode :code="code" hideToggleCode hideStackBlitz v-bind="$attrs" />
|
||||
|
||||
<h3>Closed State Keyboard Support</h3>
|
||||
<div class="doc-tablewrapper">
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs"></DocSectionText>
|
||||
<DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||
<DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<DocSectionText v-bind="$attrs">
|
||||
<p>The <i>close</i> function is available through a <i>dialogRef</i> that is injected to the component loaded by the dialog.</p>
|
||||
</DocSectionText>
|
||||
<DocSectionCode :code="code" importCode hideToggleCode hideCodeSandbox hideStackBlitz />
|
||||
<DocSectionCode :code="code" importCode hideToggleCode hideStackBlitz />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<DocSectionText v-bind="$attrs">
|
||||
<p>DynamicDialog uses the Dialog component internally, visit <NuxtLink to="/dialog">dialog</NuxtLink> for more information about the available props.</p>
|
||||
</DocSectionText>
|
||||
<DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||
<DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -1,11 +1,11 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>A single shared dialog instance is required in the application, ideal location would be defining it once at the main application template.</p>
|
||||
<DocSectionCode :code="code1" hideToggleCode hideCodeSandbox hideStackBlitz />
|
||||
<DocSectionCode :code="code1" hideToggleCode hideStackBlitz />
|
||||
<p>A dynamic dialog is controlled via the <i>DialogService</i> that needs to be installed as an application plugin.</p>
|
||||
<DocSectionCode :code="code2" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||
<DocSectionCode :code="code2" hideToggleCode importCode hideStackBlitz />
|
||||
<p>The service is available with the <i>useDialog</i> function for Composition API or using the <i>$dialog</i> property of the application for Options API.</p>
|
||||
<DocSectionCode :code="code3" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||
<DocSectionCode :code="code3" hideToggleCode importCode hideStackBlitz />
|
||||
</DocSectionText>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -2,8 +2,8 @@
|
|||
<DocSectionText v-bind="$attrs">
|
||||
<p>The <i>emits</i> object defines callbacks to handle events emitted by the component within the Dialog.</p>
|
||||
|
||||
<DocSectionCode :code="code1" importCode hideToggleCode hideCodeSandbox hideStackBlitz />
|
||||
<DocSectionCode :code="code2" importCode hideToggleCode hideCodeSandbox hideStackBlitz />
|
||||
<DocSectionCode :code="code1" importCode hideToggleCode hideStackBlitz />
|
||||
<DocSectionCode :code="code2" importCode hideToggleCode hideStackBlitz />
|
||||
</DocSectionText>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs" />
|
||||
<DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||
<DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>The <i>open</i> function of the <i>DialogService</i> is used to open a Dialog. First parameter is the component to load and second one is the configuration object to customize the Dialog.</p>
|
||||
<DocSectionCode :code="code1" importCode hideToggleCode hideCodeSandbox hideStackBlitz />
|
||||
<DocSectionCode :code="code1" importCode hideToggleCode hideStackBlitz />
|
||||
<p>The component can also be loaded asynchronously, this approach is useful in conditional cases and to improve initial load times as well.</p>
|
||||
<DocSectionCode :code="code2" importCode hideToggleCode hideCodeSandbox hideStackBlitz />
|
||||
<DocSectionCode :code="code2" importCode hideToggleCode hideStackBlitz />
|
||||
</DocSectionText>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -2,12 +2,12 @@
|
|||
<DocSectionText v-bind="$attrs">
|
||||
<p>Use the <i>data</i> property to pass parameters when opening a Dialog, the internal component can later access this data using <i>dialogRef</i>.</p>
|
||||
|
||||
<DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||
<DocSectionCode :code="code2" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||
<DocSectionCode :code="code1" hideToggleCode importCode hideStackBlitz />
|
||||
<DocSectionCode :code="code2" hideToggleCode importCode hideStackBlitz />
|
||||
|
||||
<p>Similarly when hiding a Dialog, any parameter passed to the <i>close</i> function is received from the <i>onClose</i> callback.</p>
|
||||
<DocSectionCode :code="code3" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||
<DocSectionCode :code="code4" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||
<DocSectionCode :code="code3" hideToggleCode importCode hideStackBlitz />
|
||||
<DocSectionCode :code="code4" hideToggleCode importCode hideStackBlitz />
|
||||
</DocSectionText>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs"></DocSectionText>
|
||||
<DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||
<DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs" />
|
||||
<DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||
<DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<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>
|
||||
</DocSectionText>
|
||||
<DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||
<DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs" />
|
||||
<DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||
<DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs" />
|
||||
<DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||
<DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<DocSectionText v-bind="$attrs">
|
||||
<p>FilterService can be extended by adding new constraints using the register function.</p>
|
||||
</DocSectionText>
|
||||
<DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||
<DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs" />
|
||||
<DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||
<DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<DocSectionText v-bind="$attrs">
|
||||
<p>Filters are accessed with <i>FilterService.filters</i>.</p>
|
||||
</DocSectionText>
|
||||
<DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||
<DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs" />
|
||||
<DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||
<DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs"></DocSectionText>
|
||||
<DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||
<DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
<span class="pi pi-search"></span>
|
||||
<span class="pi pi-user"></span>
|
||||
</div>
|
||||
<DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||
<DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
<i class="pi pi-search" style="color: 'var(--primary-color)'"></i>
|
||||
<i class="pi pi-user" style="color: #708090"></i>
|
||||
</div>
|
||||
<DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||
<DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
<div class="card flex justify-content-center">
|
||||
<Menu :model="items" />
|
||||
</div>
|
||||
<DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||
<DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<DocSectionText v-bind="$attrs">
|
||||
<p>PrimeIcons is available at npm, run the following command to download it to your project.</p>
|
||||
</DocSectionText>
|
||||
<DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||
<DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<DocSectionText v-bind="$attrs">
|
||||
<p>CSS file of the icon library needs to be imported in <i>styles.scss</i> of your application.</p>
|
||||
</DocSectionText>
|
||||
<DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||
<DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
<i class="pi pi-search" style="font-size: 2rem"></i>
|
||||
<i class="pi pi-user" style="font-size: 2.5rem"></i>
|
||||
</div>
|
||||
<DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||
<DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
<i class="pi pi-spin pi-spinner" style="font-size: 2rem"></i>
|
||||
<i class="pi pi-spin pi-cog" style="font-size: 2rem"></i>
|
||||
</div>
|
||||
<DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||
<DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs"></DocSectionText>
|
||||
<DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||
<DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs" />
|
||||
<DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||
<DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
|
|||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue