Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(VTimeline): update to v3 (#13566)
fixes #9370 fixes #5360 fixes #12971 fixes #11721 fixes #6594 Co-authored-by: Kael <kaelwd@gmail.com> Co-authored-by: John Leider <john.j.leider@gmail.com>
- Loading branch information
3 people
committed
Jun 26, 2021
1 parent
73858ce
commit bfd984c
Showing
31 changed files
with
1,020 additions
and
998 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,16 +1,18 @@ | ||
| { | ||
| "props": { | ||
| "fillDot": "Remove padding from dot container", | ||
| "hideDot": "Hide display of timeline dot", | ||
| "icon": "Specify icon for dot container", | ||
| "iconColor": "Applies specified color to the control - it can be the name of material color (for example `success` or `purple`) or css color (`#033` or `rgba(255, 0, 0, 0.5)`). You can find list of built in classes on the [colors page](/styles/colors#material-colors).", | ||
| "large": "Large size dot", | ||
| "left": "Explicitly set the item to a left orientation", | ||
| "right": "Explicitly set the item to a right orientation", | ||
| "small": "Small size dot" | ||
| "alignDot": "Align the dot to the **start** or **end** of the item", | ||
| "color": "Color of the item dot", | ||
| "fillDot": "Remove outer border of item dot, making the color fill the entire dot", | ||
| "hideDot": "Hide the timeline item dot", | ||
| "hideOpposite": "Hide opposite content if it exists", | ||
| "icon": "Specify icon to display inside dot", | ||
| "iconColor": "Color of the icon", | ||
| "index": "Used to allow dynamically shown items to be re-inserted in the correct position", | ||
| "side": "Show the item either **before** or **after** the timeline. This will override the implicit ordering of items, but will in turn be overriden by the `v-timeline` **single-side** prop", | ||
| "size": "Size of the item dot" | ||
| }, | ||
| "slots": { | ||
| "icon": "Used to customize the icon inside the timeline item's dot", | ||
| "icon": "Used to customize the icon inside the item dot", | ||
| "opposite": "Used to customize the opposite side of timeline items" | ||
| } | ||
| } |
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 |
|---|---|---|
| @@ -1,7 +1,9 @@ | ||
| { | ||
| "props": { | ||
| "alignTop": "Align caret and dot of timeline items to the top", | ||
| "dense": "Hide opposite slot content, and position all items to one side of timeline", | ||
| "reverse": "Reverse direction of timeline items" | ||
| "direction": "Display timeline in a **vertical** or **horizontal** direction", | ||
| "mirror": "Mirror the before/after ordering of timeline items", | ||
| "singleSide": "Display all timeline items on one side of the timeline, either **before** or **after**", | ||
| "truncateLine": "Truncate timeline directly at the **start** or **end** of the line, or on **both** ends", | ||
| "linePosition": "Shift the position of the line. By default the line will evenly split items before/after." | ||
| } | ||
| } |
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,136 +1,72 @@ | ||
| <template> | ||
| <v-card | ||
| class="mx-auto" | ||
| max-width="400" | ||
| > | ||
| <v-card | ||
| dark | ||
| flat | ||
| <v-timeline single-side="after"> | ||
| <v-timeline-item | ||
| align-dot="start" | ||
| color="pink" | ||
| size="small" | ||
| > | ||
| <v-btn | ||
| absolute | ||
| bottom | ||
| color="pink" | ||
| right | ||
| fab | ||
| > | ||
| <v-icon>mdi-plus</v-icon> | ||
| </v-btn> | ||
| <v-card-title class="pa-2 purple lighten-3"> | ||
| <v-btn icon> | ||
| <v-icon>mdi-menu</v-icon> | ||
| </v-btn> | ||
| <h3 class="text-h6 font-weight-light text-center grow"> | ||
| Timeline | ||
| </h3> | ||
| <v-avatar> | ||
| <v-img src="https://avataaars.io/?avatarStyle=Circle&topType=LongHairStraight&accessoriesType=Blank&hairColor=BrownDark&facialHairType=Blank&clotheType=BlazerShirt&eyeType=Default&eyebrowType=Default&mouthType=Default&skinColor=Light"></v-img> | ||
| </v-avatar> | ||
| </v-card-title> | ||
| <v-img | ||
| src="https://cdn.vuetifyjs.com/images/cards/forest.jpg" | ||
| gradient="to top, rgba(0,0,0,.44), rgba(0,0,0,.44)" | ||
| > | ||
| <v-container class="fill-height"> | ||
| <v-row align="center"> | ||
| <strong class="text-h1 font-weight-regular mr-6">8</strong> | ||
| <v-row justify="end"> | ||
| <div class="text-h5 font-weight-light"> | ||
| Monday | ||
| </div> | ||
| <div class="text-uppercase font-weight-light"> | ||
| February 2015 | ||
| </div> | ||
| </v-row> | ||
| </v-row> | ||
| </v-container> | ||
| </v-img> | ||
| </v-card> | ||
| <v-card-text class="py-0"> | ||
| <v-timeline | ||
| align-top | ||
| dense | ||
| > | ||
| <v-timeline-item | ||
| color="pink" | ||
| small | ||
| > | ||
| <v-row class="pt-1"> | ||
| <v-col cols="3"> | ||
| <strong>5pm</strong> | ||
| </v-col> | ||
| <v-col> | ||
| <strong>New Icon</strong> | ||
| <div class="text-caption"> | ||
| Mobile App | ||
| </div> | ||
| </v-col> | ||
| </v-row> | ||
| </v-timeline-item> | ||
| <v-row class="pt-1"> | ||
| <v-col cols="3"> | ||
| <strong>5pm</strong> | ||
| </v-col> | ||
| <v-col> | ||
| <strong>New Icon</strong> | ||
| <div class="text-caption"> | ||
| Mobile App | ||
| </div> | ||
| </v-col> | ||
| </v-row> | ||
| </v-timeline-item> | ||
|
|
||
| <v-timeline-item | ||
| color="teal lighten-3" | ||
| small | ||
| > | ||
| <v-row class="pt-1"> | ||
| <v-col cols="3"> | ||
| <strong>3-4pm</strong> | ||
| </v-col> | ||
| <v-col> | ||
| <strong>Design Stand Up</strong> | ||
| <div class="text-caption mb-2"> | ||
| Hangouts | ||
| </div> | ||
| <v-avatar> | ||
| <v-img | ||
| src="https://avataaars.io/?avatarStyle=Circle&topType=LongHairFrida&accessoriesType=Kurt&hairColor=Red&facialHairType=BeardLight&facialHairColor=BrownDark&clotheType=GraphicShirt&clotheColor=Gray01&graphicType=Skull&eyeType=Wink&eyebrowType=RaisedExcitedNatural&mouthType=Disbelief&skinColor=Brown" | ||
| ></v-img> | ||
| </v-avatar> | ||
| <v-avatar> | ||
| <v-img | ||
| src="https://avataaars.io/?avatarStyle=Circle&topType=ShortHairFrizzle&accessoriesType=Prescription02&hairColor=Black&facialHairType=MoustacheMagnum&facialHairColor=BrownDark&clotheType=BlazerSweater&clotheColor=Black&eyeType=Default&eyebrowType=FlatNatural&mouthType=Default&skinColor=Tanned" | ||
| ></v-img> | ||
| </v-avatar> | ||
| <v-avatar> | ||
| <v-img | ||
| src="https://avataaars.io/?avatarStyle=Circle&topType=LongHairMiaWallace&accessoriesType=Sunglasses&hairColor=BlondeGolden&facialHairType=Blank&clotheType=BlazerSweater&eyeType=Surprised&eyebrowType=RaisedExcited&mouthType=Smile&skinColor=Pale" | ||
| ></v-img> | ||
| </v-avatar> | ||
| </v-col> | ||
| </v-row> | ||
| </v-timeline-item> | ||
| <v-timeline-item | ||
| align-dot="start" | ||
| color="teal-lighten-3" | ||
| size="small" | ||
| > | ||
| <v-row class="pt-1"> | ||
| <v-col cols="3"> | ||
| <strong>3-4pm</strong> | ||
| </v-col> | ||
| <v-col> | ||
| <strong>Design Stand Up</strong> | ||
| <div class="text-caption mb-2"> | ||
| Hangouts | ||
| </div> | ||
| </v-col> | ||
| </v-row> | ||
| </v-timeline-item> | ||
|
|
||
| <v-timeline-item | ||
| color="pink" | ||
| small | ||
| > | ||
| <v-row class="pt-1"> | ||
| <v-col cols="3"> | ||
| <strong>12pm</strong> | ||
| </v-col> | ||
| <v-col> | ||
| <strong>Lunch break</strong> | ||
| </v-col> | ||
| </v-row> | ||
| </v-timeline-item> | ||
| <v-timeline-item | ||
| align-dot="start" | ||
| color="pink" | ||
| size="small" | ||
| > | ||
| <v-row class="pt-1"> | ||
| <v-col cols="3"> | ||
| <strong>12pm</strong> | ||
| </v-col> | ||
| <v-col> | ||
| <strong>Lunch break</strong> | ||
| </v-col> | ||
| </v-row> | ||
| </v-timeline-item> | ||
|
|
||
| <v-timeline-item | ||
| color="teal lighten-3" | ||
| small | ||
| > | ||
| <v-row class="pt-1"> | ||
| <v-col cols="3"> | ||
| <strong>9-11am</strong> | ||
| </v-col> | ||
| <v-col> | ||
| <strong>Finish Home Screen</strong> | ||
| <div class="text-caption"> | ||
| Web App | ||
| </div> | ||
| </v-col> | ||
| </v-row> | ||
| </v-timeline-item> | ||
| </v-timeline> | ||
| </v-card-text> | ||
| </v-card> | ||
| <v-timeline-item | ||
| align-dot="start" | ||
| color="teal-lighten-3" | ||
| size="small" | ||
| > | ||
| <v-row class="pt-1"> | ||
| <v-col cols="3"> | ||
| <strong>9-11am</strong> | ||
| </v-col> | ||
| <v-col> | ||
| <strong>Finish Home Screen</strong> | ||
| <div class="text-caption"> | ||
| Web App | ||
| </div> | ||
| </v-col> | ||
| </v-row> | ||
| </v-timeline-item> | ||
| </v-timeline> | ||
| </template> |
This file was deleted.
Oops, something went wrong.
Oops, something went wrong.