mirror of
https://github.com/Ocelot-Social-Community/Ocelot-Social.git
synced 2026-03-01 12:44:37 +00:00
41 lines
8.0 KiB
JavaScript
41 lines
8.0 KiB
JavaScript
import{_ as n}from"./plugin-vue_export-helper-DlAUqK2U.js";import{c as a,a as e,o as i}from"./app-C6w_Pklu.js";const l={};function p(t,s){return i(),a("div",null,s[0]||(s[0]=[e(`<h2 id="chip-colors" tabindex="-1"><a class="header-anchor" href="#chip-colors"><span>Chip colors</span></a></h2><p>Use different colors to emphasize or provide meaning.</p><div class="language- line-numbers-mode" data-highlighter="shiki" data-ext="" data-title="" style="--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34;"><pre class="shiki shiki-themes one-light one-dark-pro vp-code"><code><span class="line"><span><ds-chip>Medium</ds-chip></span></span>
|
|
<span class="line"><span><ds-chip color="inverse">Inverse</ds-chip></span></span>
|
|
<span class="line"><span><ds-chip color="primary">Primary</ds-chip></span></span>
|
|
<span class="line"><span><ds-chip color="success">Success</ds-chip></span></span>
|
|
<span class="line"><span><ds-chip color="warning">Warning</ds-chip></span></span>
|
|
<span class="line"><span><ds-chip color="danger">Danger</ds-chip></span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="chip-sizes" tabindex="-1"><a class="header-anchor" href="#chip-sizes"><span>Chip sizes</span></a></h2><p>Use different sizes to create hierarchy (defaults to <code>base</code>).</p><div class="language- line-numbers-mode" data-highlighter="shiki" data-ext="" data-title="" style="--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34;"><pre class="shiki shiki-themes one-light one-dark-pro vp-code"><code><span class="line"><span><ds-chip size="small">Small</ds-chip></span></span>
|
|
<span class="line"><span><ds-chip size="base">Base</ds-chip></span></span>
|
|
<span class="line"><span><ds-chip size="large">Large</ds-chip></span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="deletable" tabindex="-1"><a class="header-anchor" href="#deletable"><span>Deletable</span></a></h2><p>A chip can be deletable.</p><div class="language- line-numbers-mode" data-highlighter="shiki" data-ext="" data-title="" style="--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34;"><pre class="shiki shiki-themes one-light one-dark-pro vp-code"><code><span class="line"><span><template></span></span>
|
|
<span class="line"><span> <div></span></span>
|
|
<span class="line"><span> <ds-chip</span></span>
|
|
<span class="line"><span> v-for="(tag, index) in tags"</span></span>
|
|
<span class="line"><span> @remove="removeTag(index)"</span></span>
|
|
<span class="line"><span> removable</span></span>
|
|
<span class="line"><span> :key="index"</span></span>
|
|
<span class="line"><span> :color="tag.color"></span></span>
|
|
<span class="line"><span> {{ tag.label }}</span></span>
|
|
<span class="line"><span> </ds-chip></span></span>
|
|
<span class="line"><span> </div></span></span>
|
|
<span class="line"><span></template></span></span>
|
|
<span class="line"><span><script></span></span>
|
|
<span class="line"><span> export default {</span></span>
|
|
<span class="line"><span> data() {</span></span>
|
|
<span class="line"><span> return {</span></span>
|
|
<span class="line"><span> tags: [</span></span>
|
|
<span class="line"><span> {label: 'Dog'},</span></span>
|
|
<span class="line"><span> {label: 'Cat'},</span></span>
|
|
<span class="line"><span> {label: 'Duck'},</span></span>
|
|
<span class="line"><span> {label: 'Mouse', color: "primary"},</span></span>
|
|
<span class="line"><span> {label: 'Bird', color: "primary"},</span></span>
|
|
<span class="line"><span> {label: 'Elephant', color: "primary"},</span></span>
|
|
<span class="line"><span> ],</span></span>
|
|
<span class="line"><span> }</span></span>
|
|
<span class="line"><span> },</span></span>
|
|
<span class="line"><span> methods: {</span></span>
|
|
<span class="line"><span> removeTag (index) {</span></span>
|
|
<span class="line"><span> this.tags.splice(index, 1)</span></span>
|
|
<span class="line"><span> }</span></span>
|
|
<span class="line"><span> }</span></span>
|
|
<span class="line"><span> }</span></span>
|
|
<span class="line"><span></script></span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>`,9)]))}const r=n(l,[["render",p],["__file","demo.html.vue"]]),o=JSON.parse('{"path":"/styleguide/src/system/components/typography/Chip/demo.html","title":"","lang":"en-US","frontmatter":{},"headers":[{"level":2,"title":"Chip colors","slug":"chip-colors","link":"#chip-colors","children":[]},{"level":2,"title":"Chip sizes","slug":"chip-sizes","link":"#chip-sizes","children":[]},{"level":2,"title":"Deletable","slug":"deletable","link":"#deletable","children":[]}],"git":{"createdTime":1772365170000,"updatedTime":1772365170000,"contributors":[{"name":"Ulf Gebhardt","email":"ulf.gebhardt@webcraft-media.de","commits":1}]},"readingTime":{"minutes":0.48,"words":143},"filePathRelative":"styleguide/src/system/components/typography/Chip/demo.md","localizedDate":"March 1, 2026","excerpt":"<h2>Chip colors</h2>\\n<p>Use different colors to emphasize or provide meaning.</p>\\n<div class=\\"language- line-numbers-mode\\" data-highlighter=\\"shiki\\" data-ext=\\"\\" data-title=\\"\\" style=\\"--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34\\"><pre class=\\"shiki shiki-themes one-light one-dark-pro vp-code\\"><code><span class=\\"line\\"><span><ds-chip>Medium</ds-chip></span></span>\\n<span class=\\"line\\"><span><ds-chip color=\\"inverse\\">Inverse</ds-chip></span></span>\\n<span class=\\"line\\"><span><ds-chip color=\\"primary\\">Primary</ds-chip></span></span>\\n<span class=\\"line\\"><span><ds-chip color=\\"success\\">Success</ds-chip></span></span>\\n<span class=\\"line\\"><span><ds-chip color=\\"warning\\">Warning</ds-chip></span></span>\\n<span class=\\"line\\"><span><ds-chip color=\\"danger\\">Danger</ds-chip></span></span></code></pre>\\n<div class=\\"line-numbers\\" aria-hidden=\\"true\\" style=\\"counter-reset:line-number 0\\"><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div></div></div>"}');export{r as comp,o as data};
|