liuxunorg edited a comment on issue #3288: [ZEPPELIN-2274] - update cron UI
URL: https://github.com/apache/zeppelin/pull/3288#issuecomment-458810579
 
 
   I share a little trick to write a UI interface.
   There are a lot of UI designs in the `zeppelin-web project`, this is easier 
to implement and keeps the interface style consistent. you can refer to:
   
`Https://github.com/apache/zeppelin/blob/master/zeppelin-web/src/app/jobmanager/jobmanager.html`
   
   You can enter the following code in the note to debug the UI.
   ```
   %angular
   
   <form class="form-inline">
     <div class="form-group">
       <input type="radio" ng-model="paragraph" ng-checked="false">  Hourly  
</input>
       <input type="radio" ng-model="paragraph" ng-checked="false" 
style="margin-left:4px">  Daily  </input>
       <input type="radio" ng-model="paragraph"  ng-checked="false" 
style="margin-left:4px">  Weekly  </input>
       <input type="radio" ng-model="paragraph"  ng-checked="false" 
style="margin-left:4px">  Monthly  </input>
       <input type="radio" ng-model="paragraph"  ng-checked="true" 
style="margin-left:4px">  Custom  </input>
     </div>
   </form>
   <hr style="margin-top: 10px; margin-bottom: 10px;" />
   <form class="form-inline">
     <div class="form-group">
       <label for="paragraphId">parameter1 name: </label>
       <input type="text" class="form-control" id="paragraphId" 
placeholder="parameter value placeholder ..." ng-model="paragraph2" 
style="margin-left:4px"></input>
     </div>
   </form>
   <form class="form-inline" style="margin-top: 10px; margin-bottom: 10px;" >
     <div class="form-group">
       <label for="paragraphId">parameter2 name: </label>
       <input type="text" class="form-control" id="paragraphId" 
placeholder="parameter value placeholder ..." ng-model="paragraph2" 
style="margin-left:4px"></input>
     </div>
   </form>
   <form class="form-inline" style="margin-left:170px">
     <button type="submit" class="btn btn-primary" 
ng-click="z.runParagraph(paragraph)"> Save </button>
     <button type="submit" class="btn btn-primary" 
ng-click="z.runParagraph(paragraph)"> Cancel </button>
   </form>
   ```
   
   
![corntab-ui](https://user-images.githubusercontent.com/3677382/51958861-0981c900-248d-11e9-8e09-8c549236024b.png)
   
   After debugging the interface style, put your code into the project.

----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on GitHub and use the
URL above to go to the specific comment.
 
For queries about this service, please contact Infrastructure at:
us...@infra.apache.org


With regards,
Apache Git Services

Reply via email to