Coral UI Element In HTML












0















I am trying to apply Coral UI elements in my HTML file of component as below.



<coral-panelstack class="coral-Well" id="panelListPreselectedItem">

    <coral-panel>Panel 0: This is the content of Panel 1</coral-panel>

    <coral-panel selected>Panel 1: This is the content of Panel 1. There are more Panels defined in the PanelStack !</coral-panel>

    <coral-panel>Panel 2: This is the content of Panel 2</coral-panel>

    <coral-panel>Panel 3: This is the content of Panel 3. You need JavaScript to interact with this component</coral-panel>

    <coral-panel>Panel 4: This is the content of Panel 4</coral-panel>

</coral-panelstack>


But this render the content as plain text on page with no style. I took the reference from here.https://helpx.adobe.com/experience-manager/6-3/sites/developing/using/reference-materials/coral-ui/coralui3/Coral.PanelStack.html



Can you please tell me how Can I display the panel type of style on html.



Thanks






aem cq5







share|improve this question



























    0















    I am trying to apply Coral UI elements in my HTML file of component as below.



    <coral-panelstack class="coral-Well" id="panelListPreselectedItem">
    
    <coral-panel>Panel 0: This is the content of Panel 1</coral-panel>
    
    <coral-panel selected>Panel 1: This is the content of Panel 1. There are more Panels defined in the PanelStack !</coral-panel>
    
    <coral-panel>Panel 2: This is the content of Panel 2</coral-panel>
    
    <coral-panel>Panel 3: This is the content of Panel 3. You need JavaScript to interact with this component</coral-panel>
    
    <coral-panel>Panel 4: This is the content of Panel 4</coral-panel>
    
</coral-panelstack>


    But this render the content as plain text on page with no style. I took the reference from here.https://helpx.adobe.com/experience-manager/6-3/sites/developing/using/reference-materials/coral-ui/coralui3/Coral.PanelStack.html



    Can you please tell me how Can I display the panel type of style on html.



    Thanks






    aem cq5







    share|improve this question

























      0












      0








      0








      I am trying to apply Coral UI elements in my HTML file of component as below.



      <coral-panelstack class="coral-Well" id="panelListPreselectedItem">
      
    <coral-panel>Panel 0: This is the content of Panel 1</coral-panel>
      
    <coral-panel selected>Panel 1: This is the content of Panel 1. There are more Panels defined in the PanelStack !</coral-panel>
      
    <coral-panel>Panel 2: This is the content of Panel 2</coral-panel>
      
    <coral-panel>Panel 3: This is the content of Panel 3. You need JavaScript to interact with this component</coral-panel>
      
    <coral-panel>Panel 4: This is the content of Panel 4</coral-panel>
      
</coral-panelstack>


      But this render the content as plain text on page with no style. I took the reference from here.https://helpx.adobe.com/experience-manager/6-3/sites/developing/using/reference-materials/coral-ui/coralui3/Coral.PanelStack.html



      Can you please tell me how Can I display the panel type of style on html.



      Thanks






      aem cq5







      share|improve this question














      I am trying to apply Coral UI elements in my HTML file of component as below.



      <coral-panelstack class="coral-Well" id="panelListPreselectedItem">
      
    <coral-panel>Panel 0: This is the content of Panel 1</coral-panel>
      
    <coral-panel selected>Panel 1: This is the content of Panel 1. There are more Panels defined in the PanelStack !</coral-panel>
      
    <coral-panel>Panel 2: This is the content of Panel 2</coral-panel>
      
    <coral-panel>Panel 3: This is the content of Panel 3. You need JavaScript to interact with this component</coral-panel>
      
    <coral-panel>Panel 4: This is the content of Panel 4</coral-panel>
      
