zhanghuiqing
/
official_revision
1
0
포크 0
코드 이슈 0 풀 리퀘스트 0 릴리즈 0 위키 활동
方诺官网改正版
9 커밋
2 브랜치
27 MiB
 
 
 
트리: 61ddf909cb
official_revision/src/views/Tooltip.vue

423 lines
16 KiB
Raw Blame 히스토리 

  1. <template>

  2.   <div>

  3.     <div class="intro-y flex items-center mt-8">

  4.       <h2 class="text-lg font-medium mr-auto">Tooltip</h2>

  5.     </div>

  6.     <div class="grid grid-cols-12 gap-6 mt-5">

  7.       <div class="intro-y col-span-12 lg:col-span-6">

  8.         <!-- BEGIN: Basic Tooltip -->

  9.         <div class="intro-y box">

  10.           <div

  11.             class="flex flex-col sm:flex-row items-center p-5 border-b border-gray-200 dark:border-dark-5"

  12.           >

  13.             <h2 class="font-medium text-base mr-auto">Basic Tooltip</h2>

  14.             <div

  15.               class="w-full sm:w-auto flex items-center sm:ml-auto mt-3 sm:mt-0"

  16.             >

  17.               <div class="mr-3">Show example code</div>

  18.               <input

  19.                 data-target="#basic-tooltip"

  20.                 class="show-code input input--switch border"

  21.                 type="checkbox"

  22.               />

  23.             </div>

  24.           </div>

  25.           <div id="basic-tooltip" class="p-5">

  26.             <div class="preview">

  27.               <div class="text-center">

  28.                 <Tippy

  29.                   tag="a"

  30.                   href="javascript:;"

  31.                   class="button inline-block bg-theme-1 text-white"

  32.                   content="This is awesome tooltip example!"

  33.                   >Show Tooltip</Tippy

  34.                 >

  35.               </div>

  36.             </div>

  37.             <div class="source-code hidden">

  38.               <button

  39.                 data-target="#copy-basic-tooltip"

  40.                 class="copy-code button button--sm border flex items-center text-gray-700 dark:border-dark-5 dark:text-gray-300"

  41.               >

  42.                 <FileIcon class="w-4 h-4 mr-2" /> Copy example code

  43.               </button>

  44.               <div class="overflow-y-auto h-64 mt-3">

  45.                 <Highlight id="copy-basic-tooltip" class="source-preview">

  46.                   <code

  47.                     class="text-xs p-0 rounded-md html pl-5 pt-8 pb-4 -mb-10 -mt-10"

  48.                   >

  49.                     <textarea>

  50.                       <div class="text-center">

  51.                         <Tippy

  52.                           tag="a"

  53.                           href="javascript:;"

  54.                           class="button inline-block bg-theme-1 text-white"

  55.                           content="This is awesome tooltip example!"

  56.                           >Show Tooltip</Tippy

  57.                         >

  58.                       </div>

  59.                     </textarea>

  60.                   </code>

  61.                 </Highlight>

  62.               </div>

  63.             </div>

  64.           </div>

  65.         </div>

  66.         <!-- END: Basic Tooltip -->

  67.         <!-- BEGIN: On CLick Tooltip -->

  68.         <div class="intro-y box mt-5">

  69.           <div

  70.             class="flex flex-col sm:flex-row items-center p-5 border-b border-gray-200 dark:border-dark-5"

  71.           >

  72.             <h2 class="font-medium text-base mr-auto">On Click Tooltip</h2>

  73.             <div

  74.               class="w-full sm:w-auto flex items-center sm:ml-auto mt-3 sm:mt-0"

  75.             >

  76.               <div class="mr-3">Show example code</div>

  77.               <input

  78.                 data-target="#on-click-tooltip"

  79.                 class="show-code input input--switch border"

  80.                 type="checkbox"

  81.               />

  82.             </div>

  83.           </div>

  84.           <div id="on-click-tooltip" class="p-5">

  85.             <div class="preview">

  86.               <div class="text-center">

  87.                 <Tippy

  88.                   tag="a"

  89.                   href="javascript:;"

  90.                   class="button inline-block bg-theme-1 text-white"

  91.                   content="This is awesome tooltip example!"

  92.                   :options="{

  93.                     trigger: 'click'

  94.                   }"

  95.                   >Show Tooltip</Tippy

  96.                 >

  97.               </div>

  98.             </div>

  99.             <div class="source-code hidden">

  100.               <button

  101.                 data-target="#copy-on-click-tooltip"

  102.                 class="copy-code button button--sm border flex items-center text-gray-700 dark:border-dark-5 dark:text-gray-300"

  103.               >

  104.                 <FileIcon class="w-4 h-4 mr-2" /> Copy example code

  105.               </button>

  106.               <div class="overflow-y-auto h-64 mt-3">

  107.                 <Highlight id="copy-on-click-tooltip" class="source-preview">

  108.                   <code

  109.                     class="text-xs p-0 rounded-md html pl-5 pt-8 pb-4 -mb-10 -mt-10"

  110.                   >

  111.                     <textarea>

  112.                       <div class="text-center">

  113.                         <Tippy

  114.                           tag="a"

  115.                           href="javascript:;"

  116.                           class="button inline-block bg-theme-1 text-white"

  117.                           content="This is awesome tooltip example!"

  118.                           :options="{

  119.                             trigger: 'click'

  120.                           }"

  121.                           >Show Tooltip</Tippy

  122.                         >

  123.                       </div>

  124.                     </textarea>

  125.                   </code>

  126.                 </Highlight>

  127.               </div>

  128.             </div>

  129.           </div>

  130.         </div>

  131.         <!-- END: On CLick Tooltip -->

  132.         <!-- BEGIN: Light Tooltip -->

  133.         <div class="intro-y box mt-5">

  134.           <div

  135.             class="flex flex-col sm:flex-row items-center p-5 border-b border-gray-200 dark:border-dark-5"

  136.           >

  137.             <h2 class="font-medium text-base mr-auto">Light Tooltip</h2>

  138.             <div

  139.               class="w-full sm:w-auto flex items-center sm:ml-auto mt-3 sm:mt-0"

  140.             >

  141.               <div class="mr-3">Show example code</div>

  142.               <input

  143.                 data-target="#light-tooltip"

  144.                 class="show-code input input--switch border"

  145.                 type="checkbox"

  146.               />

  147.             </div>

  148.           </div>

  149.           <div id="light-tooltip" class="p-5">

  150.             <div class="preview">

  151.               <div class="text-center">

  152.                 <Tippy

  153.                   tag="a"

  154.                   href="javascript:;"

  155.                   class="button inline-block bg-theme-1 text-white"

  156.                   content="This is awesome tooltip example!"

  157.                   :options="{

  158.                     theme: 'light'

  159.                   }"

  160.                   >Show Tooltip</Tippy

  161.                 >

  162.               </div>

  163.             </div>

  164.             <div class="source-code hidden">

  165.               <button

  166.                 data-target="#copy-light-tooltip"

  167.                 class="copy-code button button--sm border flex items-center text-gray-700 dark:border-dark-5 dark:text-gray-300"

  168.               >

  169.                 <FileIcon class="w-4 h-4 mr-2" /> Copy example code

  170.               </button>

  171.               <div class="overflow-y-auto h-64 mt-3">

  172.                 <Highlight id="copy-light-tooltip" class="source-preview">

  173.                   <code

  174.                     class="text-xs p-0 rounded-md html pl-5 pt-8 pb-4 -mb-10 -mt-10"

  175.                   >

  176.                     <textarea>

  177.                       <div class="text-center">

  178.                         <Tippy

  179.                           tag="a"

  180.                           href="javascript:;"

  181.                           class="button inline-block bg-theme-1 text-white"

  182.                           content="This is awesome tooltip example!"

  183.                           :options="{

  184.                             theme: 'light'

  185.                           }"

  186.                           >Show Tooltip</Tippy

  187.                         >

  188.                       </div>

  189.                     </textarea>

  190.                   </code>

  191.                 </Highlight>

  192.               </div>

  193.             </div>

  194.           </div>

  195.         </div>

  196.         <!-- END: Light Tooltip -->

  197.       </div>

  198.       <div class="intro-y col-span-12 lg:col-span-6">

  199.         <!-- BEGIN: Custom Content Tooltip -->

  200.         <div class="intro-y box">

  201.           <div

  202.             class="flex flex-col sm:flex-row items-center p-5 border-b border-gray-200 dark:border-dark-5"

  203.           >

  204.             <h2 class="font-medium text-base mr-auto">

  205.               Custom Tooltip Content

  206.             </h2>

  207.             <div

  208.               class="w-full sm:w-auto flex items-center sm:ml-auto mt-3 sm:mt-0"

  209.             >

  210.               <div class="mr-3">Show example code</div>

  211.               <input

  212.                 data-target="#custom-content-preview-tooltip"

  213.                 class="show-code input input--switch border"

  214.                 type="checkbox"

  215.               />

  216.             </div>

  217.           </div>

  218.           <div id="custom-content-preview-tooltip" class="p-5">

  219.             <div class="preview">

  220.               <div class="text-center">

  221.                 <a

  222.                   href="javascript:;"

  223.                   name="custom-tooltip-content"

  224.                   class="button inline-block bg-theme-1 text-white"

  225.                   >Show Tooltip</a

  226.                 >

  227.               </div>

  228.               <div class="tooltip-content">

  229.                 <TippyContent to="custom-tooltip-content">

  230.                   <div class="relative flex items-center py-1 text-left">

  231.                     <div class="w-12 h-12 image-fit">

  232.                       <img

  233.                         alt=""

  234.                         class="rounded-full"

  235.                         :src="require(`@/assets/images/${$f()[0].photos[0]}`)"

  236.                       />

  237.                     </div>

  238.                     <div class="ml-4 mr-auto">

  239.                       <div

  240.                         class="font-medium dark:text-gray-300 leading-relaxed"

  241.                       >

  242.                         {{ $f()[0].users[0].name }}

  243.                       </div>

  244.                       <div class="text-gray-600">

  245.                         Bootstrap 4 HTML Admin Template

  246.                       </div>

  247.                     </div>

  248.                   </div>

  249.                 </TippyContent>

  250.               </div>

  251.             </div>

  252.             <div class="source-code hidden">

  253.               <button

  254.                 data-target="#copy-custom-content-preview-tooltip"

  255.                 class="copy-code button button--sm border flex items-center text-gray-700 dark:border-dark-5 dark:text-gray-300"

  256.               >

  257.                 <FileIcon class="w-4 h-4 mr-2" /> Copy example code

  258.               </button>

  259.               <div class="overflow-y-auto h-64 mt-3">

  260.                 <Highlight

  261.                   id="copy-custom-content-preview-tooltip"

  262.                   class="source-preview"

  263.                 >

  264.                   <code

  265.                     class="text-xs p-0 rounded-md html pl-5 pt-8 pb-4 -mb-10 -mt-10"

  266.                   >

  267.                     <textarea>

  268.                       <div class="text-center">

  269.                         <a

  270.                           href="javascript:;"

  271.                           name="custom-tooltip-content"

  272.                           class="button inline-block bg-theme-1 text-white"

  273.                           >Show Tooltip</a

  274.                         >

  275.                       </div>

  276.                       <div class="tooltip-content">

  277.                         <TippyContent to="custom-tooltip-content">

  278.                           <div class="relative flex items-center py-1 text-left">

  279.                             <div class="w-12 h-12 image-fit">

  280.                               <img

  281.                                 alt=""

  282.                                 class="rounded-full"

  283.                                 :src="

  284.                                   require(`@/assets/images/${$f()[0].photos[0]}`)

  285.                                 "

  286.                               />

  287.                             </div>

  288.                             <div class="ml-4 mr-auto">

  289.                               <div

  290.                                 class="font-medium dark:text-gray-300 leading-relaxed"

  291.                               >

  292.                                 Leonardo DiCaprio

  293.                               </div>

  294.                               <div class="text-gray-600">

  295.                                 Bootstrap 4 HTML Admin Template

  296.                               </div>

  297.                             </div>

  298.                           </div>

  299.                         </TippyContent>

  300.                       </div>

  301.                     </textarea>

  302.                   </code>

  303.                 </Highlight>

  304.               </div>

  305.             </div>

  306.           </div>

  307.         </div>

  308.         <!-- END: Custom Content Tooltip -->

  309.         <!-- BEGIN: Chart Tooltip -->

  310.         <div class="intro-y box mt-5">

  311.           <div

  312.             class="flex flex-col sm:flex-row items-center p-5 border-b border-gray-200 dark:border-dark-5"

  313.           >

  314.             <h2 class="font-medium text-base mr-auto">Chart Tooltip</h2>

  315.             <div

  316.               class="w-full sm:w-auto flex items-center sm:ml-auto mt-3 sm:mt-0"

  317.             >

  318.               <div class="mr-3">Show example code</div>

  319.               <input

  320.                 data-target="#chart-preview-tooltip"

  321.                 class="show-code input input--switch border"

  322.                 type="checkbox"

  323.               />

  324.             </div>

  325.           </div>

  326.           <div id="chart-preview-tooltip" class="p-5">

  327.             <div class="preview">

  328.               <div class="text-center">

  329.                 <a

  330.                   href="javascript:;"

  331.                   name="chart-tooltip"

  332.                   class="button inline-block bg-theme-1 text-white"

  333.                   >Show Tooltip</a

  334.                 >

  335.               </div>

  336.               <div class="tooltip-content">

  337.                 <SimpleLineChart1 :width="200" :height="38" />

  338.                 <TippyContent to="chart-tooltip">

  339.                   <div class="py-1 text-left">

  340.                     <div class="font-medium dark:text-gray-300">Net Worth</div>

  341.                     <div class="flex items-center mt-2 sm:mt-0">

  342.                       <div class="mr-2 w-20 flex dark:text-gray-600">

  343.                         USP:

  344.                         <span class="ml-auto font-medium text-theme-9"

  345.                           >+23%</span

  346.                         >

  347.                       </div>

  348.                       <div class="w-24 sm:w-32 lg:w-56">

  349.                         <SimpleLineChart1 :width="200" :height="38" />

  350.                       </div>

  351.                     </div>

  352.                   </div>

  353.                 </TippyContent>

  354.               </div>

  355.             </div>

  356.             <div class="source-code hidden">

  357.               <button

  358.                 data-target="#copy-chart-preview-tooltip"

  359.                 class="copy-code button button--sm border flex items-center text-gray-700 dark:border-dark-5 dark:text-gray-300"

  360.               >

  361.                 <FileIcon class="w-4 h-4 mr-2" /> Copy example code

  362.               </button>

  363.               <div class="overflow-y-auto h-64 mt-3">

  364.                 <Highlight

  365.                   id="copy-chart-preview-tooltip"

  366.                   class="source-preview"

  367.                 >

  368.                   <code

  369.                     class="text-xs p-0 rounded-md html pl-5 pt-8 pb-4 -mb-10 -mt-10"

  370.                   >

  371.                     <textarea>

  372.                       <div class="text-center">

  373.                         <a

  374.                           href="javascript:;"

  375.                           name="chart-tooltip"

  376.                           class="button inline-block bg-theme-1 text-white"

  377.                           >Show Tooltip</a

  378.                         >

  379.                       </div>

  380.                       <div class="tooltip-content">

  381.                         <SimpleLineChart1 :width="200" :height="38" />

  382.                         <TippyContent to="chart-tooltip">

  383.                           <div class="py-1 text-left">

  384.                             <div class="font-medium dark:text-gray-300">

  385.                               Net Worth

  386.                             </div>

  387.                             <div class="flex items-center mt-2 sm:mt-0">

  388.                               <div class="mr-2 w-20 flex dark:text-gray-600">

  389.                                 USP:

  390.                                 <span class="ml-auto font-medium text-theme-9"

  391.                                   >+23%</span

  392.                                 >

  393.                               </div>

  394.                               <div class="w-24 sm:w-32 lg:w-56">

  395.                                 <SimpleLineChart1 :width="200" :height="38" />

  396.                               </div>

  397.                             </div>

  398.                           </div>

  399.                         </TippyContent>

  400.                       </div>

  401.                     </textarea>

  402.                   </code>

  403.                 </Highlight>

  404.               </div>

  405.             </div>

  406.           </div>

  407.         </div>

  408.         <!-- END: Chart Tooltip -->

  409.       </div>

  410.     </div>

  411.   </div>

  412. </template>

  413. 

  414. <script>

  415. import SimpleLineChart1 from "@/components/SimpleLineChart1";

  416. 

  417. export default {

  418.   components: {

  419.     SimpleLineChart1

  420.   }

  421. };

  422. </script>