docs/app/pages/Components/Chips/Chips.vue
<example src="./examples/SingleChip.vue" />
<example src="./examples/Static.vue" />
<example src="./examples/Editable.vue" />
<example src="./examples/ChipCustomTemplate.vue" />
<example src="./examples/DuplicatedFeedback.vue" />
<example src="./examples/Format.vue" />
<example src="./examples/Themed.vue" />
<example src="./examples/AutoInsert.vue" />
<template>
<page-container centered :title="$t('pages.chips.title')">
<div class="page-container-section">
<p>Chips represent complex entities in small blocks, such as a contact. They can be used as a way for a user to create arbitrary items, like categories or tags.</p>
</div>
<div class="page-container-section">
<h2 id="standalone-chip">Standalone Chip</h2>
<p>A chip can be used as standalone, without any connection with another chip. It can be used like a badge or a category of an entity in your application. You can specify if your chip can be deletable and clickable:</p>
<code-example title="Single" :component="examples['single-chip']" />
<api-item title="API - md-chip">
<p>All the following options can be applied to the md-chip component:</p>
<api-table :headings="chip.props.headings" :props="chip.props.props" slot="props" />
<api-table :headings="chip.events.headings" :props="chip.events.props" slot="events" />
</api-item>
</div>
<div class="page-container-section">
<h2 id="editable-model">Editable model</h2>
<p>Sometimes we need to edit the set of items on screen, for example, when editing tags, the user may need to remove/add tags. In this case you can use the editable chips, that is the default behaviour:</p>
<code-example title="Editable" :component="examples['editable']" />
</div>
<div class="page-container-section">
<h2 id="readonly">Readonly</h2>
<p>Let's think in an entity that have tags. Sometimes you might need to show all of them in a single row, but not allow the user to edit them. You can achieve that using the <code>md-chips</code> component, with a static option:</p>
<code-example title="Static" :component="examples['static']" />
</div>
<div class="page-container-section">
<h2 id="custom-template">Custom Template</h2>
<p>Sometimes we need to show more information about a chip, so we want to have a custom HTML structure for the chip itself. To create that scenario we can use the template scope. In this case all you have to do is to create a slot with your custom template and you're good to go. Take a look at this example:</p>
<code-example title="Scoped Slot" :component="examples['chip-custom-template']" />
</div>
<div class="page-container-section">
<h2 id="duplicated-chip">Duplicated Chip</h2>
<p>Chips would reject insertion if a chip is duplicated. You can customize feedback style of the duplicated chip:</p>
<code-example title="Duplicated Feedback" :component="examples['duplicated-feedback']" />
</div>
<div class="page-container-section">
<h2 id="formatter">Formatter</h2>
<p>Sometimes you may need to format a chip value before adding it, and for this case you can use a custom formatter function. This function will receive the chip value and must return the formatted value.</p>
<code-example title="Formatted chips" :component="examples['format']" />
</div>
<div class="page-container-section">
<h2 id="auto-insert">Auto insert</h2>
<p>Automatic value entry when focus is lost:</p>
<code-example title="Auto insert" :component="examples['auto-insert']" />
</div>
<div class="page-container-section">
<h2 id="hue-colors">Hue Colors</h2>
<p>You can always use the hue modifiers in single chips:</p>
<code-example title="Themed Chips" :component="examples['themed']" />
<api-item title="API - md-chips">
<p>All the following options can be applied to the md-chips component:</p>
<api-table :headings="chips.props.headings" :props="chips.props.props" slot="props" />
<api-table :headings="chips.events.headings" :props="chips.events.props" slot="events" />
</api-item>
</div>
</page-container>
</template>
<script>
import examples from 'docs-mixins/docsExample'
export default {
name: 'DocChips',
mixins: [examples],
data: () => ({
chip: {
props: {
headings: ['Name', 'Description', 'Default'],
props: [
{
name: 'md-clickable',
type: 'Boolean',
description: 'Enables/Disables the click action in the chip.',
defaults: 'false'
},
{
name: 'md-deletable',
type: 'Boolean',
description: 'Creates a chip that can hold a delete action. Useful when editing a chip series, like tags or categories.',
defaults: 'false'
},
{
name: 'md-disabled',
type: 'Boolean',
description: 'Enables/Disables the chip to be clickable of deletable.',
defaults: 'false'
}
]
},
events: {
headings: ['Name', 'Description', 'Value'],
props: [
{
name: 'md-delete',
description: 'Triggered after a mouse click on delete icon. Only fired when md-deletable is true.',
value: '$event'
}
]
}
},
chips: {
props: {
headings: ['Name', 'Description', 'Default'],
props: [
{
name: 'v-model',
type: 'Array',
description: 'The content to be displayed as chips. Need to be a array of strings, unless you specify a custom template.',
defaults: '[]'
},
{
name: 'id',
type: 'String',
description: 'The input id. If null, it will be created automatically.',
defaults: 'null'
},
{
name: 'md-input-type',
type: 'String',
description: 'The input type. Cannot be \'file\'',
defaults: 'text'
},
{
name: 'md-placeholder',
type: 'String',
description: 'The input placeholder. It is useful to show to the user which type of data will be inserted.',
defaults: 'null'
},
{
name: 'md-static',
type: 'Boolean',
description: 'Creates a non-editable chips. Useful to show inside a details page.',
defaults: 'false'
},
{
name: 'md-limit',
type: 'Number',
description: 'Blocks the chips to create items above the limit.',
defaults: 'false'
},
{
name: 'md-check-duplicated',
type: 'Boolean',
description: 'Always check if there is a duplicated chip while changing the input value, or check it only on insertion',
defaults: 'false'
},
{
name: 'md-format',
type: 'Function',
description: [
'Formatter before chip insertion. Effects to insertion and duplicated-checking.',
'The Chips will pass the inputted value as a parameter of this function. This function returns the formatted result.'
].join('<br/>'),
defaults: 'null'
}
]
},
events: {
headings: ['Name', 'Description', 'Value'],
props: [
{
name: 'md-delete',
description: 'Triggered after a mouse click on delete icon of a chip.',
value: '<span>Two params:</span> <br> text, index'
},
{
name: 'md-click',
description: 'Triggered after a mouse click on a single chip.',
value: '<span>Two params:</span> <br> text, index'
},
{
name: 'md-insert',
description: 'Triggered after a chip inserted.',
value: 'The last inserted chip value'
}
]
}
}
})
}
</script>