</coral-panelstack>


      But this render the content as plain text on page with no style. I took the reference from here.https://helpx.adobe.com/experience-manager/6-3/sites/developing/using/reference-materials/coral-ui/coralui3/Coral.PanelStack.html



      Can you please tell me how Can I display the panel type of style on html.



      Thanks






      aem cq5




      aem cq5






      share|improve this question













      share|improve this question











      share|improve this question




      share|improve this question










      asked Nov 15 '18 at 15:37









      zdhimzdhim

      90121651




      90121651
























          1 Answer
          1






          active

          oldest

          votes


















          0














          You need to load additional java script libraries and styles in order to use coral ui in your pages/components.



          Note also that AEM does it out of the box for dialogs (dialogs are in different frame), but for components on page you need to import coralui3 clientlib. You can do it in many ways, here are some of them:




          1. via content policies

          2. configure coralui3 client lib as dependency to already attached
            clientlibs

          3. import coralui3 clientlib directly in your html


          <sly data-sly-use.clientLib="${'/libs/granite/sightly/templates/clientlib.html'}"/>
          <sly data-sly-call="${clientlib.all @ categories='coralui3'}"/>






          share|improve this answer

























            Your Answer






            StackExchange.ifUsing("editor", function () {
            StackExchange.using("externalEditor", function () {
            StackExchange.using("snippets", function () {
            StackExchange.snippets.init();
            });
            });
            }, "code-snippets");

            StackExchange.ready(function() {
            var channelOptions = {
            tags: "".split(" "),
            id: "1"
            };
            initTagRenderer("".split(" "), "".split(" "), channelOptions);

            StackExchange.using("externalEditor", function() {
            // Have to fire editor after snippets, if snippets enabled
            if (StackExchange.settings.snippets.snippetsEnabled) {
            StackExchange.using("snippets", function() {
            createEditor();
            });
            }
            else {
            createEditor();
            }
            });

            function createEditor() {
            StackExchange.prepareEditor({
            heartbeatType: 'answer',
            autoActivateHeartbeat: false,
            convertImagesToLinks: true,
            noModals: true,
            showLowRepImageUploadWarning: true,
            reputationToPostImages: 10,
            bindNavPrevention: true,
            postfix: "",
            imageUploader: {
            brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
            contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
            allowUrls: true
            },
            onDemand: true,
            discardSelector: ".discard-answer"
            ,immediatelyShowMarkdownHelp:true
            });


            }
            });














            draft saved

            draft discarded


















            StackExchange.ready(
            function () {
            StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53322884%2fcoral-ui-element-in-html%23new-answer', 'question_page');
            }
            );

            Post as a guest















            Required, but never shown

























            1 Answer
            1






            active

            oldest

            votes








            1 Answer
            1






            active

            oldest

            votes









            active

            oldest

            votes






            active

            oldest

            votes









            0














            You need to load additional java script libraries and styles in order to use coral ui in your pages/components.



            Note also that AEM does it out of the box for dialogs (dialogs are in different frame), but for components on page you need to import coralui3 clientlib. You can do it in many ways, here are some of them:




            1. via content policies

            2. configure coralui3 client lib as dependency to already attached
              clientlibs

            3. import coralui3 clientlib directly in your html


            <sly data-sly-use.clientLib="${'/libs/granite/sightly/templates/clientlib.html'}"/>
            <sly data-sly-call="${clientlib.all @ categories='coralui3'}"/>






            share|improve this answer






























              0














              You need to load additional java script libraries and styles in order to use coral ui in your pages/components.



              Note also that AEM does it out of the box for dialogs (dialogs are in different frame), but for components on page you need to import coralui3 clientlib. You can do it in many ways, here are some of them:




              1. via content policies

              2. configure coralui3 client lib as dependency to already attached
                clientlibs

              3. import coralui3 clientlib directly in your html


              <sly data-sly-use.clientLib="${'/libs/granite/sightly/templates/clientlib.html'}"/>
              <sly data-sly-call="${clientlib.all @ categories='coralui3'}"/>






              share|improve this answer




























                0












                0








                0







                You need to load additional java script libraries and styles in order to use coral ui in your pages/components.



                Note also that AEM does it out of the box for dialogs (dialogs are in different frame), but for components on page you need to import coralui3 clientlib. You can do it in many ways, here are some of them:




                1. via content policies

                2. configure coralui3 client lib as dependency to already attached
                  clientlibs

                3. import coralui3 clientlib directly in your html


                <sly data-sly-use.clientLib="${'/libs/granite/sightly/templates/clientlib.html'}"/>
                <sly data-sly-call="${clientlib.all @ categories='coralui3'}"/>






                share|improve this answer















                You need to load additional java script libraries and styles in order to use coral ui in your pages/components.



                Note also that AEM does it out of the box for dialogs (dialogs are in different frame), but for components on page you need to import coralui3 clientlib. You can do it in many ways, here are some of them:




                1. via content policies

                2. configure coralui3 client lib as dependency to already attached
                  clientlibs

                3. import coralui3 clientlib directly in your html


                <sly data-sly-use.clientLib="${'/libs/granite/sightly/templates/clientlib.html'}"/>
                <sly data-sly-call="${clientlib.all @ categories='coralui3'}"/>







                share|improve this answer














                share|improve this answer



                share|improve this answer








                edited Nov 16 '18 at 9:03

























                answered Nov 16 '18 at 7:05









                rzasaprzasap

                1914




                1914
































                    draft saved

                    draft discarded




















































                    Thanks for contributing an answer to Stack Overflow!


                    • Please be sure to answer the question. Provide details and share your research!

                    But avoid …



                    • Asking for help, clarification, or responding to other answers.

                    • Making statements based on opinion; back them up with references or personal experience.


                    To learn more, see our tips on writing great answers.




                    draft saved


                    draft discarded














                    StackExchange.ready(
                    function () {
                    StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53322884%2fcoral-ui-element-in-html%23new-answer', 'question_page');
                    }
                    );

                    Post as a guest















                    Required, but never shown





















































                    Required, but never shown














                    Required, but never shown












                    Required, but never shown







                    Required, but never shown

































                    Required, but never shown














                    Required, but never shown












                    Required, but never shown







                    Required, but never shown







                    -

                    Popular posts from this blog

                    Xamarin.iOS Cant Deploy on Iphone

                    Image
                    .everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box; } -1 I have a windows laptop and a mac mini my problem is that It wont deploy on iphone if I use Visual Studio Xamarin on windows to install my app, but it works fine with Visual Studio For Mac. Here's what I get after build succeded on Visual Studio Xamarin on windows : 1>------ Build started: Project: FinalCustomerApp.iOS, Configuration: Debug iPhone ------ 1> Connecting to Mac server 192.168.8.100... 1> FinalCustomerApp.iOS -> C:UsersJeremy PaulDesktopFinalCustomerAppFinalCustomerAppFinalCustomerApp.iOSbiniPhoneDebugFinalCustomerApp.iOS.exe 1> Detected signing identity: 1> Code Signing Key: &quo
                    Read more

                    Glorious Revolution

                    Image
                    "The Bloodless Revolution" redirects here. For a history of the vegetarian movement, see The Bloodless Revolution (book). This article is about the English revolution of 1688. For the revolution of 1868 in Spain, see Glorious Revolution (Spain). For other uses, see Glorious Revolution (disambiguation). Glorious Revolution The Prince of Orange lands at Torbay Date 1688–1689 Location British Isles Also known as Revolution of 1688 War of the English Succession Bloodless Revolution Participants English, Welsh and Scottish society, Dutch forces Outcome Replacement of James II by William III and Mary II Jacobite rising of 1689 Williamite War in Ireland War with France; England and Scotland join Grand Alliance Drafting of the Bill of Rights 1689 Part of a series on the History of England Timeline Prehistoric Britain Roman Britain Sub-Roman Britain Medieval period Economy in the Middle Ages Anglo-Saxon period
                    Read more

                    Dulmage-Mendelsohn matrix decomposition in Python

                    Image
                    0 Matlab has a function called dmperm that computes the so-called Dulmage–Mendelsohn decomposition of a n x n matrix. From wikipedia, the Dulmage–Mendelsohn is a partition of the vertices of a bipartite graph into subsets, with the property that two adjacent vertices belong to the same subset if and only if they are paired with each other in a perfect matching of the graph. Looking both on scipy and numpy, I could not find this function, nor some similar version. Is it possible to implement it using basic linear algebra operations? Any idea if this is implemented in some Python package? python matlab linear-algebra graph-theory matrix-decomposition share | improve this question
                    Read more