Tips on enlarging the header size in ion-action-sheet within the VueJS framework of Ionic

Recently I started using Vue along with the ionic framework. This is a snippet of code from my application:

<ion-action-sheet
  :is-open="isActionSheetOpen"
  header="Choose Payment"
  mode="ios"
  :buttons="buttons"
  @didDismiss="setOpen(false)"
  class="my-custom-class"
></ion-action-sheet>

I am looking to make the font size of the 

header="Choose Payment"
text to be 25px, but I haven't been able to find any official documentation on how to do this.

Any suggestions on how I can achieve this?

I have attempted to add custom CSS for the class shown below:

ion-action-sheet.my-custom-class {
  --font-size: 25px;   
}
javascripttypescriptvue.jsionic-frameworkvue-component

Answer №1

When setting a cssClass for the action sheet, simply targeting the title element's css class should suffice:

ion-action-sheet.my-custom-class .action-sheet-title {
  font-size: 25px;
}

To see an example that fits your use case, refer to the IonActionSheet documentation or check out this modified version of the example in the docs here.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Moving Cursor Automatically to the End Upon Rejecting Input

I have a form input where users can enter values. I need to validate the inputs to ensure they only contain numbers, dots, and commas. If the input is invalid, I want to prevent it from being stored in the input field. To achieve this, I have implemented ...

javascriptreactjs

Supply type Parameters<T> to a function with a variable number of arguments

I am interested in utilizing the following function: declare function foo(...args: any): Promise<string>; The function foo is a pre-defined javascript 3rd party API call that can accept a wide range of parameters. The objective is to present a coll ...

typescript

solution for downloading large files from authenticated endpoint that works across multiple web browsers

I'm currently on the lookout for a solution to download large files (around 2 - 4 GB) from a bearer token protected api endpoint that is compatible with all common browsers including IE 11, Chrome, Firefox, Android Browsers, and Safari. I want it to w ...

asp.netangulartypescriptblobfilesaver.js

Can I use unclosed tags with v-for for iteration in Vue.js?

Imagine I am working on a project with Vue.js and here is some of my vue-code: <template> <div v-for="(item, index) in items"> <div v-if="item.isComponent"> <component :is="item.value"/> </div> ...

vue.js

Troubleshooting the issue with Vue 3 props not being updated

In my parent component, the structure is as follows: <template> <button @click="initStr" value="init str" /> <child :str="str" /> </template> <script> export default { components: { child, } ...

vue.js

Processing JSON data by reading multiple files using Node.js

I've encountered a situation where I have multiple files containing data with time stamps. It's important for me to read these files in order, line by line. However, I noticed that most Node packages utilize asynchronous methods for file reading. ...

javascriptjsonnode.js

Navigate through intricate JSON structure

Struggling with a highly complex JSON object, I am trying to list out all the properties and keys exactly as they are. While I have grasped the concept, I am having trouble with the execution. Every time the object contains another object, I need to call ...

javascriptjqueryjsonloops

Is it possible to retrieve server data in a JavaScript file?

EDIT: I accidentally omitted a piece of relevant code I am looking to access the "jsonData" value from my server in my JavaScript file. Can someone guide me on how to retrieve these values? Here is the server-side code: var express = require('expre ...

javascriptnode.jsserver

Experiencing issues with the redirect button on the navigation bar of my website

Video: https://youtu.be/aOtayR8LOuc It is essential that when I click a button on my navigation bar, it will navigate to the correct page. However, since the same nav bar is present on each page, it sometimes tries to redirect to the current page multiple ...

javascripthtmlcssweb

Ways to resolve the error message "Type 'Promise<{}>' is missing certain properties from type 'Observable<any>'" in Angular

Check out this code snippet: const reportModules = [ { url: '', params: { to: format(TODAY, DATE_FORMAT).toString(), from: format(TODAY, DATE_FORMAT).toString() } }, { url: 'application1', params: { to: for ...

javascripttypescript

The next function is not defined error in the controller function

Everything was running smoothly until I suddenly encountered this error message: ReferenceError: next is not defined. I'm puzzled because I didn't make any changes to this function. const Users = require('../data/users.model') exports ...

javascriptmongodbexpressmongoose

Ways to extract subarray elements that meet a certain condition and break out of the loop

const winningTemplate = { firstRow: [0, 1, 2, 3, 4], secondRow: [5, 6, 7, 8, 9], thirdRow: [10, 11, 13, 14], fourthRow: [15, 16, 17, 18, 19], lastRow: [20, 21, 22, 23, 24], firstDiagonal: [0, 6, 18, 24], firstColumn: [0, 5, 10, ...

javascriptreactjsarraysreact-hooks

Incorporate dynamic animations into text wrapping using React

Currently, I am in the process of learning React and have successfully created a flexbox with 6 child containers using the wrap property. Now, I am looking to add animation when the containers wrap onto a new line. I attempted to add a transition animatio ...

javascriptcssreactjsanimationcomponents

Issue with Discord.js (14.1) - Message Handling Unresponsive

After developing a sizable Discord Bot in Python, I decided to expand my skills and start learning JS. Despite thoroughly studying the documentation and comparing with my original Python Bot regarding intents, I am facing difficulties getting the message ...

javascripttypescriptdiscord.js

How can I turn off strict null checks in TypeScript when using ESLint?

ESLint keeps flagging my object as potentially null despite having an if statement to check for it. const user: User | null = getUser() if (user) { // if (user !== null) doesn't work either await user.updateProfile({ di ...

typescripteslint

Next.js and Material UI - issues with dynamic styles not functioning

I recently started using Next JS in combination with Material UI, following the example project setup provided in the documentation on Github: https://github.com/mui-org/material-ui/tree/master/examples/nextjs My main objective is to utilize Material UI&a ...

javascriptcssmaterial-uinext.js

Order of tabs, dialog, and forms customization using Jquery UI

I'm currently working on a jquery dialog that contains a form split into multiple tabs. In order to enhance keyboard navigation, I am looking for a way to make the tab key move from the last element of one tab to the first element of the next tab. Cur ...

javascriptjqueryhtmljquery-ui

JS/Docker - The attribute 'user' is not recognized in the context of 'Session & Partial<SessionData>'

I'm attempting to integrate express-session into my Node.js application running within Docker. I've come across several discussions on the topic: Express Session: Property 'signin' does not exist on type 'Session & Partial<Se ...

javascriptnode.jstypescriptdockerexpress-session

What is the best way to integrate HTML code within a JavaScript function?

I need the HTML code to execute only when a specific condition in JavaScript is met. Here is the JavaScript code: <script type="text/javascript"> $(document).ready(function () { if(window.location.href.indexOf("index.php") > -1) { ...

javascripthtml

"Encountered an error: File or directory not found while attempting to export a function

src/test.js module.exports.test = function() { const { readFileSync } = require('fs'); console.log(readFileSync('test.txt', 'utf8').toString()) } index.js const { test } = require('./src/test.js'); test(); ...

javascriptnode.js