so I have requirement to have two tabs and a button , i am new to primeng and have created the tabs component, which works fine, see code below, but i am not able to create a button in the same row.
<p-tabView class="info-audit-tabview">
<div class="ui-tabview-panels">
<p-tabPanel header="UnSelected List">
</p-tabPanel>
<p-tabPanel header="Selected List" ng-reflect-header="Audit Trail">
</p-tabPanel>
</div>
</p-tabView>
Using bootstrap classes, add col-md-4 or col-md-6 for tabs. Then place button
<p-tabView class="info-audit-tabview col-md-4">
<div class="ui-tabview-panels">
<p-tabPanel header="UnSelected List">
</p-tabPanel>
<p-tabPanel header="Selected List" ng-reflect-header="Audit Trail">
</p-tabPanel>
</div>
</p-tabView>
<button type="button" pButton label="Export"></button>
As you can see in the documentation on the tabView page, the TabPanel have a specific headerStyleClass that you use like this
<p-tabPanel header="Header 1" headerStyleClass="myCustomClass"></p-tabPanel>
What you can do is give it a class of your own, and style it. Basically, you're creating a tab that looks like a button.
If it's not what you want, please tell me so that I can find another solution for you.
Related
I need to insert a bunch of blue hyperlinks inside an accordion. So when we click the title, the expansion area that appears would contain a couple lines that call some function.
I've attempted to follow the example on the Angular Material website:
https://stackblitz.com/angular/ybovddobxlj?file=app%2Fexpansion-overview-example.html
I've modified expansion-overview-example.html to the following:
<mat-accordion>
<mat-expansion-panel>
<mat-expansion-panel-header>
<mat-panel-title>
ALL FILES
</mat-panel-title>
</mat-expansion-panel-header>
<div> <!-- To put them on separate lines -->
<mat-form-field>
<label title="File 1" onclick="openFile1()"></label> <!-- THIS LINE BREAKS THE PAGE. HELP? -->
</mat-form-field>
</div>
<div> <!-- To put them on separate lines -->
<mat-form-field>
<label title="File 2" onclick="openFile2()"></label> <!-- THIS LINE BREAKS THE PAGE. HELP? -->
</mat-form-field>
</div>
</mat-expansion-panel>
</mat-accordion>
First of all, remove the mat-form-field, it is not required if you just want a simple link in the accordion (this is actually what breaks your code).
Just add a simple p tag with a (click) event handler (it is not onclick in Angular). This should do the trick:
<div>
<p (click)="openFile1()">File 1</p>
</div>
If you want to use label instead, use it like this:
<div>
<label (click)="openFile2()">File 2</label>
</div>
It should have a value, otherwise it is not visible and you can't click it.
Here
is a stackblitz with your sample code edited to make it work.
i have been trying to add icon from http://seehowsupport.com/font-awesome/ website to my p-button.
<div class="ui-g-12">
<button pButton id="selectFile" (click)="selectFile()" label="+ Select File..."></button>
</div>
here, in place of '+' in label, i wish to set icon from above url. I have heard changing some content attribute in css to \f067 can do it but m not sure how to.
Thanks
Icon on a button is specified with icon attribute and position is customized using iconPos attribute. Default icon position is left. To display only an icon, leave label as undefined.
Here are two ways by which you can add icons to primeng Button.
<button pButton type="button" icon="pi pi-check" iconPos="left"></button>
<p-button label="Click" icon="fa fa-check" iconPos="left"></p-button>
working Example
For more read on documentation -
https://primefaces.org/primeng/#/button
Use This way where it shows in their documentation and it works.
<div class="ui-g-12">
<button pButton id="selectFile" (click)="selectFile()" label="Select File..."><i class="fas fa-500px"></i>Text</button>
</div>
Link for How to use it https://fontawesome.com/how-to-use/svg-with-js
I am using mat-chips from material.angular.io
<mat-chip-list class="categories">
<mat-chip><a href="/publication/category/{{category.id}}">
{{category.name}}</a></mat-chip>
</mat-chip-list>
If I click with the center button of the mouse the link works and opens another tab, but I can not open the link with left click.
I tried with class="link-overlapping", but still does not working.
You don't need the anchor at all you can just use routerLink directly on mat-chip:
<mat-chip-list class="categories">
<mat-chip [routerLink]="['publication/category', category.id]">
{{category.name}}
</mat-chip>
</mat-chip-list>
Did you try with routerLink? it works for me.
<mat-chip-list class="categories">
<mat-chip><a [routerLink]="['/your_path']">{{ data }} </a></mat-chip>
</mat-chip-list>
</div>
I suggest this way
<mat-chip><a routerLink="/test" class="mat-standard-chip" style="margin:0; padding:0;">My link</a></mat-chip>
So that link is displayed at the bottom left of the screen when mouse is hovering.
I would like to recreate the following Dropdown from Semantic UI, in which a <label> is inserted for the dropdown menu using UI React:
(https://semantic-ui.com/collections/form.html#dropdown)
This is the markdown I'd like my React app to create:
<div class="ui form">
<div class="field">
<label>Gender</label>
<div class="ui selection dropdown">
<input type="hidden" name="gender">
<i class="dropdown icon"></i>
<div class="default text">Gender</div>
<div class="menu">
<div class="item" data-value="1">Male</div>
<div class="item" data-value="0">Female</div>
</div>
</div>
</div>
</div>
I'm struggling to accomplish this with the React UI implementation of Semantic UI.
My current attempt is this:
<Dropdown placeholder='What grade is your child in?' fluid selection
options={ grades }
labeled={ true }
name={ `survey_response[grade_${this.state.id}]` } />
It's very important that this is labeled clearly. I've found in user research that the placeholder is confusing as a question prompt alone.
There is documentation for adding a label, however, it requires nesting child components under Dropdown component, which interferes with my use of the "options" prop. Error is as follows:
Warning: Failed prop type: Prop children in Dropdown conflicts
with props: options, selection. They cannot be defined together,
choose one or the other
Thank you, Stackoverflow!
If you are using it inside a Form you can do:
<Form>
<Form.Dropdown
label='Gender'
options={//your array of options}
selection
/>
</Form>
I'm trying to get a list of items from my database, where each listed item is paired with a selectable button for "delete" in the Bootstrap alert style. When the user submits using a "delete selected" button at the bottom of the page, all the entries that were selected will be removed from the database.
Now, Bootstrap's documentation only explains how to style check boxes as buttons in a btn-group div, which groups them all together in one line. I'm working with a list, so I don't want the checkbox buttons in a group: I need them per line, and clearly associated with the label of the entry they're deleting. But I can't seem to get the checkboxes to style as buttons without that btn-group div. It seems pretty arbitrary, and I'm wondering if there's an easy way to do this in bootstrap styling without resorting to hand-writing a bunch of javascript onclick events to use the regular bootstrap button type without checkboxes.
Here's what I have right now, where I just put every checkbox by itself in its own little btn-group, but it formats all weird and autoselects the buttons by default:
#foreach ($data['entries'] as $entry) <!-- blade template stuff -->
<div class="btn-group" data-toggle="buttons">
Label of the database entry
<label class="btn btn-danger active">
<input type="checkbox" autocomplete="off"> Delete
</label>
</div>
</br>
</br>
#endforeach
Is there a good way to do this in Bootstrap, or am I stuck writing it myself in js?
#foreach ($data['entries'] as $entry) <!-- blade template stuff -->
<div data-toggle="buttons">
Label of the database entry
<label class="btn btn-danger">
<input type="checkbox" autocomplete="off"> Delete
</label>
</div>
#endforeach
This should work, as simple as just removing the btn-group class