-
Notifications
You must be signed in to change notification settings - Fork 20
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #1780 from smeup/chip-test
Kup-Radio & minor fixes
- Loading branch information
Showing
68 changed files
with
2,030 additions
and
484 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
53 changes: 53 additions & 0 deletions
53
packages/ketchup-showcase/src/views/components/basic/chip/examples/ChipColor.vue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,53 @@ | ||
| <template> | ||
| <div> | ||
| <div class="demo-wrapper"> | ||
| <p> | ||
| You can use the <span class="code-word">kup-primary</span> class to set | ||
| the color of the chip. The default is | ||
| <span class="code-word">neutral</span>. | ||
| </p> | ||
| <br /> | ||
| <div class="demo-container"> | ||
| <div class="kup-container"> | ||
| <kup-chip :data.prop="data"></kup-chip> | ||
| </div> | ||
| <p class="centered">Default color 'neutral'</p> | ||
| <code class="flat">{{ markupBasic }}</code> | ||
| </div> | ||
| <br /> | ||
| <div class="demo-container"> | ||
| <div class="kup-container"> | ||
| <kup-chip :data.prop="data" class="kup-primary"></kup-chip> | ||
| </div> | ||
| <p class="centered">Set color to 'primary'</p> | ||
| <code class="flat">{{ markupBasicSmall }}</code> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </template> | ||
|
|
||
| <script> | ||
| export default { | ||
| name: 'ChipInput', | ||
| data() { | ||
| return { | ||
| data: [ | ||
| { | ||
| id: 'input1', | ||
| value: 'First filter', | ||
| }, | ||
| { | ||
| id: 'input2', | ||
| value: 'Second filter', | ||
| }, | ||
| { | ||
| id: 'input3', | ||
| value: 'Third filter', | ||
| }, | ||
| ], | ||
| markupBasic: '<kup-chip></kup-chip>', | ||
| markupBasicSmall: '<kup-chip class="kup-primary"></kup-chip>', | ||
| }; | ||
| }, | ||
| }; | ||
| </script> |
65 changes: 65 additions & 0 deletions
65
packages/ketchup-showcase/src/views/components/basic/chip/examples/ChipCombination.vue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,65 @@ | ||
| <template> | ||
| <div> | ||
| <div class="demo-wrapper"> | ||
| <p> You can use all the styling above to get some advanced chip: </p> | ||
| <br /> | ||
| <div class="demo-container"> | ||
| <div class="kup-container"> | ||
| <kup-chip | ||
| :data.prop="data" | ||
| styling="raised" | ||
| class="kup-primary" | ||
| ></kup-chip> | ||
| </div> | ||
| <p class="centered">Primary Raised Chip with icon</p> | ||
| <code class="flat">{{ markupBasic }}</code> | ||
| <code class="flat">{{ markupBasicData }}</code> | ||
| </div> | ||
| <br /> | ||
| <div class="demo-container"> | ||
| <div class="kup-container"> | ||
| <kup-chip :data.prop="data2" styling="outlined"></kup-chip> | ||
| </div> | ||
| <p class="centered">Neutral outlined Chips'</p> | ||
| <code class="flat">{{ markupBasic2 }}</code> | ||
| <code class="flat">{{ markupBasicData2 }}</code> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </template> | ||
|
|
||
| <script> | ||
| export default { | ||
| name: 'ChipInput', | ||
| data() { | ||
| return { | ||
| data: [ | ||
| { | ||
| icon: 'widgets', | ||
| id: 'input1', | ||
| value: 'IconChip', | ||
| }, | ||
| ], | ||
| data2: [ | ||
| { | ||
| id: 'input1', | ||
| value: 'Outlined Chip', | ||
| }, | ||
| { | ||
| id: 'input2', | ||
| value: 'Outlined Chip 2', | ||
| }, | ||
| { | ||
| id: 'input2', | ||
| value: 'Outlined Chip 3', | ||
| }, | ||
| ], | ||
| markupBasic: '<kup-chip styling="raised" class="kup-primary"></kup-chip>', | ||
| markupBasicData: '{ icon: "widgets", id: "input1", value: "IconChip"}', | ||
| markupBasic2: '<kup-chip styling="outlined"></kup-chip>', | ||
| markupBasicData2: | ||
| '{ id: "input1", value: "Outlined Chip"},{ id: "input2", value: "Outlined Chip 2"},{ id: "input3", value: "Outlined Chip 3"}', | ||
| }; | ||
| }, | ||
| }; | ||
| </script> |
53 changes: 53 additions & 0 deletions
53
packages/ketchup-showcase/src/views/components/basic/chip/examples/ChipSize.vue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,53 @@ | ||
| <template> | ||
| <div> | ||
| <div class="demo-wrapper"> | ||
| <p> | ||
| You can use the <span class="code-word">sizing</span> attribute to | ||
| decide the size of the chip. The default is | ||
| <span class="code-word">medium</span>. | ||
| </p> | ||
| <br /> | ||
| <div class="demo-container"> | ||
| <div class="kup-container"> | ||
| <kup-chip :data.prop="data"></kup-chip> | ||
| </div> | ||
| <p class="centered">Default Sizing medium</p> | ||
| <code class="flat">{{ markupBasic }}</code> | ||
| </div> | ||
| <br /> | ||
| <div class="demo-container"> | ||
| <div class="kup-container"> | ||
| <kup-chip :data.prop="data" sizing="small"></kup-chip> | ||
| </div> | ||
| <p class="centered">Set sizing to 'small'</p> | ||
| <code class="flat">{{ markupBasicSmall }}</code> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </template> | ||
|
|
||
| <script> | ||
| export default { | ||
| name: 'ChipInput', | ||
| data() { | ||
| return { | ||
| data: [ | ||
| { | ||
| id: 'input1', | ||
| value: 'First filter', | ||
| }, | ||
| { | ||
| id: 'input2', | ||
| value: 'Second filter', | ||
| }, | ||
| { | ||
| id: 'input3', | ||
| value: 'Third filter', | ||
| }, | ||
| ], | ||
| markupBasic: '<kup-chip></kup-chip>', | ||
| markupBasicSmall: '<kup-chip sizing="small"></kup-chip>', | ||
| }; | ||
| }, | ||
| }; | ||
| </script> |
54 changes: 54 additions & 0 deletions
54
packages/ketchup-showcase/src/views/components/basic/chip/examples/ChipStructure.vue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,54 @@ | ||
| <template> | ||
| <div> | ||
| <div class="demo-wrapper"> | ||
| <p> | ||
| The Chip component is build on 3 part: A leading optional icon, a text | ||
| and a trailing optional clear icon [#input chips]. | ||
| </p> | ||
| <br /> | ||
| <div class="demo-container"> | ||
| <div class="kup-container"> | ||
| <kup-chip :data.prop="data"></kup-chip> | ||
| </div> | ||
| <p class="centered" | ||
| >You can change or remove the icon. In this case is passed the | ||
| 'widgets' icon</p | ||
| > | ||
| <code class="flat">{{ markupBasic }}</code> | ||
| </div> | ||
| <br /> | ||
| <div class="demo-container"> | ||
| <div class="kup-container"> | ||
| <kup-chip :data.prop="data2"></kup-chip> | ||
| </div> | ||
| <p class="centered">Without icon</p> | ||
| <code class="flat">{{ markupBasicWihoutIcon }}</code> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </template> | ||
|
|
||
| <script> | ||
| export default { | ||
| name: 'ChipInput', | ||
| data() { | ||
| return { | ||
| data: [ | ||
| { | ||
| icon: 'widgets', | ||
| id: 'input1', | ||
| value: 'IconChip', | ||
| }, | ||
| ], | ||
| data2: [ | ||
| { | ||
| id: 'input1', | ||
| value: 'TextChip', | ||
| }, | ||
| ], | ||
| markupBasic: '{ icon: "widgets", id: "input1", value: "IconChip"}', | ||
| markupBasicWihoutIcon: '{ id: "input1", value: "TextChip"}', | ||
| }; | ||
| }, | ||
| }; | ||
| </script> |
Oops, something went wrong.